Posted by: Zeeshan Amjad | December 13, 2009

Using Hierarchical Data Template continue


We just studied that how to use hierarchical data template in XAML. Now we are going to extend this idea and display further information in the tree node. First we are going to change our data structure. Here are our new classes to store information about state and cities.

  1: public class City
  2: {
  3:     public City(String name, int population)
  4:     {
  5:         Name = name;
  6:         Population = population;
  7:     }
  8: 
  9:     public int Population
 10:     { get; set; }
 11: 
 12:     public String Name
 13:     { get; set; }
 14: }
 15: 
 16: public class State
 17: {
 18:     public State()
 19:     {
 20:         this.Cities = new List<City>();
 21:     }
 22: 
 23:     public String Name
 24:     { get; set; }
 25: 
 26:     public String NickName
 27:     { get; set; }
 28: 
 29:     public int Population
 30:     { get; set; }
 31: 
 32:     public List<City> Cities
 33:     { get; set; }
 34: }
 35: 

It is important to note that the state class has NickName field, but City class does not have it. In other words tree nodes can be different and we can display different set of data on different level of the tree. Here is the complete XAML code of our 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="400" Width="400">
  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:                     <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
 19:                         <StackPanel Margin="5">
 20:                             <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
 21:                             <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=NickName}"/>
 22:                             <TextBlock Margin="1" Foreground="Black"  Text="{Binding Path=Population}"/>
 23:                         </StackPanel>
 24:                     </Border>
 25:                     
 26:                     <HierarchicalDataTemplate.ItemTemplate>
 27:                         <DataTemplate>
 28:                             <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
 29:                                 <StackPanel Margin="5">
 30:                                     <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
 31:                                     <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=Population}"/>
 32:                                 </StackPanel>
 33:                             </Border>
 34:                         </DataTemplate>
 35:                     </HierarchicalDataTemplate.ItemTemplate>
 36:                 </HierarchicalDataTemplate>
 37:             </TreeView.ItemTemplate>
 38:         </TreeView>
 39:     </Grid>
 40: </Window>
 41: 

Here is our 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", 636919));
 30:             citylist1.Add(new City("Frederick", 59220));
 31:             citylist1.Add(new City("Rockville", 60734));
 32:             State state1 = new State();
 33:             state1.Name = "Maryland";
 34:             state1.NickName = "Old Line State";
 35:             state1.Population = 5633597;
 36:             state1.Cities = citylist1;
 37: 
 38:             stateList.Add(state1);
 39: 
 40:             List<City> citylist2 = new List<City>();
 41:             citylist2.Add(new City("Los Angeles", 3833995));
 42:             citylist2.Add(new City("Sacramento", 502743));
 43:             citylist2.Add(new City("San Francisco", 808976));
 44:             citylist2.Add(new City("San Diego", 1279329));
 45:             State state2 = new State();
 46:             state2.Name = "California";
 47:             state2.NickName = "Golden State";
 48:             state2.Population = 36756666;
 49:             state2.Cities = citylist2;
 50: 
 51:             stateList.Add(state2);
 52: 
 53:             List<City> citylist3 = new List<City>();
 54:             citylist3.Add(new City("Houston", 2242193));
 55:             citylist3.Add(new City("Dallas", 1279910));
 56:             citylist3.Add(new City("Austin", 757688));
 57:             citylist3.Add(new City("San Antonio", 1351305));
 58:             State state3 = new State();
 59:             state3.Name = "Taxes";
 60:             state3.NickName = "Lone Star State";
 61:             state3.Population = 2432697;
 62:             state3.Cities = citylist3;
 63: 
 64:             stateList.Add(state3);
 65:         }
 66:     }
 67: 
 68:     public class City
 69:     {
 70:         public City(String name, int population)
 71:         {
 72:             Name = name;
 73:             Population = population;
 74:         }
 75: 
 76:         public int Population
 77:         { get; set; }
 78: 
 79:         public String Name
 80:         { get; set; }
 81:     }
 82: 
 83:     public class State
 84:     {
 85:         public State()
 86:         {
 87:             this.Cities = new List<City>();
 88:         }
 89: 
 90:         public String Name
 91:         { get; set; }
 92: 
 93:         public String NickName
 94:         { get; set; }
 95: 
 96:         public int Population
 97:         { get; set; }
 98: 
 99:         public List<City> Cities
100:         { get; set; }
101:     }
102: }
103: 

This is the output of this program.

HierarchicalDataTemplateOutput_03

Advertisements

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: