LearnNowOnline

Blog

Creating a Group Style

Excerpt by Ken Getz | June 26, 2013

An ItemsControl can work with grouped data in two ways. It can:

• Bind to grouped data, and display the items from all the groups, without displaying the items in specific groups.
• Bind to the groups, so that the control displays the groups and the items within each specific group.

Of course, there are different ways to group the data, as well. The data source might be a list of groups, where each group contains the items in that group.

The data source might also be a grouped data structure that you get by using a grouped LINQ query. In this case, there isn't a distinct name for the subgrouping, so you must rely on the behavior of the ItemsControl to manage the display of the groupings.

As you've seen, by default, even if you bind to a grouped data source, the ItemsControl displays no grouping information. In order to add this behavior, you must explicitly specify how you want the ItemsControl to display its grouped data. To make that happen, you must specify the GroupStyle property of the ItemsControl, and provide a GroupStyle element that describes how the grouping should work, visually. In this article, we'll take a deeper look into creating a Group Style.

Creating a Group Style

The GroupStyle element generally specifies a header template for each group within the grouped data source. You can modify the arrangement of items within the group by setting the Panel property of the GroupStyle object. You may want to specify how the group itself looks, and to do that, modify the GroupStyle's ContainerStyle property. It's in this property that you would specify a border, or a specific font. If you want to hide empty groups, make sure you set the GroupStyle's HidesIfEmpty property to True.

In the sample that you'll examine, you'll find markup like that shown in the Figure below, which shows the markup for a ListView bound to grouped data, with all the child elements collapsed. Note the ListView.GroupStyle element, which contains a GroupStyle element that defines the group style. The GroupStyle element contains elements that describe the HeaderTemplate, Panel, and ContainerStyle properties of the GroupStyle.

The HeaderTemplate property contains information about the header for each group, as shown in the Figure below. This header displays the Key property of the group, with black text on a gray background.

The Panel property (see the Figure below) defines the control that forms the group content. In this case, the group content is contained in a VariableSizedWrapGrip whose orientation is horizontal.

The ContainerStyle property defines the style for the group container, as shown in the Figure below. In this example, the group container has a 2-pixel-wide dark gray border, and margin of 3 pixels all the way around.

Displaying grouped animal data, using the animal type (Domestic, Exotic,Farm, Wildlife) as the grouping field, looks like the Figure below.

This post is an excerpt from the online courseware for ourWindows 8 Using XAML: Views, Resources, and Toastscourse written by expert Ken Getz.ine.