在WP7上实现Listbox中长按弹出ContextMenu效果

#目标

在WP7中，为了达到长按弹出选项菜单效果，可以采用ContextMenu实现。

#前提条件

带有ContextMenu的toolkit，可以通过访问http://silverlight.codeplex.com/releases/view/71550获取最新的toolkit以及相应的源码及XAP。

如果需要检查，可访问$:\Program Files\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0\Profile (其中$为SDK安装盘符)。对于WP7.0，访问WindowsPhone目录；对于WP7.1，访问WindowsPhone71目录。

#实现过程

至此，准备工作已经就绪，可以开始实现效果了。

方法一、通过代码来实现，利用ContextMenuService

ContextMenu menu = new ContextMenu();

MenuItem menuItem1 = new MenuItem();
menuItem1.Header = "This is Menu Item 1";
menuItem1.Click += new RoutedEventHandler(MenuItem_Click);
menu.Items.Add(menuItem1);

MenuItem menuItem2 = new MenuItem();
menuItem2.Header = "This is Menu Item 2";
menuItem2.Click += new RoutedEventHandler(MenuItem_Click);
menu.Items.Add(menuItem2);

ContextMenuService.SetContextMenu(rc,menu);  //这里的rc，表示的是矩形框的名字，也可以说是ContextMenu依附的那个控件的名字。

方法二、通过修改xaml文件来实现

1.在工程references中引入Microsoft.Phone.Controls.Toolkit。

2.在需要实现的页面（例如，demo.xaml）文件中加入toolkit声明如下：

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

  3.在demo.xaml中加入实现代码如下：

<!--ContentPanel - place additional content here-->

<StackPanelx:Name="ContentPanel"Grid.Row="1"Margin="12,12,0">
          <GridBackground="Blue">
              <TextBlockText="Select a color from the Context Menu"/>
    <ListBoxx:Name="listBox">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanelOrientation="Horizontal">
                    <toolkit:ContextMenuService.ContextMenu>
                        <toolkit:ContextMenu>
                            <toolkit:MenuItemHeader="Add Color"Click="MenuItem_Click"/>
                            <toolkit:MenuItemHeader="Remove Color"Click="MenuItem_Click"/>
                        </toolkit:ContextMenu>
                    </toolkit:ContextMenuService.ContextMenu>
                    <ImageSource="{Binding ImageUri}"Stretch="None"/>
                    <TextBlockText="{Binding Text}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
          </Grid>

      </StackPanel>

如此即可完成长按弹出菜单效果。

#效果演示

 

图片分享：

 

#问题

1.在WP7.0上则存在被缩放的部分有显示问题，当背景颜色对比大时更加明显。

2.在mango（WP7.1+）上效果非常好，与系统现象一致。看来微软已经FIX此问题。

#参考链接

1.http://silverlight.codeplex.com/releases/view/71550，以获取最新的toolkit和source code。

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