Hi all.

I am going to show you a simple example of how to use Hierarchical DataTemplates in a tree view for an easy display of hierarchical Data.

The Example shows the links in a WebPage recursively.

First we will create the data model that we want to show, note that we have two separate models, one for the root element and one for the actual data.

public class WebPage


public string Href { get; set; }

public string PageTitle { get; set; }

public List<WebPage> LinksInPage { get; set; }


public class  Root
    public string Title { get; set; }
    public string Url { get; set; }

    public List<WebPage> WebPages { get; set; }}

We have to create a root object and the accrual data object as separate classes.
the data template for each one will look like this:
<HierarchicalDataTemplate DataType="{x:Type data:Root}"
ItemsSource="{Binding Path=WebPages}"> 
   <Border BorderBrush="Black" BorderThickness="2" CornerRadius="10">
             <TextBlock Margin="10,0,0,0" Text="{Binding Title}"/>
DataType="{x:Type data:WebPage}" ItemsSource="{Binding Path=LinksInPage}">

  <Border BorderBrush="Black" BorderThickness="2" CornerRadius="10">


 <TextBlock Margin="10,0,0,0"  	< Text="{Binding PageTitle}"/>
TextBlock Margin="10,0,0,0"   Text="{Binding Href}"/>

   </StackPanel> </Border></HierarchicalDataTemplate>

In the constructor of the window we will create the hierarchy of the data in codeand provide the tree view with the DataContext

public Window1()
     WebPage r = new WebPage();

r.LinksInPage = new List<WebPage>();
r.PageTitle = "HomePage";
r.Href = @"http://www.HomePage.com";
WebPage link1 = new WebPage();
ink1.Href = @"http://www.HomePage.com/link1";    
link1.PageTitle = "link1";

WebPage Link2 = new WebPage();

Link2.Href = @"http://www.HomePage.com/Link2";    
Link2.PageTitle = "Link2";

WebPage Link3 = new WebPage();

Link3.Href = @"http://www.HomePage.com/Link2/Link3";    
Link3.PageTitle = "Link3";

Link2.LinksInPage = new List<WebPage>();    

WebPage Link4 = new WebPage();
Link4.Href = @"http://www.HomePage.com/Link2/Link4";

Link4.PageTitle = "Link4";    

WebPage Link5 = new WebPage();
Link5.Href = @"http://www.HomePage.com/link1/Link5";

Link5.PageTitle = "Link5";    
link1.LinksInPage = new List<WebPage>();

WebPage Link6 = new WebPage();

Link6.Href = @"http://www.HomePage.com/link2/Link3/Link6";    
Link6.PageTitle = "Link6";

Link3.LinksInPage = new List<WebPage>();

treeView1.DataContext = r;}
To finish we will define the TreeView in Xaml:
<Grid Background="LightSkyBlue">

  <TreeView Margin="0,0,15,0" Name="treeView1" Background="LightSkyBlue">

   <TreeViewItem ItemsSource="{Binding}" Header="{Binding PageTitle}"/> 


Notice that we provide the TreeView with one TreeViewItem, that's the root.
The result is this display:

Hirarchical Data Template WPF

Subscribe to our feed and get the complete code sample for this article


Tags :

3 Responses to “How To Use Hierarchical DataTemplate in WPF”

  1. Tony

    Said on December 9, 2008 :

    How to put the treeview Lines?

  2. Amit

    Said on December 9, 2008 :

    Actually I have no idea :)

    I will have to get back to you on that.


1 Trackback(s)

  1. Mar 1, 2008: My Blog Stats - February 2008 | Dev102.com

Post a Comment