.NET 4.0+

WPF Data Display Controls - TreeView - Data Binding

by Richard Carr, published at http://www.blackwasp.co.uk/WPFTreeViewDataBinding.aspx

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.

Previous: Page 2

Adding Further Levels to the Hierarchy

You can add extra levels to a data-bound TreeView by using additional hierarchical data templates. To complete the first example, we'll add drivers to the teams. Start by creating the Driver class:

public class Driver
{
    public Driver(string driverName)
    {
        DriverName = driverName;
    }

    public string DriverName { get; set; }
}

Next, add a list of drivers to the Team class:

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

    public string TeamName { get; set; }
    public IList<Driver> Drivers { get; set; }
}

We now need to create some drivers and add them to their respective teams. To do so, replace the content of the SetUpDataContext method with the following code:

var ferral = new Team("Ferral Motorsport");
ferral.Drivers = new List<Driver>
{
    new Driver("Fergal Onso"),
    new Driver("Kim Racingman")
};

var roseCow = new Team("Rose Cow Racing");
roseCow.Drivers = new List<Driver>
{
    new Driver("Stephen Fettle"),
    new Driver("Danny Richard")
};

var mercredi = new Team("Mercredi Racing");
mercredi.Drivers = new List<Driver>
{
    new Driver("Louis Hammertime"),
    new Driver("Nick Iceberg")
};

var mcmillan = new Team("McMillan Mercredi");
mcmillan.Drivers = new List<Driver>
{
    new Driver("Jimmy Buttons"),
    new Driver("Kevin Magnetman")
};

var forcedIndy = new Team("Forced Indy Motors");
forcedIndy.Drivers = new List<Driver>
{
    new Driver("Nick Hellandback"),
    new Driver("Sean Paris")
};

var catering = new Team("Catering Cars");
catering.Drivers = new List<Driver>
{
    new Driver("Mark Erudite"),
    new Driver("Kim Kanberashy")
};

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 };

To display the drivers requires further changes to the XAML. We need to change the standard data template that we've used to display teams into a hierarchical version. This will add the ItemsSource, which identifies the Drivers collection, and will reference a new template to show drivers.

This is all achieved by changing the resources section, as shown below. To make it easy to see which template is controlling each item's output, the driver template uses green text.

Note: The order in which the templates are defined is important. Each template may only refer to one that has already been defined in the XAML. If the order were to be changed so that a template referred to a key defined later in the code, a XamlParseException would be thrown at run-time.

<Window.Resources>
    <DataTemplate x:Key="DriverTemplate">
        <TextBlock Text="{Binding DriverName}" Foreground="Green" />
    </DataTemplate>

    <HierarchicalDataTemplate x:Key="TeamTemplate"
                              ItemsSource="{Binding Drivers}"
                              ItemTemplate="{StaticResource DriverTemplate}">
        <TextBlock Text="{Binding TeamName}" Foreground="Red" />
    </HierarchicalDataTemplate>

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

Run the program again to see the three-level tree view.

WPF Data Bound TreeView Control with Three Level Hierarchy

Next: Page 4

31 October 2014