WP7 ContextMenu with complex MenuItems

published on: 6/14/2011 | Views: N/A | Tags: WP7Toolkit

by WindowsPhoneGeek

In this quick tip I am going to discuss some questions regarding the WP7 ContextMenu and its MenuItems.

NOTE: Before we begin let me first mention that ContextMenu is a part of the Silverlight for Windows Phone 7 toolkit. You can also take a look at our WP7 ContextMenu in depth | Part1: key concepts and API and WP7 ContextMenu: answers to popular questions articles for reference.

We received lots of questions related to ContextMenu and especially its MenuItems. Here are some of them:

Question 1: In a data bound ListBox how to add a ContextMenu with Images?

Question 2: How can I add more complex items like Images, Buttons, etc inside a Context Menu via MenuItem?

Question 3: ContextMenu throws an exception when I try to add Images inside a MenuItem?

What is the problem?

It is generally believed that all you need to do in order to have complex items inside a ContextMenu is just to add them between the opening and closing tags of the MenuItem. However this is not true, if you try to do this you will notice the following exception(although the project is build successfully):

This is happening because the only way in which you can set any content to a MenuItem is either using its Header property or HeaderTemplate because MenuItem is in itself a HeaderedItemsControl not a ContentControl!

The Solution

So just use the Header or HeaderTemplate property of the MenuItem like for example:

Here is how the full code should look like when used inside a data bound ListBox:

<ListBox x:Name="listBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu>
                        <toolkit:MenuItem Header="AddItem"/>
                        <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>
                    </toolkit:ContextMenu>
                </toolkit:ContextMenuService.ContextMenu>
                <TextBlock Text="{Binding}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

NOTE: It is important to set the right Image Path depending on the build action of the target Image: WP7 working with Images: Content vs Resource build action

You can download the full source code here:

I hope that the tip was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'WP7 ContextMenu with complex MenuItems'

Title Your Name

Comment