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.

Collection Views

In recent articles in the WPF tutorial we looked at the process of binding collections of objects to ItemsControls, such as ListBoxes and ComboBoxes. We also used data templates to control the output; a technique that allows you to create rich user interfaces. In both cases, we bound the control properties directly to a list or observable collection.

When you bind directly to a collection, the items in the control appear in the same order as they are arranged in the source data. You can change the order of items by add sorting and grouping using a collection view. This is a wrapper for a collection that adds extra features. In this article we'll use XAML to add sorting and grouping of items. In the next article we'll use C# code with collection views to filter the information.

To demonstrate, create a new WPF application in Visual Studio named, "CollectionViewsDemo". We'll create a program that displays a list of people, each with a first name, last name, age and gender. We'll then modify the program to sort and group the people.

Each person will be an object of the Person class, shown below. In this case the type does not implement the INotifyPropertyChanged interface, as we won't be updating the properties. Add the class to the project.

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string Gender { get; set; }
}

We'll bind a window to a data object that contains an observable collection of Person objects. Create a new class file named, "PeopleData" and add the following using directive to simplify access to ObservableCollection<T>:

using System.Collections.ObjectModel;

The code for the class declares a collection property and initialises it in the constructor.

public class PeopleData
{
    public PeopleData()
    {
        People = new ObservableCollection<Person>
        {
            new Person { FirstName="Bob", LastName="Green", Age=41, Gender="Male" },
            new Person { FirstName="Sue", LastName="Brown", Age=25, Gender="Female" },
            new Person { FirstName="Jim", LastName="White", Age=31, Gender="Male" },
            new Person { FirstName="Mel", LastName="Black", Age=18, Gender="Female" },
            new Person { FirstName="Jen", LastName="Smith", Age=31, Gender="Female" },
            new Person { FirstName="Tim", LastName="Jones", Age=64, Gender="Male" }
        };
    }

    public ObservableCollection<Person> People { get; private set; }
}

Next, update the main window's XAML to create a window containing a ListBox. The ListBox is bound to the People property.

<Window x:Class="CollectionViewsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CollectionView Demo"
        Height="300"
        Width="200">
    <Grid>
        <ListBox ItemsSource="{Binding People}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0 0 0 5">
                        <TextBlock Text="{Binding FirstName}"/>
                        <TextBlock FontWeight="Bold" Text="{Binding LastName}"/>
                        <TextBlock Foreground="Blue" Text="{Binding Age}"/>
                        <TextBlock Foreground="Orange" Text="{Binding Gender}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Finally, set the DataContext in the main window's constructor:

public MainWindow()
{
    InitializeComponent();
    DataContext = new PeopleData();
}

You can now run the program to see the results. The window shows the list of people in the order that they were added to the collection. The data template applied to the ListBox means that all of the Person properties are visible.

WPF collection view demonstration window

15 October 2014