Using Hierarchical Data template

Published on
17,705 Points
Last Modified:
As more and more people are shifting to the latest .Net frameworks, the windows presentation framework is gaining importance by the day. Many people are now turning to WPF controls to provide a rich user experience. I have been using WPF controls for several of my UI requirements and find that they are quite easy to use once you get the hang of it. However, the controls can seem a little confusing and hard to use for a beginner, especially if you have a background only in winforms. It is much easier if you try to work with individual controls and understand their behavior in the beginning stages.

When I started off with WPF, I needed to show a recursive object in a tree view and frankly speaking, the WPF Treeview control gave me nightmares while I tried to do so .However, in the end it turned out to be pretty simple. All you need to do is create a data object that you want to show on the tree and bind it to the itemsource of the Treeview. Here’s how.

Data Object

Let us create a class called Person with Name, Age and Children as properties. The aim here is to show the name and age of a person in a tree along with details of his children as sub-nodes and this continues recursively, similar to a family tree.
public class Person
        public Person()
            Children = new ObservableCollection<Person>();
        public string Name { get; set; }
        public int Age { get; set; }
        public ObservableCollection<Person> Children { get; set; }

Open in new window

As you can see the number of levels can be determined only at runtime. Now what we will do is let WPF do all the hard work for us and find out how many levels there are while we sit back and enjoy the show.

Treeview template

To find out the number of levels, we use the tree view with the template as shown below –
<TreeView Name="trVwPerson" xmlns:obj="clr-namespace:TestWpf">
     <HierarchicalDataTemplate DataType = "{x:Type obj:Person}" ItemsSource="{Binding Path=Children}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="{Binding Path=Name}"/>
             <TextBlock Width="10"/>
             <TextBlock Text="{Binding Path=Age}"/>

Open in new window

Here we are using a Hierarchical Data template and setting its data type.

We have already declared the class earlier, so when we set the item source of the tree , it will automatically pick this template for an object of type Person and apply it as the item template.

Item Source Binding

After creating the class and using the template, we need to bind the item source of the Treeview to a list. To do this, I'm just going to create a dummy list of the said class and set it to the item source of the tree view.
ObservableCollection<Person> Souce = new ObservableCollection<Person>();
            Person P1 =
            new Person()
                Name = "GrandFather",
                Age = 90
            Person P11 = new Person()
                Name = "Father1",
                Age = 60
            Person P111 = new Person()
                Name = "Child1",
                Age = 30
            Person P12 = new Person()
                Name = "Father2",
                Age = 60


            Person P2 =
            new Person()
                Name = "GrandFather2",
                Age = 91
            Person P3 =
            new Person()
                Name = "GrandFather3",
                Age = 92
            trVwPerson.ItemsSource = Souce;

Open in new window

Lo and Behold! Now you have a hierarchical tree with n number of levels that looks like this:
Tree view with multiple levels.
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free