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.



About these ads