对齐 header 和分组 GridView 中的项目

Question

我正在开发一个 UWP 应用程序，但在将 headers 与分组的 GridView 中的项目对齐时遇到了问题，这是我的意思的图片：

这是一个简单的 GridView，没有应用花哨的样式或其他任何东西，我认为它应该开箱即用，但事实并非如此。

使用 VS 2015 中的实时可视化树，我发现这是 ContentPresenter 上的 12px 左边距和 GridView 内的矩形 header:

StackPanel 位于 header 内部，它包含我的 header 模板中的网格（请参阅下面的 XAML）包裹在 ContentPresenter（具有 12px 边距）中，并且在其下方的矩形（也有该边距）；这似乎是组标题下方的标尺。

但是，我对如何更改边距一无所知。我尝试在 GridView 的 GroupStyle

中设置 header 模板

 <GridView Grid.Row="1"
        ItemsSource="{Binding Source={StaticResource exercisesCollection}}"
        ItemTemplate="{StaticResource gridViewTemplate}"
        SelectionMode="None"
        CanDragItems="True">
    <GridView.GroupStyle>
       <GroupStyle HidesIfEmpty="True">
          <GroupStyle.HeaderTemplate>
             <DataTemplate>
                <Grid>
                   <TextBlock Text="{Binding Path=Name}" />
                </Grid>
             </DataTemplate>
          </GroupStyle.HeaderTemplate>
       </GroupStyle>
    </GridView.GroupStyle>
 </GridView>

但无济于事。有什么办法可以解决这个问题吗？

Answer 1

<GridView Grid.Row="1"
        ItemsSource="{Binding Source={StaticResource exercisesCollection}}"
        ItemTemplate="{StaticResource gridViewTemplate}"
        SelectionMode="None"
        CanDragItems="True">
    <GridView.GroupStyle>
       <GroupStyle HidesIfEmpty="True">
          <GroupStyle.HeaderTemplate>
             <DataTemplate>
                <Grid>
                   <TextBlock Text="{Binding Path=Name}" Margin="-12, 0, 0,0"/>
                </Grid>
             </DataTemplate>
          </GroupStyle.HeaderTemplate>
       </GroupStyle>
    </GridView.GroupStyle>
 </GridView>

并添加 GridView header Item 样式：

<Style x:Key="GridViewHeaderItemStyle1" TargetType="GridViewHeaderItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="0,0,0,4"/>
            <Setter Property="Padding" Value="12,8,12,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewHeaderItem">
                        <StackPanel BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle HorizontalAlignment="Stretch" Height="1" Margin="0,8,12,0" Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}" StrokeThickness="0.5" VerticalAlignment="Bottom"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

在 gridview 中编辑组样式并添加：

HeaderContainerStyle="{StaticResource GridViewHeaderItemStyle1}"

看起来像：

<GroupStyle HeaderContainerStyle="{StaticResource GridViewHeaderItemStyle1}">

对齐 header 和分组 GridView 中的项目

Align header and items in grouped GridView

c#

xaml

gridview

uwp