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.

Parent / Child Data Binding

Although in a real-world scenario you would not do this, we'll build up the data binding for the TreeView in stages. This will make it easier to understand hierarchical data binding if you have never used the technique before. We'll start by binding the tree view in a similar manner to a ListView.

To determine the items to show in the tree, you set the ItemsSource property to a binding expression that correctly locates the collection to be displayed. The items in the source collection will form the top level of the tree. In our case, we have already set the data context to the desired collection. The binding therefore does not require a path. We can set it to bind directly to the data context with the expression, "{Binding}".

To set how the individual items are presented, we'll set the ItemTemplate to a data template. The template will hold a TextBlock to show the information from the ClassName property.

Update the XAML for the TreeView to set the binding and the data template, as follows:

<TreeView ItemsSource="{Binding}">
    <TreeView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ClassName}" />
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

So far, we've described how the tree view can find the root items. We have not provided the information required to find or format the child items. As you might expect, running the program yields only the top level results:

WPF Data Bound TreeView Control without Hierarchy

HierarchicalDataTemplate

To describe the child items in the hierarchy of objects, we need to swap the DataTemplate for a HierarchicalDataTemplate. The latter is similar to the former but adds two key properties. They are:

ItemsSource. As with ItemsControls, this property is bound to a collection of items. In the case of the hierarchical data template, this is the collection of children for the parent item.

ItemTemplate. Defines the template used to display the child items.

HierarchicalDataTemplates are generally defined as resources, as their in-line XAML becomes very complicated. Before we convert the existing data template to a hierarchical one, let's move it into a resource and assign it a unique key. Replace the XAML for the entire window with the following code:

<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">

    <Window.Resources>
        <DataTemplate x:Key="TeamClassTemplate">
            <TextBlock Text="{Binding ClassName}" />
        </DataTemplate>
    </Window.Resources>

    <TreeView ItemsSource="{Binding}" ItemTemplate="{StaticResource TeamClassTemplate}"/>
</Window>

You can see that the template is now uniquely identified as a resource with the key, "TeamClassTemplate". The template resource is referenced by the TreeView's ItemTemplate property. This has made the TreeView element much easier to read. Functionally, nothing has changed. If you run the program you will see that the result is the same as before.

We can now convert the data template and add the two new properties. This template will be used with TeamClass objects, so we can assume that the data context at the time of processing will be an object of that type. This means that we can bind the ItemsSource to the TeamClass's Teams property.

We'll set the ItemTemplate property for the TeamClasses to point to another data template resource, this time named, "TeamTemplate". The template will show a TextBlock containing the team name. To make it clear which template is being used for each item, let's set the foreground colour of these TextBlocks to red.

Modify the Window.Resources section, as follows, to define the two templates:

<Window.Resources>
    <DataTemplate x:Key="TeamTemplate">
        <TextBlock Text="{Binding TeamName}" Foreground="Red" />
    </DataTemplate>
        
    <HierarchicalDataTemplate x:Key="TeamClassTemplate"
                              ItemsSource="{Binding Teams}"
                              ItemTemplate="{StaticResource TeamTemplate}">
        <TextBlock Text="{Binding ClassName}" />
    </HierarchicalDataTemplate>
</Window.Resources>

Run the program to see the end result. You should see the populated TreeView with the classes of team shown in black and the teams in red.

WPF Data Bound TreeView Control with Hierarchy

31 October 2014