Customize GroupItem HeaderTemplate UWP - xaml

Question

I'm doing an UWP project and I wan't to customize the HeaderTemplate of the group items, but I m unable to find how to fully customize it.
<ListView ItemsSource="{x:Bind ContactsCVS.View}"
ItemTemplate="{StaticResource ContactListViewTemplate}"
SelectionMode="Single"
ShowsScrollingPlaceholders="True"
Grid.Row="1"
Grid.ColumnSpan="2">
<ListView.GroupStyle>
<GroupStyle >
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="data:GroupInfoList">
<TextBlock Text="{x:Bind Key}"
Style="{ThemeResource itleTextBlockStyle}"/>
<!-- Can't fully customize this part ?-->
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
I m basing my test on this official example :
https://github.com/Microsoft/Windows-universal-samples/blob/de1bb527ec0327b767397d4c1a74a797356f4357/Samples/XamlListView/cs/Samples/SimpleListViewSample/SimpleListViewSample.xaml
I try to replace the letters A, B, C... With a blue strip and custom text. Looks very simple but can't figure out how it works.
Thanks

Answer 1

The HeaderTemplate defines the template of the header content, but the actual control that displays this content is a ListViewHeaderItem. You can actually simply do this if you want:
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="data:GroupInfoList">
<Border Background="LightSkyBlue">
<TextBlock Text="My custom text" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
When the ListView is rendered, the ListViewHeaderItem for each group will show the above content, but the control itself still has its own default style.
If you want to style the control as well, to maybe make it stretch horizontally or something, you'll have to create your own style for HeaderContainerStyle:
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<ContentPresenter
x:Name="ContentPresenter"
Background="Red"
Margin="0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="Stretch"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.HeaderContainerStyle>
The ContentPresenter is responsible for showing the Content of the control, in this case the content is whats inside the HeaderTemplate.