Horizontal stretching - group header ListView

Question

So... Any bright ideas how we can enable Horizontal content stretching on the GroupHeader template of a Grouped ListView in Win RT - phone?

I'm all ears!

I've added a demo application so you can try it out - please do before posting your answer! Code can be found here https://github.com/Depechie/ListView-HorizontalStretch-RT81

I added 2 pages, MainPage has the problem of not having Horizontal stretching. MainPage2 has a fix for Horizontal stretching, but because of that fix, the JumpList ( zoomed out view ) is not working anymore. You can navigate from MainPage to MainPage2 through the appbar button.

Here the 2 visuals

Answer 1

Your fix is overly complicated and deprecated. What you need for your group header style is as simple as the following:

<Style x:Key="FixedHeaderContainerStyle"
       TargetType="ListViewBaseHeaderItem">
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
</Style>

And apply it to your ListView like so (old ContainerStyle is deprecated and replaced with HeaderContainerStyle):

<GroupStyle HidesIfEmpty="True"
            HeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
            HeaderContainerStyle="{StaticResource FixedHeaderContainerStyle}" />

BUT the header fix wasn't the reason why your ZoomedOutView stopped working. The issue is because you added the following to MainPage2:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

VirtualizingStackPanel breaks this and the new and improved panel (that includes virtualization is ItemsStackPanel, which is also the default now so omit this altogether.