Question

I would like to create a page a little like the Grouped Items Page inside the Contoso Cookbook application (if you have seen it). Basically, it’s a GridView bound to a CollectionViewSource.

    <CollectionViewSource
        x:Name="groupedItemsViewSource"
        Source="{Binding Groups}"
        IsSourceGrouped="true"
        ItemsPath="TopItems"
        d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

The GridView appears to bind the Groups to the highest level of the CVS data source with the Source attribute and then binds each individual section with the ItemsPath attribute.

However, my page differs in that my groups are static, they are: Times, Categories, List. The first will have a listview, the second a grid of tiles and the third will be another listview.

Also, each group section itself has a different layout. It’s not just repeating groups and repeating item-layouts. I was expecting to be able to define “static” groups and a layout for each group directly in the XAML and maybe even add test data to those elements, but it seems like GridView requires data binding, even if just to a dummy data source at design time.

So how would you do this? So essentially, it needs exactly the same horizontal scroll and wrapping as the GridView, but the groups have totally different layouts and each group should ideally be definable directly in the XAML?

I’m thinking of creating a normal grid enclosed in a scroll viewer… what do you think? What would you do?

Answer 1

In a GridView, groups can be assigned a GroupStyle like this:

<GridView.GroupStyle>
    <GroupStyle HeaderTemplate="{StaticResource MyGroupHeaderTemplate}" 
                Panel="{StaticResource MyGroupItemsPanelTemplate}" 
                HidesIfEmpty="True" />
</GridView.GroupStyle>

Now, in your case each group will need its own GroupStyle.
So instead of using a ListView within each group in a GridView, you could:

1. Define 2 different group styles with header templates and the panel (ItemsPanelTemplate (MSDN)) that you want to use

2. Define a class that has your custom logic to select which group style to use for a group.(GroupStyleSelector)

3. Set the GroupStyleSelector property on the GridView in XAML

4. Define static groups in your view model to contain the data you want: (Times, Categories, List)