C# Code Snippets  C# Code Snippets
 C# Code Snippets  C# Code Snippets
 C# Code Snippets  C# Code Snippets
 C# Code Snippets  C# Code Snippets

Thursday, December 27, 2007

How To Use Hierarchical DataTemplate in WPF



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 seperate models, one for the root element and one for the acctual 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">
<
StackPanel>
<
TextBlock Margin="10,0,0,0"
Text="{Binding Title}"></TextBlock>
</
StackPanel>
</
Border>
</
HierarchicalDataTemplate>

<
HierarchicalDataTemplate DataType="{x:Type data:WebPage}"
ItemsSource="{Binding Path=LinksInPage}">
<
Border BorderBrush="Black"
BorderThickness="2"
CornerRadius="10">
<
StackPanel>
<
TextBlock Margin="10,0,0,0"
Text="{Binding PageTitle}"></TextBlock>
<
TextBlock Margin="10,0,0,0"
Text="{Binding Href}"></TextBlock>
</
StackPanel>
</
Border>
</
HierarchicalDataTemplate>
In the constructor of the window we will create the hierarchy of the data in code and provide the tree view with the  DataContext
public Window1()
{
InitializeComponent();
Root r = new Root();
r.WebPages = new List<WebPage>();
r.Title = "HomePage";
r.Url = @"http://www.HomePage.com";

WebPage link1 = new WebPage();
link1.Href = @"http://www.HomePage.com/link1";
link1.PageTitle = "link1";
r.WebPages.Add(link1);

WebPage Link2 = new WebPage();
Link2.Href = @"http://www.HomePage.com/Link2";
Link2.PageTitle = "Link2";
r.WebPages.Add(Link2);

WebPage Link3 = new WebPage();
Link3.Href = @"http://www.HomePage.com/Link2/Link3";
Link3.PageTitle = "Link3";
Link2.LinksInPage = new List<WebPage>();
Link2.LinksInPage.Add(Link3);

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

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

WebPage Link6 = new WebPage();
Link6.Href = @"http://www.HomePage.com/link2/Link3/Link6";
Link6.PageTitle = "Link6";
Link3.LinksInPage = new List<WebPage>();
Link3.LinksInPage.Add(Link6);

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 Path=WebPages}"
Header="{Binding Title}"></TreeViewItem>
</
TreeView>
</
Grid>
Notice that we provide the TreeView with one TreeViewItem, thats the root The result is this display:
Hierarchical Data Template 
You can download the Source code here:
http://www.filefactory.com/file/2e5dfd/
Enjoy
Amit

AddThis Social Bookmark Button

8 comments:

Iranga said...

Good

ebhakt said...

The file is no longer available
can u suggest a new download

Nic Roche said...

The HierarchicalDataTemplate for DataType="{x:Type data:Root}" is not used in this example.

Asif Chouhan said...

Sorry, this file is no longer available. It may have been deleted by the uploader, or has expired.

This error is usually caused by requesting a file that does not exist.


Please upload a file again.

Anonymous said...

A very goot Tutorial, because the tutorial is short enough to overview the meaning!!!!

thank you very much!!!

Anonymous said...

Hi can you pass again link to donwload please?

hierarchical binding said...

I like your blog on hierarchical data and I think this will gives us a best idea about how to relationship from a root node to 0 level node.

Anonymous said...

binding to TreeView control to hierarchical data