WP7 - Cancelling ContextMenu click event propagation

Question

I'm having a problem when the Silverlight toolkit's ContextMenu is clicked while it is over a UIElement that has registered a Tap event GestureListener. The context menu click propagates to the underlying element and fires its tap event.

For instance, say I have a ListBox and each ListBoxItem within it has registered both a ContextMenu and a Tap GestureListener. Assume that clicking context menu item2 is supposed to take you to Page1.xaml, while tapping on any of ListBox items themselves is supposed to take you to Page2.xaml.

If I open the context menu on item1 in the ListBox, then context menu item2 is on top of ListBox item2. When I click on context menu item2 I get weird behavior where the app navigates to Page1.xaml and then immediately to Page2.xaml because the click event also triggered the Tap gesture for ListBox item2.

I've verified in the debugger that it is always the context menu that receives the click event first. How do I cancel the context menu item click's routed event propagation so it doesn't reach ListBox item2?

Thanks for your help!

Answer 1

You can get around the problem by doing the following:

• In the context menu's Opened handler set LayoutRoot.IsHitTestVisible (LayoutRoot is the default name for the root UIElement) to false

• In the context menu's Closed handler set LayoutRoot.IsHitTestVisible back to true

Answer 2

You could try adding a rectangle with a transparent background (important) over the effected area/page when showing the context menu.

Answer 3

I had a very similar issue, but I am using the ManipulationCompleted event as a "tap" detector as the object the ContentMenu applies to is a custom control.

LayoutRoot.IsHitTestVisible didn't work for me, perhaps because it does not apply to Manipulation events. However, it set me on the right path. I just implemented my own simple equivalent of it - I created a boolean variable bCancelManipulation in the page's scope.

• In the ContentMenu's Opened event set it to True.
• In the ContentMenu's Closed event set it to False.
• In the ManipulationCompleted function, the first thing I do is check if(bCancelManipulation==true) { return; }

It's kind of a hack, but it works great and is quite simple to code - it can easily be adapted to a Tap event too.