WPF - TreeView Databinding in WPF

In this article i will show how to data bind in TreeView Control In WPF.


Step 1
Download Northwind database from the following link.
http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46a0-8da2-eebc53a68034&displaylang=en


Step 2
Attach a Northwind database into MS-SQL server.


Step 3
Create a WPF Application and give the solution name as SolWPFTreeView.


Step 4
Now we have to define Parent and child relationship between Categories and Products Tables from Northwind database by using DataRelation Class,create Northwind Static Class,it is look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace SolWPFTreeView
{
    public static class Northwind
    {
        #region 

        /// <summary>
        /// Data Relation Between Two Tables Such as Categories and Products
        /// </summary>
        /// <returns>DataSet</returns>
        public static DataSet CreateDataRelation()
        {
            try
            {
                SqlConnection SqlCon = new SqlConnection();
                SqlCon.ConnectionString = @"Data Source=SHREE_DESKTOP\SHREE;Initial Catalog=Northwind;Integrated Security=True";
                SqlCon.Open();

                SqlDataAdapter SqlCategoryDa = new SqlDataAdapter("SELECT CategoryID,CategoryName FROM Categories", SqlCon);

                SqlDataAdapter SqlProductDa = new SqlDataAdapter("SELECT CategoryID,ProductID,ProductName,UnitPrice FROM Products", SqlCon);

                DataSet Ds = new DataSet();
                SqlCategoryDa.Fill(Ds, "Categories");
                SqlProductDa.Fill(Ds, "Products");


                DataRelation Dr = new DataRelation("DataRelationShip",
                    Ds.Tables["Categories"].Columns["CategoryID"],
                    Ds.Tables["Products"].Columns["CategoryID"],
                    true
                    );
                Dr.Nested = true;

                Ds.Relations.Add(Dr);

                return Ds;
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);
            }
        }

        #endregion
    }
}

Step 5
Add a Treeview control in window,it is look like this

<Grid>

        <TreeView x:Name="ProductTreeView" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <TreeView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF062F3B" Offset="0" />
                    <GradientStop Color="#FF77A7BE" Offset="1" />
                </LinearGradientBrush>
            </TreeView.Background>
        </TreeView>
    </Grid>

Step 6
Create a Templates for Nodes,For displaying data in nodes first we have to create a DataTemplate for Product later we have to create HierarchicalDataTemplate for Categories  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,it is look like this

<Window.Resources>
  <DataTemplate x:Key="ProductDataTemplate">

            <Border BorderThickness="2" CornerRadius="10" Background="Gray" Width="310">
   
   <Grid Width="300" Height="20">
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.771*"/>
     <ColumnDefinition Width="0.229*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>
    
    <TextBlock Grid.Row="0" Grid.Column="0"  Text="{Binding ProductName}" Margin="10,0" Foreground="WhiteSmoke"></TextBlock>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding UnitPrice}" Margin="10,0" Foreground="WhiteSmoke"></TextBlock>
    
   </Grid>
   </Border>
  </DataTemplate>
  
  
  <HierarchicalDataTemplate x:Key="CategoryDataTemplate" 
       ItemsSource="{Binding DataRelationShip}" 
       ItemTemplate="{StaticResource ProductDataTemplate}">
   <Border BorderThickness="2" CornerRadius="10" Background="Orange" Width="340">
    <Grid Height="20">
     <TextBlock Text="{Binding CategoryName}" Margin="10,0" HorizontalAlignment="Stretch" VerticalAlignment="Center"></TextBlock>
    </Grid>
   </Border>
   
  </HierarchicalDataTemplate>
  
  
 </Window.Resources>

Step 7
Apply ItemTemplate on treeview control,in ItemSource we need specify parent table name  in our case it is Categories Table.it is look like this

<Grid>

        <TreeView x:Name="ProductTreeView"   ItemsSource="{Binding Categories}" ItemTemplate="{DynamicResource CategoryDataTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <TreeView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF062F3B" Offset="0" />
                    <GradientStop Color="#FF77A7BE" Offset="1" />
                </LinearGradientBrush>
            </TreeView.Background>
        </TreeView>
    </Grid>

Step 8
Bind the data in TreeView Control in Code Behind,it is look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SolWPFTreeView
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            try
            {
                // Bind The RelationShip Data
                this.ProductTreeView.DataContext = Northwind.CreateDataRelation();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }
    }
}

Run the Project.


Output

Click on Image for better View

Click on Image for better View


Full XAML Code

<Window x:Class="SolWPFTreeView.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
  <DataTemplate x:Key="ProductDataTemplate">

            <Border BorderThickness="2" CornerRadius="10" Background="Gray" Width="310">
   
   <Grid Width="300" Height="20">
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.771*"/>
     <ColumnDefinition Width="0.229*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>
    
    <TextBlock Grid.Row="0" Grid.Column="0"  Text="{Binding ProductName}" Margin="10,0" Foreground="WhiteSmoke"></TextBlock>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding UnitPrice}" Margin="10,0" Foreground="WhiteSmoke"></TextBlock>
    
   </Grid>
   </Border>
  </DataTemplate>
  
  
  <HierarchicalDataTemplate x:Key="CategoryDataTemplate" 
       ItemsSource="{Binding DataRelationShip}" 
       ItemTemplate="{StaticResource ProductDataTemplate}">
   <Border BorderThickness="2" CornerRadius="10" Background="Orange" Width="340">
    <Grid Height="20">
     <TextBlock Text="{Binding CategoryName}" Margin="10,0" HorizontalAlignment="Stretch" VerticalAlignment="Center"></TextBlock>
    </Grid>
   </Border>
   
  </HierarchicalDataTemplate>
  
  
 </Window.Resources>
 <Grid>

        <TreeView x:Name="ProductTreeView"   ItemsSource="{Binding Categories}" ItemTemplate="{DynamicResource CategoryDataTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <TreeView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF062F3B" Offset="0" />
                    <GradientStop Color="#FF77A7BE" Offset="1" />
                </LinearGradientBrush>
            </TreeView.Background>
        </TreeView>
    </Grid>
</Window>

Download
Download Source Code