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.

Creating a Collection View

Collection views are created using a CollectionView object, which is linked to a source collection. However, if you wish to create a view using pure XAML, you use the CollectionViewSource class, which is a proxy for CollectionView. With CollectionViewSource you can add sorting and grouping declaratively. You start by creating the new view as a resource, with a unique key. To specify the collection, you use a standard binding expression in the Source attribute.

Add the following resource to the window:

<Window.Resources>
    <CollectionViewSource x:Key="PeopleResource" Source="{Binding People}" />
</Window.Resources>

We now need to update the binding of the ListBox to point to the new collection view. This is achieved by modifying the binding expression to reference the resource's key. Update the opening tag of the ListBox element, as follows:

<ListBox ItemsSource="{Binding Source={StaticResource PeopleResource}}">

To check that the binding is operating correctly, run the program again. The items in the list will appear in the same order as before. You may notice a small difference, in that the first item is selected automatically. This relates to the navigation features of collection views, which we will see in a later article.

Sorting the Collection View

The sorting capabilities of CollectionViewSource are somewhat limited. You define a sort order using a SortDescription element, which includes two key properties. The first, PropertyName, determines which property to order. At run time, the values from this property for each item in the collection are obtained using reflection. They are then sorted into either ascending or descending order, according to the value of the Direction attribute.

The SortDirection type is defined in the System.ComponentModel namespace in the WindowsBase assembly. To reference this, add a new namespace alias to the Window's XAML:

<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"
        Title="CollectionView Demo"
        Height="300"
        Width="200">

We can now add the SortDirection. Let's order the people in the list according to their ages. Note that the SortDescription is added to the CollectionViewSource's SortDescriptions property.

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

Run the program again. You will see that the people are now shown in age order.

WPF collection view sorting

You can see in the image that there are two people aged 31. These appear in no particular order. However, you can add extra SortDescription elements to further sort the collection view. They are applied in the order in which they appear. The first SortDescription performs the main sort. The second orders any items that are duplicates, and so on.

Let's add a second sort so that people with the same age are ordered by last name.

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

Run the program again to see the results. You should see that "Jen Smith" now appears before "Jim White".

15 October 2014