Posted by: Zeeshan Amjad | December 18, 2009

Using Hierarchical Data Template with Menu Item


Using of Hierarchical data template with menu item is similar to use with tree view. We uses hierarchical data template with Headered items control. There are three controls inherited by it names Menuitem Toolbar and tree view item. Here is a class diagram to show this.

HeaderedItemsControl 

Our XAML file is similar to usage of Tree view. Here is complete XAML file of this.

  1: <Window x:Class="WpfMenu.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:WpfMenu"
  5:     Title="Hierarchical Data Template" Height="300" Width="300">
  6:     <DockPanel>
  7:         <Menu Name="menu" DockPanel.Dock="Top" ItemsSource="{x:Static local:Window1.stateList}">
  8:             <Menu.ItemTemplate>
  9:                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
 10:                     <TextBlock Margin="1" Text="{Binding Name}"/>
 11:                     
 12:                     <HierarchicalDataTemplate.ItemTemplate>
 13:                         <DataTemplate>
 14:                             <TextBlock Margin="1" Text="{Binding Name}"/>
 15:                         </DataTemplate>                        
 16:                     </HierarchicalDataTemplate.ItemTemplate>
 17:                 </HierarchicalDataTemplate>       
 18:             </Menu.ItemTemplate>
 19:         </Menu>
 20:         <TextBlock></TextBlock>
 21:     </DockPanel>
 22: </Window>
 23: 

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 WpfMenu
 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", true));
 30:             citylist1.Add(new City("Frederick", true));
 31:             citylist1.Add(new City("Rockville", true));
 32:             State state1 = new State();
 33:             state1.Name = "Maryland";
 34:             state1.IsVisited = true;
 35:             state1.Cities = citylist1;
 36: 
 37:             stateList.Add(state1);
 38: 
 39:             List<City> citylist2 = new List<City>();
 40:             citylist2.Add(new City("Los Angeles", true));
 41:             citylist2.Add(new City("Sacramento", false));
 42:             citylist2.Add(new City("San Francisco", true));
 43:             citylist2.Add(new City("San Diego", false));
 44:             State state2 = new State();
 45:             state2.Name = "California";
 46:             state2.IsVisited = true;
 47:             state2.Cities = citylist2;
 48: 
 49:             stateList.Add(state2);
 50: 
 51:             List<City> citylist3 = new List<City>();
 52:             citylist3.Add(new City("Houston", true));
 53:             citylist3.Add(new City("Dallas", false));
 54:             citylist3.Add(new City("Austin", false));
 55:             citylist3.Add(new City("San Antonio", false));
 56:             State state3 = new State();
 57:             state3.Name = "Taxes";
 58:             state3.IsVisited = true;
 59:             state3.Cities = citylist3;
 60: 
 61:             stateList.Add(state3);
 62:         }
 63:     }
 64: 
 65:     public class City
 66:     {
 67:         public City(String name, bool isVisited)
 68:         {
 69:             Name = name;
 70:             IsVisited = isVisited;
 71:         }
 72: 
 73:         public String Name
 74:         { get; set; }
 75: 
 76:         public bool IsVisited
 77:         { get; set; }
 78:     }
 79: 
 80:     public class State
 81:     {
 82:         public State()
 83:         {
 84:             this.Cities = new List<City>();
 85:         }
 86: 
 87:         public String Name
 88:         { get; set; }
 89: 
 90:         public bool IsVisited
 91:         { get; set; }
 92: 
 93:         public List<City> Cities
 94:         { get; set; }
 95:     }
 96: }
 97: 

Here is the output of this program.

HierarchicalDataTemplateOutput_06

Advertisements

Responses

  1. […] already saw one example of defining hierarchical data template here.  Now we are going to extend this example and define control template too. The simplest way to […]


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: