Showing Progress, Changing State
Picture Search v2

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:


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.

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:


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.

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


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


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.


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


Feed You can follow this conversation by subscribing to the comment feed for this post.


Just desire to say your article is as surprising. The clearness in your poet is simply great and i can assume you're an expert on this subject. Fine with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please carry on the enjoyable work.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)