Blog

Creating a Group Style

Excerpt by Ken Getz

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.

Ch10_BlogThe sample's ListView bound to grouped data

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 HeaderTemplate element describes the header for each group

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 Panel property defines the control that displays each group's content

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.

The GroupStyle property

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

windows 8 The grouped data

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



Ken Getz
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This course excerpt was originally posted June 26, 2013 from the online courseware Windows 8 Using XAML, Part 09: Views, Binding, and Templates by Ken Getz

XAML Windows 8