Silverlight4中右键菜单实现-附源码下载_app

概述在发布Silverlight4 Beta版本和RC时增加不少新的特性和控件. 类似在WinForm实现右键菜单ContentMenu功能. 在Silverlight 4中也有所体现. 当初在Silverlight4还是beta版本时就有很多人问我如何实现右键菜单功能. 当时beta版本更新只是增加两个右键点击事件.分别为: MouseRightButtonDown MouseRightBu

在发布Silverlight4 Beta版本和RC时增加不少新的特性和控件. 类似在WinForm实现右键菜单ContentMenu功能. 在Silverlight 4中也有所体现.

当初在Silverlight4还是beta版本时就有很多人问我如何实现右键菜单功能. 当时beta版本更新只是增加两个右键点击事件.分别为:

MouseRightbuttonDown MouseRightbuttonUp [右键按下和释放事件]

在绝大多数情况下这个右击事件被开发人员用来做了右键菜单,而最新发布的Toolkit for march 2010里新增加了一个ContextMenu控件来实现右击菜单的功能.Silverlight4正式版中增加了所有UIElement 对MouseRightbuttonDown和MouseRightbuttonUp *** 作支持,总而言之是改进一大.这让我们实现其一个右键菜单ContentMenu更加快捷简便.

先看看实现效果:右键点击文本框显示ContentMenu

具体效果如上为了达到演示目的我做了一个比较简单运用,其中也涉及到剪切板部分 *** 作. 具体实现步骤如下:

A:创建一个默认的Silverlight应用程序即可记住Silverlight版本选择4.0. 页面布局:

  <!--Excepetcion:Property Contentmenu does not support value the type grID-->       <Canvas x:name="LayoutRoot" WIDth="450" Height="400" Background="White">                      <TextBlock Text="Right Click ContextMenu in Silverlight 4" FontSize="16" Foreground="Red" Canvas.top="12" Canvas.left="12" Height="23" WIDth="357"></TextBlock>               <TextBox x:name="tb" Text="Select Text and Right Click" Canvas.left="59" Canvas.top="49" Height="26" WIDth="300" />                   <my:ContextMenuService.ContextMenu>                       <my:ContextMenu name="mymenu">                           <my:MenuItem header="Cut" Click="MenuItem_Click"/>                           <my:MenuItem header="copy" Click="MenuItem_Click"/>                           <my:Separator/>                           <my:MenuItem header="Paste" Click="MenuItem_Click"/>                         <my:MenuItem x:name="definemyself" Click="MenuItem_Click">                           <my:MenuItem.header>                               <StackPanel OrIEntation="Horizontal">                                   <Image Source="/TestSilverlightRightmouseClickDemo;component/Images/Vis_F_blue_Lo-res.jpg" WIDth="30" Height="30" />                                   <TextBlock Text="附带有Image样式" padding="5"></TextBlock>                               </StackPanel>                          </my:MenuItem.header>                                                 </my:MenuItem>                       <my:MenuItem header="Chenkai制作右键菜单Demo" Click="MenuItem_Click"/>                   </my:ContextMenu>                   </my:ContextMenuService.ContextMenu>                         </Canvas>

页面布局采用的是Canvas. 当初在从ToolKit中拖入ContextMenu控件时提示一个异常信息:"Exceptcion:Property Contentmenu does not support value the type grID”

把默认布局GrID改成Canvas默认定位即可.

可能你已经注意到了,我使用的附加属性的ContextMenuService.ContextMenu,主要原因在WPF中你可以使用FrameWorkElement.ContextMenu属性将ContextMenu附加到一个元素,但在Silverlight中不支持,所以ContextMenuService.ContextMenu也提供了类似的功能.

B:在ContextMenu中添加多个MenuItem,为了演示我对菜单并没有美化效果. 后台的Click="MenuItem_Click"事件代码如下:

  private voID MenuItem_Click(object sender, RoutedEventArgs e)               {                   MenuItem menuItem = (MenuItem)sender;                   switch (menuItem.header.ToString())                   {                       case "Cut":                           Clipboard.SetText(tb.SelectedText);                           tb.SelectedText = "";                           tb.Focus();                           break;                       case "copy":                           Clipboard.SetText(tb.SelectedText);                           tb.Focus();                           break;                       case "Paste":                           tb.SelectedText = Clipboard.GetText();                           break;                       case "Chenkai制作右键菜单Demo":                           MessageBox.Show("Author:chenkai Date:2010年5月27日11:09:51 文章附有源码下载 :)！");                           break;                       default:                           break;                   }                   mymenu.IsOpen = false;               }