WPF TreeView Binding With Relational Dataset

This article is written by Pon Saravanan  on 03-Nov-09 Last modified on :17-Mar-10

WPF Treeview DataBinding with Dataset

I am always fan of TreeView from classic VB days. It is a great control to display hierarchically organized data. But earlier days in VB 6 the TreeView has to be populated by adding nodes through looping. Then in the ASP.Net I had some how improved support by using XML to transform the Dataset to TreeView binding.

HierarchicalDataTemplate in mapping data

TreeView to understand which Node level has to be bound with which level of table in the Dataset we need HierarchicalDataTemplate. It will work if the dataset given is the Relational Database with proper relationships added. And give a name that describes the relationships well. Add a TextBlock for displaying the header table information. In this article we refer categories as the Header. Remember to provide a unique Key for the object.

ItemsSource in HierarchicalDataTemplate

The given relationship name can be specified here as {Binding RelationshipName}

ItemTemplate in HierarchicalDataTemplate

This is the child template reference. So the child template name which has to be created and referred here as {StaticResource CreatedChildTemplateName}.

Creating Templates for Nodes

For displaying data in nodes we have to create a DataTemplate so later on if a label has to be added, and then we can add it to this template and bind accordingly. Remember to provide a unique Key for the template. Then we can use this key for referring it in ItemTemplate of the HierarchicalDataTemplate.

Configure the TreeView to use the Mapped ItemsSource

After placed the TreeView there are few things we need to configure it to bind the hierarchical template.

ItemsSource in TreeView

Here is the Parent Table we need to specify in our case it is Categories Table. This is the table name we have to give while preparing the relational dataset (either in the query or later adding in the dataset which ever is relevant in your case but it is important)

ItemTemplate in TreeView

This is the Created HierarchicalDataTemplate x:key we need to pass along with such as {StaticResource CategoryTemplate}. Please note that the dataset is already passed as DataContext in code behind.

Screen Capture


Source Code


<Window x:Class="Window1"
    Title="Window1" Height="400" Width="550">
        <DataTemplate x:Key="ProductTemplate" >
            <TextBlock Text="{Binding ProductName}"></TextBlock>
        <HierarchicalDataTemplate x:Key="CategoryTemplate"
                      ItemsSource="{Binding ChildrenRelationship}"
                      ItemTemplate="{StaticResource ProductTemplate}">
            <TextBlock Text="{Binding CategoryName}"></TextBlock>
        <Button HorizontalAlignment="Left"  Name="Button1"
                Width="75" Height="23" VerticalAlignment="Bottom">
        <TreeView Margin="10,10,21,30" Name="TreeView1"
                  ItemsSource="{Binding Categories}"
                  ItemTemplate="{StaticResource CategoryTemplate}" />


Imports System.Data.SqlClient
Imports System.Data
Imports System.Xml
Imports System.IO
Class Window1
    Private NwindConnection As String = "Data Source=.\SQLEXPRESS;" & _
            "Initial Catalog=Northwind;Persist Security Info=True;" & _
            "Integrated Security = True"
    Function GetRelationalData() As DataSet
        Dim NwindCon = New SqlConnection(NwindConnection)
        Dim CategoryAdapter As SqlDataAdapter = New  _
            SqlDataAdapter("SELECT CategoryID,CategoryName FROM Categories", NwindCon)
        Dim ProductsAdapter As SqlDataAdapter = New  _
            SqlDataAdapter("SELECT CategoryID,ProductID,ProductName FROM Products", NwindCon)
        Dim ProductData As DataSet = New DataSet()
        CategoryAdapter.Fill(ProductData, "Categories") 'fill Categories
        ProductsAdapter.Fill(ProductData, "Products") 'fill products
        Dim CategoryRelation As DataRelation
        CategoryRelation = New DataRelation("ChildrenRelationship", _
        ProductData.Tables("Categories").Columns("CategoryID"), _
        ProductData.Tables("Products").Columns("CategoryID"), True)
        CategoryRelation.Nested = True
        Return ProductData
    End Function
    Private Sub Button1_Click(ByVal sender As System.Object, _
                              ByVal e As RoutedEventArgs) Handles Button1.Click
    End Sub
    Private Sub BindData()
        TreeView1.DataContext = GetRelationalData()
    End Sub
End Class

    Very 12/28/2009 10:12:40 AM

    thanks a lot, this article was v helpful 4/17/2010 3:12:52 AM

    thanks its very helpfull..... 5/24/2010 12:44:23 AM

    Can u pls send me code for treeviewbinding with relational dataset for multiple tables.. 5/24/2010 12:45:54 AM

    Excellent. Thank you. 10/14/2010 2:18:33 PM

    Super to see TreeView in WPF. Is code behind availabel in C#?
    3/4/2011 8:17:39 AM

    You can use code converter to get c sharp codes
    3/4/2011 6:09:17 PM

    Excellent walk through on Tree view in WPF !!
    5/19/2011 4:59:52 AM

    thanx alot. xcelent work. 8/18/2011 5:15:55 AM

Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    

Spam Bot Trap


Select Theme