WP7 ContextMenu: answers to popular questions

by WindowsPhoneGeek

In the last few days we received lots of questions about how to use ContextMenu in WP7. In this mini tutorial we will give our answers to some of them.

NOTE: Before we begin let me first mention that ContextMenu is a part of theSilverlight for Windows Phone 7 toolkit. You can also take a look at ourWP7 ContextMenu in depth | Part1: key concepts and APIarticle for reference.

Question 1:Can I add Context Menu to DataTemplate ?

Question 2:I have ListBox with ContextMenu. How can I highlight the ListBox SelectedItem?

Question 3:I have ListBox with ContextMenu. How to get a reference to the ListBox tapped item from the ContextMenu Click handler?

Answers: Yes you can add the ContextMenu in a DataTemplate. You can highlight the ListBox SelectedItem and also get get a reference to the ListBox tapped item from the ContextMenu Click handler in this way:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< ListBox x:Name = "listBox" > < ListBox.ItemTemplate > < DataTemplate > < StackPanel x:Name = "sp" > < toolkit:ContextMenuService.ContextMenu > < toolkit:ContextMenu > < toolkit:MenuItem Header = "Add Color" Click = "MenuItem_Click" /> < toolkit:MenuItem Header = "Remove Color" Click = "MenuItem_Click" /> </ toolkit:ContextMenu > </ toolkit:ContextMenuService.ContextMenu > < Image Source = "{Binding ImageUri}" Stretch = "None" /> < TextBlock Text = "{Binding Text}" /> </ StackPanel > </ DataTemplate > </ ListBox.ItemTemplate > </ ListBox >

?

1 2 3 4 5 6 7 8 9 10 11 12

public MainPage() { InitializeComponent(); ObservableCollection<SampleData> dataSource = new ObservableCollection<SampleData>(); dataSource.Add( new SampleData() { ImageUri = "Images/appbar.close.rest.png" , Text = "Item1" }); dataSource.Add( new SampleData() { ImageUri = "Images/appbar.delete.rest.png" , Text = "Item2" }); dataSource.Add( new SampleData() { ImageUri = "Images/appbar.download.rest.png" , Text = "Item3" }); this .listBox.ItemsSource = dataSource; }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

private void MenuItem_Click(object sender, RoutedEventArgs e) { string header = (sender as MenuItem).Header.ToString(); ListBoxItem selectedListBoxItem = this.listBox.ItemContainerGenerator.ContainerFromItem((sender as MenuItem).DataContext) as ListBoxItem; if (selectedListBoxItem == null) { return; } if (header == "Add Color") { selectedListBoxItem.Background = new SolidColorBrush(Colors.Red); } else { selectedListBoxItem.Background = new SolidColorBrush(Colors.Black); } //To highlight the tapped item just use something like selectedListBoxItem.Background = new SolidColorBrush(Colors.Green); }

Question 4:How to populate the WP7 ContextMenu programmatically?

Answer: You can populate the ContextMenu programmatically either using MenuItems or through its ItemSource property.

Example1. Populate the ContextMenu with MenuItems:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

public MainPage() { InitializeComponent(); this .AddContextMenuWithMenuItems(); } private void AddContextMenuWithMenuItems() { ContextMenu contextMenu = new ContextMenu(); MenuItem menuItem1 = new MenuItem() { Header = "Add" , Tag = "Add" }; MenuItem menuItem2 = new MenuItem() { Header = "Remove" , Tag = "Remove" }; MenuItem menuItem3 = new MenuItem() { Header = "Cancel" , Tag = "Cancel" }; contextMenu.Items.Add(menuItem1); contextMenu.Items.Add(menuItem2); contextMenu.Items.Add(menuItem3); ContextMenuService.SetContextMenu( this .ContentPanel,contextMenu); }

NOTE: ControlPanel is the name of the UIElement to which you want to associate the menu.

Example2. Populate the ContextMenu through its ItemsSource property:

?

1 2 3 4 5 6 7 8 9 10 11 12

public MainPage() InitializeComponent(); this .AddContextMenuWithBinding(); } private void AddContextMenuWithBinding() { ContextMenu contextMenu = new ContextMenu(); contextMenu.ItemsSource = new List< string > { "Add" , "Remove" , "Cancel" }; ContextMenuService.SetContextMenu( this .ContentPanel, contextMenu); }

Question 5:How can I open the ContextMenu on Tap instead of Tap and Hold?

Answer: By default the context menu opens on Tab and Hold. Lets say that we have an Image and we want to open the menu only when users Tap the image (not Tab + Hold but only Tap). The code for accomplishing this is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< Grid > < toolkit:ContextMenuService.ContextMenu > < toolkit:ContextMenu x:Name = "menu1" > < toolkit:MenuItem Header = "item1" /> < toolkit:MenuItem Header = "item2" /> < toolkit:MenuItem Header = "item3" /> </ toolkit:ContextMenu > </ toolkit:ContextMenuService.ContextMenu > < Image Source = "logo.png" Height = "80" Width = "80" > < toolkit:GestureService.GestureListener > < toolkit:GestureListener Tap = "GestureListener_Tap" /> </ toolkit:GestureService.GestureListener > </ Image > < TextBlock Text = "Tap the image" /> </ Grid >

?

1 2 3 4 5 6 7

private void GestureListener_Tap( object sender, GestureEventArgs e) { if ( this .menu1.Parent == null ) { this .menu1.IsOpen = true ; } }

I hope that this mini tutorial was helpful. Here is thefull source code.

Tweet

Share on baidu Share on facebook Share on twitter More Sharing ServicesShare

You can also follow us on Twitter@winphonegeek

Comments

Icon Images

posted by: Dick Heuser on 2/8/2011 10:34:53 PM

In your first example, answering questions 1, 2 and 3, you have ImageUri data in the Sample Data, and those Images show in the Demo but there is no Image in the Xaml for the ListBox DataTemplate. How do they get there?

Fixed

posted by: WinPhoneGeek on 2/8/2011 10:51:30 PM

Its fixed now. Thank you for pointing that out.

ContextMenu in a PivotItem

posted by: Shantimohan Elchuri on 3/1/2011 8:17:37 PM

I have a ContextMenu and a ListBox in each of my PivotItems. ContextMenus are different in different PivotItems, but all the ListBoxes use same DataTemplate in a User Resource.

In ContextMenu_Opened event, I get the MainViewModel as the DataContext and not the ItemViewModel.

So, how can I attach my ContextMenu to the ListBox so that I can get the ItemViewModel as the DataContext so that I can manipulate the ListBoxItem?

RE:ContextMenu in a PivotItem

posted by: Kate on 3/3/2011 2:36:14 PM

You can get the item the ListBoxItem is bound to by casting the sender as a FrameworkElement to get access to the DataContext:

?

1	(sender as FrameworkElement).DataContext

You can then cast this to the appropriate model class and access the details you need. e.g.:

?

1	((sender as FrameworkElement).DataContext as ItemViewModel).DisplayName

silder and ContextMenu

posted by: Charles on 4/19/2011 12:43:17 PM

I use ContextMenu in A.xaml and use silder in B.xaml.

This silder has unnormal behavior. Drag this silder is not smooth.

Could you have any idea about this issue?

ContextMenu Delay

posted by: toolsche on 4/20/2011 11:40:11 AM

I use the ContexMenu in my App but I noticed the delay before the Menu appears is too high (higher than standard contextmenu in wp7). Is it possible to make the ContextMenu appear earlier?

Context Menu Items with Images

posted by: Matt on 6/10/2011 7:06:35 PM

Is it possible to give Context Menu Items an image to display?

I tried it like this, but it threw an error every time it went to the page with it.

Context Menu Items with Images

posted by: Matt on 6/10/2011 7:10:19 PM

Hmm, apparently you can't post tags. I've removed the < from these tags so I could post it.

toolkit:MenuItem DataContext="{Binding}">

?

1 2 3 4 5 6 7

StackPanel Orientation= "Horizontal" VerticalAlignment= "Bottom" HorizontalAlignment= "Left" > TextBlock Text= "Refresh" HorizontalAlignment= "Left" VerticalAlignment= "Bottom" /> Image Source= "/images/refresh.png" Height= "22" /> /StackPanel>

RE:Context Menu Items with Images

posted by: winphonegeek on 6/14/2011 4:48:48 PM

We answered your question in our latest post(you can find an example and the full source code available for download):WP7 ContextMenu with complex MenuItems

Basically you need to use the Header property of the MenuItem like for example:

?

1 2 3 4 5 6 7 8

<toolkit:MenuItem> <toolkit:MenuItem.Header> <StackPanel Orientation= "Horizontal" > <TextBlock Text= "Delete Item" /> <Image Source= "Images/appbar.delete.rest.png" /> </StackPanel> </toolkit:MenuItem.Header> </toolkit:MenuItem>

Combining questions

posted by: MGolding on 6/23/2011 1:51:22 PM

If I implement Question 5 (have that working np) how do I then answer Question 3. Or more specifically when using the gesture listener combined with a context menu in a list how to I get a handle to the ContextMenu to show it. Q5 states the following if (this.menu1.Parent == null) this.menu1.IsOpen = true; this will not work when the ContextMenu is embedded in the item template, what is the correct code?

Thanks for any help.

What if, instead of a ListBox, the ContextMenu is in a LongListSelector?

posted by: Enzo Contini on 9/22/2011 3:41:02 PM

How to get a reference to the LongListBox's tapped item from the ContextMenu Click handler?

Thank you

Possible solution for"What if, instead of a ListBox, the ContextMenu is in a LongListSelector?"

posted by: Enzo Contini on 9/23/2011 7:22:31 PM

I found one way to do that, if it can help someone! You can get the item object from the sender parameter of the ContextMenu_Opened event:

private void ContextMenu_Opened(object sender, RoutedEventArgs e) { //recovery of the LongListSelector item where the ContextMenu ContextMenu menu = sender as ContextMenu;was opened MyViewModelItem selectedItem = menu.DataContext as MyViewModelItem; }

What if, the ContextMenu is in a base UIElement such as TextBlock?

posted by: zhaozhengr on 10/10/2011 4:58:22 AM

As title, how to get a reference to the TextBlock's tapped item from the ContextMenu Click handler?

to Upper

posted by: hey on 10/10/2011 5:36:17 AM

I got it

How to change orientation

posted by: Philipp Panfilov on 10/12/2011 1:06:36 PM

Hello! How can I automaticaly change orientation of ContextMenu when I change orientation of my phone?

Question 3

posted by: Nathan on 11/9/2011 5:08:52 PM

I don't understand Question 3 in the examples. Say if i have a listbox with several textblocks. How do i get the value from one of these textblocks (selected item)

Thanks, Nathan

RE: Question 3

posted by: winphonegeek on 11/10/2011 12:04:10 PM

By using the code from the answer of question 3 you are able to find for which list box item the context menu is shown. This is done by using the ItemContainerGenerator and the the DataContext of the context menu which is set to the object bound to the list box item:

ListBoxItem selectedListBoxItem = this.listBox.ItemContainerGenerator.ContainerFromItem((sender as MenuItem).DataContext) as ListBoxItem;

Then once you have the list box item, you can search for the text blocks in its children.

example

posted by: Nathan on 11/10/2011 11:03:50 PM

ah thanks, i understand what you mean now. Would you be able to post a quick bit of code to show how to access say the childs i.e the textblock.

thanks

edit

posted by: Nathan on 11/11/2011 12:03:15 AM

I should of given the code i'm trying to use.

?

1	TextBlock tb = (TextBlock)listbox.ItemTemplate.FindName( "textblockname" , listbox);

FindName isn't in DataTemplate though.

thanks

RE

posted by: winphonegeek on 11/13/2011 12:35:40 PM

@Nathan

You have to search for the text block element in the list box item, and not in the list box ItemTemplate, since you need the text block instance that is shown in the list box item. In order to find the element that you need (the text block in your case) you can use the VisualTreeHelper to search in the hierarchy of elements of the list box item. More information and sample code you can find here:http://www.windowsphonegeek.com/tips/how-to-access-a-control-placed-inside-listbox-itemtemplate-in-wp7

Finally, if the value of the text block is set using data binding you do not need to find the text block. You can just use the fact that the DataContext of the list box item is set to the object that it is bound to.

problem

posted by: Ernest on 12/4/2011 6:45:22 PM

I have problem with List Box with ContextMenu inside items. Menu popping up, but it covered by AppBar. How to change Z-Order, or avoid positioning behind AppBar

disable some MenuItems

posted by: shang chen on 12/15/2011 1:06:39 AM

Hi, what if i want to disable some of the menuitems but not all of them? I try to useitemName.isEnabled = false;but the compiler said itemName doesn't exist.

Cheers

Button in ListBoxItems

posted by: Viacuda on 3/7/2012 5:51:56 PM

Hello,

I have a list box that is populated with buttons attached to isolatedStorage database.

I am able to retrieve the row of the button when I click on it:

private void Button_Click(object sender, RoutedEventArgs e) { var myUser = ((Button)sender).DataContext as UserControl; data = (sender as Button).DataContext as TblEX; NavigationService.Navigate(new Uri("/myX;component/frmAddT.xaml?id=" + data.EXPID, UriKind.Relative)); }

But I have added a context menu to the listbox, which has a choice of "Delete" I get this menu to popup but when I click "Delete" the variable is giving me an error of NULL:

private void MenuItem_Click(object sender, RoutedEventArgs e) { string header = (sender as MenuItem).Header.ToString(); ListBoxItem selectedListBoxItem = this.myListBox.ItemContainerGenerator.ContainerFromItem((sender as MenuItem).DataContext) as ListBoxItem; if (selectedListBoxItem == null) { return; } if (header == "Add Record") { data = (sender as Button).DataContext as TblEx; NavigationService.Navigate(new Uri("/myEx;component/frmAddEx.xaml?id="+data.EXPID , UriKind.Relative)); } else if (header == "Delete") { using (ExDB) { data = (sender as Button).DataContext as TblEx; IQueryablefindExRecord = from c in ExDB.TblEx where c.EXPID == data.EXPID select c; TblEx exToDelete = findExRecord.FirstOrDefault(); ExDB.TblExpenses.DeleteOnSubmit(exToDelete); ExDB.SubmitChanges(); } } }

It seems in this line: data = (sender as Button).DataContext as TblEx; the sender is no longer the button. How can I change that to use the button of the menuItem is using.

How about other control types?

posted by: Ambious on 3/29/2012 3:00:47 AM

Why are all the tutorials on this for MenuItems? I have a HyperLinkButton I want to add a context menu to. All the methods I tried failed because they're all meant for ListBoxItems, and at best I get 'this' as a sender. What am I missing?