.NET 4.0+

WPF Data Display Controls - TreeView - Basics

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

The one hundred and seventh part of the Windows Presentation Foundation Fundamentals tutorial begins to examine the TreeView control. This control is used to display hierarchical data.

TreeView

The tree view control is ideal for displaying hierarchical data, with either a single root or many top-level items. The control shows a list of nodes that can be expanded and collapsed in order to show or hide child values. Due to the expansion, a large number of items can be navigated quickly, with minimal use of screen space.

Tree views are created using the TreeView class. This inherits much of its functionality from ItemsControl. This base class provides for a list of items. In the case of the TreeView, each object in the Items collection is a TreeViewItem instance that represents a root-level element in the list. TreeViewItem inherits from HeaderedItemsControl. The displayed information in the tree view control is defined in the TreeViewItem's Header property. The Items property holds the child items in the hierarchy, also as TreeViewItems. This allows many levels of tree view node to be nested.

There are three common ways in which you can populate a tree view control. You can define the items in XAML, add them using the Items collection from code, or use data binding. In this article we will concentrate on the first two options. We'll use data binding in the next instalment of the WPF tutorial.

To demonstrate, we need a sample solution. Create a new WPF Application in Visual Studio named, "TreeViewDemo". When loaded, replace the XAML of the main window with the code below:

<Window x:Class="TreeViewDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView Demo"
        Height="300" Width="250">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <TreeView Name="Tree" Grid.ColumnSpan="2" Margin="0 0 0 2"/>
        <TextBox Name="NewItemInput" Grid.Row="1"/>
        <Button Grid.Row="1" Grid.Column="1">Add</Button>
    </Grid>
</Window>

The above XAML creates a simple window containing a TreeView, a TextBox and a Button. The TreeView's Items collection is empty, so the control shows an empty list. We can add items by including one or more TreeViewItems within the TreeView's XAML element.

Add four items that represent four departments in a business by modifying the XAML for the control, as follows:

<TreeView Name="Tree" Grid.ColumnSpan="2" Margin="0 0 0 2">
    <TreeViewItem Header="Admin"/>
    <TreeViewItem Header="IT"/>
    <TreeViewItem Header="Sales"/>
    <TreeViewItem Header="Warehouse"/>
</TreeView>

Run the program to see the results. The window should appear similar to that shown below. With only top-level items, the control appears similar to a ListBox. The only noticeable difference is the white space to the left of the items. This area is reserved for glyphs that allow items to be expanded and collapsed. As no items have children, none can be expanded, so no glyphs are visible.

Let's add some child items to the tree. To add children, you can simply include further TreeViewItems within the existing TreeViewItem elements. For grandchildren you nest items more deeply.

Update the TreeView element again, as shown below. This time the Admin, Sales and Warehouse items have children, representing employees of the business. The IT department has child and grandchild items.

<TreeView Name="Tree" Grid.ColumnSpan="2" Margin="0 0 0 2">
    <TreeViewItem Header="Admin">
        <TreeViewItem Header="Rita"/>
        <TreeViewItem Header="Sue"/>
        <TreeViewItem Header="Bob"/>
    </TreeViewItem>
    
    <TreeViewItem Header="IT">
        <TreeViewItem Header="Infrastructure">
            <TreeViewItem Header="Tim"/>
            <TreeViewItem Header="Ben"/>
        </TreeViewItem>
        <TreeViewItem Header="Software Development">
            <TreeViewItem Header="Mel"/>
            <TreeViewItem Header="Jim"/>
        </TreeViewItem>
    </TreeViewItem>
    
    <TreeViewItem Header="Sales">
        <TreeViewItem Header="Dan"/>
        <TreeViewItem Header="Andy"/>
    </TreeViewItem>

    <TreeViewItem Header="Warehouse">
        <TreeViewItem Header="Cat"/>
        <TreeViewItem Header="Phil"/>
    </TreeViewItem>
</TreeView>

Run the program to see the results. The items with children now have arrow-like glyphs alongside them. Click the arrows to expand and collapse the items. The image below shows the tree with all nodes expanded.