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 Display Controls - TreeView - Data Binding

The one hundred and eighth part of the Windows Presentation Foundation Fundamentals tutorial continues to examine the TreeView control. This article considers data binding between a TreeView and objects held in a hierarchical structure.

Hierarchical Data Binding

In the previous article in this series we introduced the TreeView control. In the example code, we populated a tree view using a mixture of XAML and C# code. This is a viable way of working with WPF but it is more common, and usually more powerful, to populate controls using data binding.

Data binding for a tree view is a more complicated operation that for ListViews or ListBoxes. Instead of a flat collection of objects to be displayed, items are arranged into hierarchical structures. The objects involved in these arrangements may be of different types, each requiring a different data template.

In this article we'll look at two types of data binding for tree views. We'll first consider hierarchies with a fixed number of levels, such as lists with parent/child relationships. In the second example we'll create a tree view for recursive data with an unlimited number of levels.

We will start with the common scenario, where you wish to display a list of parent items, each of which may include one or more children. We'll show a list of teams from an imaginary motor racing championship, where the teams are divided into classes. To begin, create new WPF Application project in Visual Studio named, "TreeViewBindingDemo1".

Once the new solution is ready, add a new class to represent the motor racing teams. The code for the class is shown below. For now, only a name is required. The INotifyPropertyChanged interface is not implemented because we won't be updating any of the information in a Team.

public class Team
{
    public Team(string teamName)
    {
        TeamName = teamName;
    }

    public string TeamName { get; set; }
}

Add a second class to hold the classes of team in the championship. The TeamClass type holds a name and a list of teams of that type.

public class TeamClass
{
    public TeamClass(string className)
    {
        ClassName = className;
    }

    public string ClassName { get; set; }
    public IList<Team> Teams { get; set; }
}

We can now set up some sample data and set it as the data context for the window. Update the constructor of the main window, and add a set up method, as follows:

public MainWindow()
{
    InitializeComponent();
    SetUpDataContext();
}

private void SetUpDataContext()
{
    var ferral = new Team("Ferral Motorsport");
    var roseCow = new Team("Rose Cow Racing");
    var mercredi = new Team("Mercredi Racing");
    var mcmillan = new Team("McMillan Mercredi");
    var forcedIndy = new Team("Forced Indy Motors");
    var catering = new Team("Catering Cars");

    var manufacturers = new TeamClass("Manufacturer Teams");
    manufacturers.Teams = new List<Team> { ferral, mercredi, catering };

    var customerTeams = new TeamClass("Customer Teams");
    customerTeams.Teams = new List<Team> { roseCow, mcmillan, forcedIndy };

    DataContext = new List<TeamClass> { manufacturers, customerTeams };
}

Before we look at the data binding, modify the XAML in the main window so that the window holds nothing but a TreeView control:

<Window x:Class="TreeViewBindingDemo1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView Data Binding Demo" Height="250" Width="200">
    <TreeView />
</Window>
31 October 2014