Using Hierarchical Data templates

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();
public string Name { get; set; }
public int Age { get; set; }
public ObservableCollection Children { get; set; }

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:T<wbr ></wbr>estWpf”>
<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}”/>
</HierarchicalDataTemplate<wbr ></wbr>>

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 Souce = new ObservableCollection();
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;

Lo and Behold! Now you have a hierarchical tree with n number of levels.


Leave a Reply

Your email address will not be published. Required fields are marked *

3 × = six

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>