BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Data Binding - Collection Views

The one hundred and fourth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at data binding for multiple items. This article considers collection views, which allow data bound collections to be sorted, grouped and filtered.

Grouping the Data

In addition to sorting the items in a collection, you can group them based upon a property. Once grouped, all of the items with matching values are grouped together in the control. To identify the groups, you can include group headers that include the data from the grouped property. These are inserted into the control near each group.

Grouping is defined using the GroupDescription class. This is found in the System.Windows.Data namespace in the PresentationFramework assembly, so update the Window's XAML to include an extra alias.

<Window x:Class="CollectionViewsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
        xmlns:swd="clr-namespace:System.Windows.Data;assembly=PresentationFramework"
        Title="CollectionView Demo"
        Height="300"
        Width="200">

We can now add a GroupDescription to the CollectionViewSource element. Let's group the people according to gender.

<CollectionViewSource x:Key="PeopleResource" Source="{Binding People}">
    <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="Age" Direction="Ascending"/>
        <scm:SortDescription PropertyName="LastName" Direction="Ascending"/>
    </CollectionViewSource.SortDescriptions>
    <CollectionViewSource.GroupDescriptions>
        <swd:PropertyGroupDescription PropertyName="Gender"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

Run the program to see the results. You will find that all of the females are listed first, followed by the males.

Adding a Group Header

Once you have an ItemsControl linked to a grouped collection view, you can include a group header. This is defined within the items control, using the GroupStyle property. GroupStyle includes a further property, HeaderTemplate, to which you apply a data template. We saw how to use data templates in the previous article, so I won't repeat that information here.

Modify the XAML for the ListBox, as follows:

<ListBox ItemsSource="{Binding Source={StaticResource PeopleResource}}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="10 0 10 5">
                <TextBlock Text="{Binding FirstName}"/>
                <TextBlock FontWeight="Bold" Text="{Binding LastName}"/>
                <TextBlock Foreground="Blue" Text="{Binding Age}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Border BorderBrush="Gray" BorderThickness="0 0 0 4">
                    <TextBlock FontSize="14" FontWeight="Bold"
                               Foreground="Gray" Text="{Binding Name}"/>
                    </Border>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListBox.GroupStyle>
</ListBox>

There are several changes in the XAML. Firstly, as we are going to show a group header that includes the gender, there is no need to display it for each item, so the gender TextBlock has been removed from the ItemTemplate's data template.

Next, the GroupStyle element is present in the ListBox and a GroupStyle has been applied. This includes a data template for the header. The header is made up of a Border and a TextBlock. Note the data binding expression used in the TextBlock. This references the Name property. Each header will be bound to one of the groups and the value from the grouped property is held in Name.

Run the program for a final time to see the grouped list.

WPF collection view grouping

15 October 2014