How do I remove ListView GroupStyle Header seperator line?

Question

In ListViews on windows universal platform, there is an ugly seperator line below the group header, when you use ListView grouping. Even Microsoft themselves removed this line in their Apps. In the Live Visual Tree you can see that it is a rectangle in a GridViewHeaderItem. I've read that it's possible to set its height to 0. How can I do this?

Here's the code which sets the text of the header item:

<ListView.GroupStyle>
  <GroupStyle HidesIfEmpty="True" >
     <GroupStyle.HeaderTemplate>
        <DataTemplate>
                  <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
     </GroupStyle.HeaderTemplate>
   </GroupStyle>
</ListView.GroupStyle>

Answer 1

You can find all the default styles in generic.xaml at

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic

Digging into that file, you'll find the default style for the ListViewHeaderItem as well:

<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
    <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 ListViewHeaderItemMinHeight}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewHeaderItem">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
                               StrokeThickness="0.5"
                               Height="1"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Stretch"
                               Margin="12,8,12,0"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Simply copy over that style into your project's ResourceDictionary and remove the culprit Rectangle (so only the ContentPresenter is left as child element).

<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
           StrokeThickness="0.5"
           Height="1"
           VerticalAlignment="Bottom"
           HorizontalAlignment="Stretch"
           Margin="12,8,12,0"/>