Posted by: Zeeshan Amjad | February 22, 2010

Context Menu in List box item


We have already seen an example of Context Menu here and here. This time we are going to implement the context menu with list box item. In addition we also perform the data binding of the menu header with the list box data. Here is our class to store the information about state.

  1: public class StateInfo
  2: {
  3:     public StateInfo(String name, String capital, String population)
  4:     {
  5:         Name = name;
  6:         Capital = capital;
  7:         Population = population;
  8:     }
  9: 
 10:     public String Name
 11:     { get; set; }
 12: 
 13:     public String Capital
 14:     { get; set; }
 15: 
 16:     public String Population
 17:     { get; set; }
 18: }
 19: 

First take a look at the XAML code of the program. Here is a piece of XAML code to define the context menu in list box item data template.

  1: <ListBox.ItemTemplate>
  2: 	<DataTemplate>
  3: 		<TextBlock Text="{Binding Name}">
  4: 		<TextBlock.ContextMenu>
  5: 			<ContextMenu>
  6: 				<MenuItem Header="{Binding Name}" Click="MenuItemName_Click"/>
  7: 				<MenuItem Header="{Binding Capital}" Click="MenuItemCapital_Click"/>
  8: 				<MenuItem Header="{Binding Population}" Click="MenuItemPopulation_Click"/>                            
  9: 			</ContextMenu>
 10: 		</TextBlock.ContextMenu>
 11: 		</TextBlock>
 12: 	</DataTemplate>
 13: </ListBox.ItemTemplate>
 14: 

We also define handler of each menu item. Here is complete XAML file of the program

  1: <Window x:Class="WpfContextMenu.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="ListBox ContextMenu" Height="300" Width="300">
  5:     <Grid Background="AliceBlue">
  6:         <ListBox Margin="5" ItemsSource="{Binding}">
  7:             <ListBox.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <TextBlock Text="{Binding Name}">
 10:                     <TextBlock.ContextMenu>
 11:                         <ContextMenu>
 12:                             <MenuItem Header="{Binding Name}" Click="MenuItemName_Click"/>
 13:                             <MenuItem Header="{Binding Capital}" Click="MenuItemCapital_Click"/>
 14:                             <MenuItem Header="{Binding Population}" Click="MenuItemPopulation_Click"/>                            
 15:                         </ContextMenu>
 16:                     </TextBlock.ContextMenu>
 17:                     </TextBlock>
 18:                 </DataTemplate>
 19:             </ListBox.ItemTemplate>
 20:         </ListBox>
 21:     </Grid>
 22: </Window>
 23: 

Here is complete program of C#.

  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 WpfContextMenu
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         private List<StateInfo> states = new List<StateInfo>();
 23: 
 24:         public Window1()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             states.Add(new StateInfo("Maryland", "Annapolis", "5,699,478"));
 29:             states.Add(new StateInfo("California", "Sacramento", "36,961,664"));
 30:             states.Add(new StateInfo("Florida", "Tallahassee", "18,328,340"));
 31:             states.Add(new StateInfo("Washington", "Olympia", "6,664,195"));
 32:             states.Add(new StateInfo("Illinois", "Springfield", "12,910,409"));
 33:             states.Add(new StateInfo("Massachusetts", "Boston", "6,593,587"));
 34: 
 35:             DataContext = states;
 36:         }
 37: 
 38:         private void MenuItemName_Click(object sender, RoutedEventArgs e)
 39:         {
 40:             MenuItem menuitem = e.Source as MenuItem;
 41: 
 42:             if (menuitem != null)
 43:             {
 44:                 MessageBox.Show(menuitem.Header.ToString(), "Name");
 45:             }
 46:         }
 47: 
 48:         private void MenuItemCapital_Click(object sender, RoutedEventArgs e)
 49:         {
 50:             MenuItem menuitem = e.Source as MenuItem;
 51: 
 52:             if (menuitem != null)
 53:             {
 54:                 MessageBox.Show(menuitem.Header.ToString(), "Capital");
 55:             }
 56:         }
 57: 
 58:         private void MenuItemPopulation_Click(object sender, RoutedEventArgs e)
 59:         {
 60:             MenuItem menuitem = e.Source as MenuItem;
 61: 
 62:             if (menuitem != null)
 63:             {
 64:                 MessageBox.Show(menuitem.Header.ToString(), "Population");
 65:             }
 66:         }
 67:     }
 68: 
 69:     public class StateInfo
 70:     {
 71:         public StateInfo(String name, String capital, String population)
 72:         {
 73:             Name = name;
 74:             Capital = capital;
 75:             Population = population;
 76:         }
 77: 
 78:         public String Name
 79:         { get; set; }
 80: 
 81:         public String Capital
 82:         { get; set; }
 83: 
 84:         public String Population
 85:         { get; set; }
 86:     }
 87: }
 88: 

Here is the output of the program.

 

ListBoxContextMenu

Advertisements

Responses

  1. And If I want to do the same thing in normal C# windows Application then ?

  2. Wed development is by no means normal.

    • I am sorry i didn’t understand your last comment. Can you please further explain it. If you want to do the same thing in Web based programming then it depends on which technology you are using, is it client side, (HTML, Java Script, JQuery, Silverlight), server side (ASP.Net, JSP) etc. Please correct me if I am wrong.

      Regards
      Zeeshan Amjad


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: