Align header and items in grouped GridView

Question

I'm working on an UWP app and got trouble aligning headers with items in a grouped GridView, here's a picture of what I mean by that:

This is a simple GridView with no fancy styles applied or whatever and I thought this should work out of the box, but it doesn't.

Using the live visual tree from VS 2015 I found out that this is a 12px left margin on a ContentPresenter and a Rectangle inside the GridView header:

The StackPanel is inside the header and it houses the grid from my header template (see below for XAML) wrapped in a ContentPresenter (which has that 12px margin) and a Rectangle (which also has that margin) below that; this appears to be the ruler below the group title.

However, I haven't got the foggiest idea how to change that margin. I tried setting the header template in the GridView's GroupStyle

 <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>

but to no avail. Is there any way to fix this behavior?

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>

And add GridView header Item style:

<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>

In gridview edit group style and add:

HeaderContainerStyle="{StaticResource GridViewHeaderItemStyle1}"

It will looks like:

<GroupStyle HeaderContainerStyle="{StaticResource GridViewHeaderItemStyle1}">