Windows Store App ListView: How to use the GroupStyle?

问题

am porting a Windows Phone App to Windows Store and trying to create a grouped ListView. There is a good article in the Dev Center and grouping the list is no problem. But there are some things I do not understand about the GroupStyle.

The example from the article uses a GroupStyleSelector that leads to the following GroupStyle:

        <GroupStyle x:Key="listViewGroupStyle">
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Background="LightGray"  >
                        <TextBlock Text='{Binding Key}' Foreground="Black" Margin="10"
                       Style="{StaticResource SubheaderTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>

            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>

The purpose of GroupStyle.HeaderTemplate is obvious and changes on this template can be directly observed in the running app.

But what is GroupStyle.Panel good for? The docs says:

Gets or sets a template that creates the panel used to lay out the items.

Ok, but no matter how I change ItemsPanelTemplate (BackgroundColor, Orientation, etc.), the List does not change in the running app.

Additionally there is GroupStyle.ContainerStyle which is not used in the Example. If add this to the GroupStyle this has no influece on the list in the running app as well.

So, what are GroupStyle.Panel and GroupStyle.ContainerStyle good for? How are the used correctly?

回答1:

I found out that you need to set the ItemsPanel of the ListView, too. By default the ItemsStackPanel is used and that doesn't seem to allow any custom panel in a grouped ListView. When setting the ItemsPanel to a VirtualizingStackPanel, the custom panel is applied, BUT the headers are not sticky anymore. It seems that there is something broken about the current ListView/ItemsStackPanel implementation and as we do not have source access it's hard to tell what.

<ListView 
        ItemsSource="{Binding Source={StaticResource namesSource}}"
        >
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" Foreground="Yellow" FontSize="{ThemeResource HubHeaderFontSize}" Margin="6" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <controls:WrapPanel />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                </GroupStyle>
            </ListView.GroupStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <!--<ItemsWrapGrid FlowDirection="LeftToRight"  Orientation="Vertical"/>-->
                    <VirtualizingStackPanel Orientation="Vertical"/>
                    <!--<ItemsStackPanel Orientation="Vertical"/>-->
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="AliceBlue" Margin="3,0">
                        <TextBlock Text="{Binding}" Foreground="Black" Margin="4,2"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

来源：https://stackoverflow.com/questions/21163076/windows-store-app-listview-how-to-use-the-groupstyle