A page similar to GridView, but with static groups and each section of the group will have a different layout

Question

I would like to create a page a bit like the Grouped Items page in the Cookbook Contoso application (if you saw it). Basically, this GridView is bound to CollectionViewSource.

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

GridView seems to bind groups to the highest level CVS data source with the Source attribute, and then bind each individual section with the ItemsPath attribute.

However, my page is different in that my groups are static, these are: Times, Categories, List. The first will have a listview, the second will have a grid, and the third will be a different list.

In addition, each section of the group has a different layout. These are not just repeating groups and repeating layouts of elements. I expected that I could define “static” groups and layout for each group directly in XAML and maybe even add test data to these elements, but GridView seems to require data binding, even if only for a dummy data source at design time .

So how would you do that? Essentially, this requires exactly the same horizontal scrolling and flow around as the GridView, but groups have completely different layouts, and each group should ideally be defined directly in XAML?

I'm going to create a regular grid enclosed in a scroll viewer ... what do you think? What would you do?

Answer 1

In a GridView, you can assign groups to a GroupStyle as follows:

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

Now in your case, each group will need its own GroupStyle. Therefore, instead of using the ListView in each group in the GridView, you can:

• Define two different group styles with header templates and a panel ( ItemsPanelTemplate (MSDN)) that you want to use

• Define a class that has custom logic to choose which group style to use for the group. ( GroupStyleSelector )

• Set the GroupStyleSelector property to GridView in XAML

• Define static groups in your view model to contain the data you need: (Times, Categories, List)

Answer 2

This can be done using the DataTemplateSelector . You will have several groups, but within each group the elements will differ in different ways. See the SO post for more help articles.