Posted by: Zeeshan Amjad | December 12, 2009

Using Hierarchical Data Template with XAML


We studied how to use hierarchical data template with Code. Now we are going to do the same thing with XAML. The main advantage of XAML is that we can define complex data template to present data much easier as compare to code. Our C# code is almost the same as we define when using hierarchical data template with code. The major difference is to define state list variable public static.

  1: static public List<State> stateList = new List<State>();

Now we are using this in our XAML code.

  1: <TreeView Name="tree" Margin="5" ItemsSource="{x:Static local:Window1.stateList}">

We define two classes, one to store information about state and other to store information about cities. State class contains list of cities to store more than one cities. Here is a definition of these classes.

  1: public class City
  2: {
  3:     public City(String name)
  4:     {
  5:         Name = name;
  6:     }
  7: 
  8:     public String Name
  9:     { set; get; }
 10: }
 11: 
 12: public class State
 13: {
 14:     public State()
 15:     {
 16:         this.Cities = new List<City>();
 17:     }
 18: 
 19:     public String Name
 20:     { get; set; }
 21: 
 22:     public List<City> Cities
 23:     { get; set; }
 24: }
 25: 

This data structure has depth of only two level, but we can go as much deep as we want.

In XAML we are uisng ItemsSource property of HierarchicalDataTemplate class to define the nested relationship.

  1: <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">

Here is complete XAML code of this project.

  1: <Window x:Class="WpfTreeView.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfTreeView"
  5:     Title="Hierarchical Data Template" Height="300" Width="300">
  6:     <Grid>
  7:         <TreeView Name="tree" Margin="5" ItemsSource="{x:Static local:Window1.stateList}">
  8:             <TreeView.Background>
  9:                 <LinearGradientBrush>
 10:                     <GradientStop Offset="0" Color="AliceBlue"/>
 11:                     <GradientStop Offset="0.5" Color="Navy"/>
 12:                     <GradientStop Offset="1" Color="AliceBlue"/>
 13:                 </LinearGradientBrush>
 14:             </TreeView.Background>
 15:             
 16:             <TreeView.ItemTemplate>
 17:                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
 18:                         <TextBlock Margin="1"  Foreground="Yellow" Text="{Binding Name}"/>                                        
 19:                     <HierarchicalDataTemplate.ItemTemplate>
 20:                         <DataTemplate>                            
 21:                             <TextBlock Foreground="Yellow" Text="{Binding Name}"/>
 22:                         </DataTemplate>
 23:                     </HierarchicalDataTemplate.ItemTemplate>
 24:                 </HierarchicalDataTemplate>
 25:             </TreeView.ItemTemplate>
 26:         </TreeView>
 27:     </Grid>
 28: </Window>
 29: 

Here is complete C# code of this project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfTreeView
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         static public List<State> stateList = new List<State>();
 23: 
 24:         public Window1()
 25:         {
 26:             InitializeComponent();            
 27: 
 28:             List<City> citylist1 = new List<City>();
 29:             citylist1.Add(new City("Baltimore"));
 30:             citylist1.Add(new City("Frederick"));
 31:             citylist1.Add(new City("Rockville"));
 32:             State state1 = new State();
 33:             state1.Name = "Maryland";
 34:             state1.Cities = citylist1;
 35: 
 36:             stateList.Add(state1);
 37: 
 38:             List<City> citylist2 = new List<City>();
 39:             citylist2.Add(new City("Los Angeles"));
 40:             citylist2.Add(new City("Sacramento"));
 41:             citylist2.Add(new City("San Franscico"));
 42:             citylist2.Add(new City("San Diegao"));
 43:             State state2 = new State();
 44:             state2.Name = "California";
 45:             state2.Cities = citylist2;
 46: 
 47:             stateList.Add(state2);
 48: 
 49:             List<City> citylist3 = new List<City>();
 50:             citylist3.Add(new City("Houston"));
 51:             citylist3.Add(new City("Dallas"));
 52:             citylist3.Add(new City("Austin"));
 53:             citylist3.Add(new City("San Antino"));
 54:             State state3 = new State();
 55:             state3.Name = "Taxes";
 56:             state3.Cities = citylist3;
 57: 
 58:             stateList.Add(state3);
 59:         }
 60:     }
 61: 
 62:     public class City
 63:     {
 64:         public City(String name)
 65:         {
 66:             Name = name;
 67:         }
 68: 
 69:         public String Name
 70:         { set; get; }
 71:     }
 72: 
 73:     public class State
 74:     {
 75:         public State()
 76:         {
 77:             this.Cities = new List<City>();
 78:         }
 79: 
 80:         public String Name
 81:         { get; set; }
 82: 
 83:         public List<City> Cities
 84:         { get; set; }
 85:     }
 86: }
 87: 

This would be the output of the program.

HierarchicalDataTemplateOutput_02

Advertisements

Responses

  1. […] TreeView, GridSplitter and ListView together We have already studied how to use treeview, gridsplitter and list view controls separately. We have information about department and subjects […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: