Posted by: Zeeshan Amjad | December 14, 2009

Horizontal TreeView


Making Horizontal tree view very much similar to making horizontal list box. i.e. we are going to use the ItemPanelTemplate class for this. Here is a partial class hierarchy of this class.

Template_02

Here is a piece of code to make horizontal treeview.

  1: <TreeView.ItemsPanel>
  2: 	<ItemsPanelTemplate>
  3: 		<StackPanel Margin="5" Orientation="Horizontal">                        
  4: 		</StackPanel>
  5: 	</ItemsPanelTemplate>
  6: </TreeView.ItemsPanel>
  7: 

Rest of the code is very similar to the previous program. Here is complete XAML code of this program.

  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.ItemsPanel>
 17:                 <ItemsPanelTemplate>
 18:                     <StackPanel Margin="5" Orientation="Horizontal">                        
 19:                     </StackPanel>
 20:                 </ItemsPanelTemplate>
 21:             </TreeView.ItemsPanel>
 22:             
 23:             <TreeView.ItemTemplate>
 24:                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
 25:                     <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
 26:                         <StackPanel Margin="5">
 27:                             <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
 28:                             <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=NickName}"/>
 29:                             <TextBlock Margin="1" Foreground="Black"  Text="{Binding Path=Population}"/>
 30:                         </StackPanel>
 31:                     </Border>
 32:                     
 33:                     <HierarchicalDataTemplate.ItemTemplate>
 34:                         <DataTemplate>
 35:                             <Border Margin="1" BorderBrush="Brown" Background="AliceBlue" BorderThickness="1" CornerRadius="10">
 36:                                 <StackPanel Margin="5">
 37:                                     <TextBlock Margin="1" Foreground="Blue" Text="{Binding Name}"/>
 38:                                     <TextBlock Margin="1" Foreground="Black" Text="{Binding Path=Population}"/>
 39:                                 </StackPanel>
 40:                             </Border>
 41:                         </DataTemplate>
 42:                     </HierarchicalDataTemplate.ItemTemplate>
 43:                 </HierarchicalDataTemplate>
 44:             </TreeView.ItemTemplate>
 45:         </TreeView>
 46:     </Grid>
 47: </Window>
 48: 

Here is complete C# code of this program.

  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 would be the output of this program.

HierarchicalDataTemplateOutput_04

Advertisements

Responses

  1. […] saw few interesting examples of tree control here and here. Now we are going to use uniform grid panel in tree control. Here is a XAML code to use […]


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: