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.

Recursive Data Binding

The second type of hierarchical binding uses a recursive data structure. For example, you might define a class that represents an employee of a business. Each Employee object could include a collection of subordinate employees. These could be arranged into any number of levels in a hierarchy, depending upon the management structure of a business.

In such cases, it is not viable to create a series of hierarchical templates, each with a unique key and each capable of displaying Employees, because you cannot know how many templates will be required. An alternative approach is required.

To demonstrate, create a new WPF Application in Visual Studio. Name this project, "TreeViewBindingDemo2". Once prepared, add a class to represent an employee who may have subordinates:

public class Employee
{
    public Employee(string name)
    {
        Name = name;
        Employees = new List<Employee>();
    }

    public string Name { get; set; }
    public IList<Employee> Employees { get; private set; }
}

Let's set up the data context for the main window by changing its constructor and creating a series of linked employees, as follows. In this case, the data context is a list of Employee objects.

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

private void SetUpDataContext()
{
    var manager1 = new Employee("Matt Manager");
    manager1.Employees.Add(new Employee("Sam"));
    manager1.Employees.Add(new Employee("Ella"));

    var manager2 = new Employee("Mel Aboss");
    manager2.Employees.Add(new Employee("Tim"));
    manager2.Employees.Add(new Employee("Tom"));

    var manager3 = new Employee("Mark Incharge");
    manager3.Employees.Add(new Employee("Jack"));
    manager3.Employees.Add(new Employee("Jill"));

    var manager4 = new Employee("Mike Planner");
    manager4.Employees.Add(new Employee("Rita"));
    manager4.Employees.Add(new Employee("Sue"));
    manager4.Employees.Add(new Employee("Bob"));

    var manager5 = new Employee("Matt Manager");
    manager5.Employees.Add(new Employee("Chaz"));
    manager5.Employees.Add(new Employee("Dave"));

    var director1 = new Employee("Jim Director");
    director1.Employees.Add(manager1);
    director1.Employees.Add(manager2);

    var director2 = new Employee("Pam Dictator");
    director2.Employees.Add(manager3);
    director2.Employees.Add(manager4);
    director2.Employees.Add(manager5);

    var md = new Employee("Martin Topboss");
    md.Employees.Add(director1);
    md.Employees.Add(director2);

    var pa = new Employee("Petra Peeyaa");

    DataContext = new List<Employee> { md, pa };
}

We now need to configure the XAML and set up a hierarchical data template. Instead of creating template resources with unique keys, we'll omit the keys altogether and instead specify the type of object to which the data template should be applied. This will be applied at all levels of a tree view, unless an alternative template is specified. Targeting a type is achieved by setting the DataType attribute of the template, using the syntax:

DataType="{x:Type type-name}"

To reference the Employee type, we'll also need to declare an alias for the TreeViewBindingDemo2 namespace.

Replace the XAML of the main window with the following. Note the DataType attribute in the HierarachicalDataTemplate and the "data" namespace alias.

<Window x:Class="TreeViewBindingDemo2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:TreeViewBindingDemo2"
        Title="TreeView Recursive Binding Demo" Height="250" Width="200">

    <Window.Resources>
        <HierarchicalDataTemplate DataType="{x:Type data:Employee}"
                                  ItemsSource="{Binding Employees}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </Window.Resources>

    <TreeView ItemsSource="{Binding}" />
</Window>

Run the program to see the results. You will see that all of the employees are added to the tree using the same template.

WPF Data Bound TreeView Control with Recursive Hierarchy

31 October 2014