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:
Another look using grouping is shown here:
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.
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.
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.
Maybe the most important part is the definition of the ItemTemplate. This template binds to properties of the SampleDataItem type.
Now let's change this template. Here' the size is changed, and a TextBlock element is added that bounds to the Description property.
This change results in a different look:
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:
Let's move on to another template, the HeaderTemplate.
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.
With a small change, the subtitle is shown as well.
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.
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.
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.
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.