How to properly build a grouped ListView for Win 8.1 and future versions?

Question

Hi,
I am porting a Windows Phone 8 app to Windows 8.1 and trying to create a grouped list of items using a ListView. After several hours of trying and reading the ListView documentation I am totally confused and still have no idea of how to correctly use the
ListView.
Of course I found a lot of descriptions of how to style a ListView but it seems that ListView was heavily changed in Windows 8.1 and most examples refer to Win 8.0. Styles that worked in 8.0 can lead to crashes in 8.1.
The ListView has an ItemPanel, an ItemTemplate, a GroupStyle... The GroupStyle uses a HeaderTemplate, a Panel, a ContainerStyle, etc... ContainerStyle is honered in Win 8.0 but not in Win 8.1 if ItemPanel is an ItemsStackPanel... Also ContainerStyle will
not be supported in future versions, etc... What...?
I would like to style the ListView like this:
Problem 1:
How to stretch the Header over the complete width. The solution I found was to alter the default GroupStyle.ContainerStyle to stretch the HorizontalContentAlignment of the HeaderContent instead of using the default left align. Workes fine, but the
docu says:
"[ContainerStyle may
be altered or unavailable for releases after Windows 8.1 and is not supported for
ItemsControl.GroupStyle.]"
So, how to stretch the header without using ContainerStyle?
Problem 2:
How to add a footer to the group?

Answer 1

I have the same problem and have tried the stuff above. When I edit the xaml code the GroupHeader expands to the width of the ListView. But when I compile
the code it collapses to almost 1 pixel in width (it looks like that), beginning to be a bit frustrated :-(
Here is my listview xaml code:
        <ListView
x:Name="MainListView"
 Grid.Row="1"
 Margin="10,10,10,0"
 ItemTemplateSelector="{StaticResource
MinTemplateSelector}"
 ItemsSource="{Binding
Source={StaticResource
GroupedData}}" >
<ListView.ItemContainerStyle>
<Style
TargetType="ListViewItem">
<Setter
Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
                <ItemsPanelTemplate>
<VirtualizingStackPanel
/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid
Height="70"
 Background="#FF662485"
Margin="0"
 Width="{Binding
ActualWidth,
 ElementName=MainListView,
Mode=OneWay}">
<TextBlock
Text="{Binding
GroupName}"
 FontFamily="Segoe UI Light"
       FontWeight="ExtraLight"
 FontSize="26.667"
Margin="9,0,20,0"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 TextTrimming="WordEllipsis"
Foreground="White"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Any ides why it goes wrong ?
/Mads