Implement the pop-up ContextMenu effect in long-pressed Listbox on WP7

# Target

In WP7, ContextMenu can be used to achieve the effect of the long-pressed pop-up option menu.

# Prerequisites

For toolkit with ContextMenu, visit http://silverlight.codeplex.com/releases/view/71550to get the latest toolkit to get the correct source code and xap.

If you need to check, you can access $: \ Program Files \ Reference Assemblies \ Microsoft \ Framework \ Silverlight \ v4.0 \ Profile (where $ is the SDK installation drive letter ). For WP7.0, access the WindowsPhone directory; For WP7.1, access the WindowsPhone71 directory.

# Implementation process

Now, the preparation is ready and you can start to implement the effect.

Method 1: use the code to implement ContextMenuService

1. ContextMenu menu = new ContextMenu ();
3. MenuItem menuItem1 = new MenuItem ();
4. MenuItem1.Header = "This is Menu Item 1 ";
5. MenuItem1.Click + = new RoutedEventHandler (MenuItem_Click );
6. Menu. Items. Add (menuItem1 );
8. MenuItem menuItem2 = new MenuItem ();
9. MenuItem2.Header = "This is Menu Item 2 ";
10. MenuItem2.Click + = new RoutedEventHandler (MenuItem_Click );
11. Menu. Items. Add (menuItem2 );
13. ContextMenuService. SetContextMenu (rc, menu); // The rc here indicates the name of the rectangle box, or the name of the Control attached to the ContextMenu.

Method 2: Modify the xaml file to implement

1. Introduce Microsoft. Phone. Controls. Toolkit in project references.

2. Add the toolkit declaration to the page (for example, demo. xaml) file to be implemented as follows:

1. Xmlns: toolkit = "clr-namespace: Microsoft. Phone. Controls; assembly = Microsoft. Phone. Controls. Toolkit"

3. Add the implementation code in demo. xaml as follows:

1. <! -- ContentPanel-place additional content here -->
3. <StackPanelx: Name = "ContentPanel" Grid. Row = "1" Margin = "12, 0, 12, 0">
4. <GridBackground = "Blue">
5. <TextBlockText = "Select a color from the Context Menu"/>
6. <ListBoxx: Name = "listBox">
7. <ListBox. ItemTemplate>
8. <DataTemplate>
9. <StackPanelOrientation = "Horizontal">
10. <Toolkit: ContextMenuService. ContextMenu>
11. <Toolkit: ContextMenu>
12. <Toolkit: MenuItemHeader = "Add Color" Click = "MenuItem_Click"/>
13. <Toolkit: MenuItemHeader = "Remove Color" Click = "MenuItem_Click"/>
14. </Toolkit: ContextMenu>
15. </Toolkit: ContextMenuService. ContextMenu>
16. <ImageSource = "{Binding ImageUri}" Stretch = "None"/>
17. <TextBlockText = "{Binding Text}"/>
18. </StackPanel>
19. </DataTemplate>
20. </ListBox. ItemTemplate>
21. </ListBox>
22. </Grid>
24. </StackPanel>

In this way, the effect of the long-press pop-up menu can be completed.

# Effect demonstration

 

Image Sharing:

 

# Problem

1. In WP7.0, the scaled part is displayed, which is more obvious when the background color is large.

2. The effect on mango (WP7.1 +) is very good, consistent with the system phenomenon. It seems that Microsoft has fixed this issue.

# Reference

1. http://silverlight.codeplex.com/releases/view/71550, to get the latest toolkit and source code.

2. http://www.windowsphonegeek.com/tips/wp7-contextmenu-answers-to-popular-questions