Grouping with the GridView Control - Windows Store Apps (XAML)

Representing data within Windows Store apps, grouping the data often is a very useful and appealing option. Visual Studio also offers a ready to use template to display grouped data by using the GridView control. Other than the default look that's given by the Visual Studio template, there are nearly endless possibilities. This article gives information on the templates of the GridView control and how they can be used to change the look of grouping data.

The Visual Studio template for the Grid app looks like this:

Grouping1

Another look using grouping is shown here:

MenuCardGrouping

With the MenuCard app (soon in the Windows Store), a list of menu items is grouped by a number of elements (6 or 8, depending on the screen size), and every group is shown in two columns.

Let's get into the source code. 

With the code generated from the Visual Studio template, the data is represented with a group and an item object. The group type SampleDataGroup is shown in the following code snippet. This type contains simple properties, and the property Items of type ObservableCollection<SampleDataItem>. The Items property leads to the items of the group.

Source Code: SampleDataGroup

The items are defined the type SampleDataItem. This type just consists of simple properties.

Source Code: SampleDataItem

From within XAML, the data is referenced via the CollectionViewSource. The Source property binds to the Groups property. Groups is a property of the SampleDataSource class that returns an observable collection of SampleDataGroup. Within a single group, the items of a group are referenced via the ItemsPath property of the CollectionViewSource. This is the Items property of the SampleDataGroup. To allow grouping, the IsSourceGrouped property is set to true.

Source Code: CollectionViewSource

The GridView binds to the CollectionViewSource with the setting of the ItemsSource property. Here is the complete definition of the GridView as it is created from the Visual Studio template.

Source Code: GridView

Maybe the most important part is the definition of the ItemTemplate. This template binds to properties of the SampleDataItem type.

Source Code: ItemTemplate

Item Template

Now let's change this template. Here' the size is changed, and a TextBlock element is added that bounds to the Description property.

Source Code: changed ItemTemplate

This change results in a different look:

Grouping2

Now it looks like with the larger templates, there's only one row of items. However, this depends on the screen resolution and scale as is shown here on a display with a lower scale:

  Grouping3

 Let's move on to another template, the HeaderTemplate.

Header Template

The header template that is defined with the group style defines how the header of the group should look like. The Visual Studio template generated code consists of a button with the title of the group, and the Chevron character. The button is used to navigate to another page of the app.

Source Code: HeaderTemplate

With a small change, the subtitle is shown as well.

Source Code: modified HeaderTemplate

Grouping4

For all the upcoming changes, the size of the item template is modified to a width of 240, and a height of 150. This allows to see multiple groups on a single screen.

Items Panel Template

The items panel is the panel for all the items - all the groups. To easily see the arrangement of the items panel, the background color is changed.

Source Code: ItemsPanel

Grouping5

As clearly can be seen, the ItemsPanel is the panel for all items across all groups. For arranging of the items, an ItemsWrapGrid is used. This panel arranges the items from left to right or top to bottom.

The ItemsWrapGrid supports grouping. The already defined GroupPadding property specifies the padding values between the groups. It's also possible to move the group header to the left instead of top with the GroupHeaderPlacement property.

By default, the items are arranged vertially from top to bottom. As soon, as the avaialble size is reached, the next column is started. This behavior can be changed by setting the Orientation property.

With the following screenshot, the background color is removed, the Orientation property set to Horizontal, and the MaximumRowsOrColumns set to 5 to only allow 5 elements in one row.

Grouping6

The ItemsPanel can specify any panel as its children, e.g. StackPanel, VirtualizingStackPanel, and VariableSizedWrapGrid. However, if grouping is used, not all the panels support grouping. Panels with grouping options are ItemsStackPanel and ItemsWrapGrid.

Summary

Item Template, Header Template, and Items Panel Template are important templates shown to arrange grouping with the GridView. The Header Template to define the header of the groups as it is specified with the Group Style, the Items Panel Template arranges all the items, and the Item Template defines the look of every item. This allows a lot of customization grouping the grid.

Christian

More information on programming Windows Store apps in my workshop and the book Professional C# 2012 and .NET 4.5.