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

在发布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. 页面布局:

 1     <!-- Excepetcion:Property Contentmenu does not support value the type grid -->
 2  < Canvas  x:Name ="LayoutRoot"  Width ="450"  Height ="400"  Background ="White" >
 3 
 4           < TextBlock  Text ="Right Click ContextMenu in Silverlight 4"  FontSize ="16"  Foreground ="Red"  Canvas.Top ="12"  Canvas.Left ="12"  Height ="23"  Width ="357" ></ TextBlock >
 5           < TextBox  x:Name ="tb"  Text ="Select Text and Right Click"  Canvas.Left ="59"  Canvas.Top ="49"  Height ="26"  Width ="300"   />
 6               < my:ContextMenuService.ContextMenu >
 7                   < my:ContextMenu  Name ="mymenu" >
 8                       < my:MenuItem  Header ="Cut"  Click ="MenuItem_Click" />
 9                       < my:MenuItem  Header ="copy"  Click ="MenuItem_Click" />
10                       < my:Separator />
11                       < my:MenuItem  Header ="Paste"  Click ="MenuItem_Click" />
12                     < my:MenuItem  x:Name ="definemyself"  Click ="MenuItem_Click" >
13                       < my:MenuItem.Header >
14                           < StackPanel  Orientation ="Horizontal" >
15                               < Image  Source ="/TestSilverlightRightMouseClickDemo;component/Images/Vis_F_blue_Lo-res.jpg"  Width ="30"  Height ="30"   />
16                               < TextBlock  Text ="附带有Image样式"  Padding ="5" ></ TextBlock >
17                           </ StackPanel >
18                      </ my:MenuItem.Header >
19                     
20                   </ my:MenuItem >
21                   < my:MenuItem  Header ="Chenkai制作右键菜单Demo"  Click ="MenuItem_Click" />
22               </ my:ContextMenu >
23               </ my:ContextMenuService.ContextMenu >
24         
25       </ 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"事件代码如下:

 

 

 

有人也许会问如果没有正式版版本的ContextMenu控件如何利用两个右击事件实现这Menu右击菜单效果.? 其实这个在Beta时就没有这个控件,但依然能够实现.具体的操作请参见风云的风云的银光志Silverlight4.0教程之使用鼠标右键事件和滚轮事件.也很简单不在这里不再赘述.

 

当然细心朋友也能够看出. 能不能把这个Menu右键菜单 做成多个级别关联的.Silverlight 4.0 Beta版本是不支持的,上例中我也做了尝试.但尚未成功！希望有实现这方面的经验相告.. 转载请注明出去.如有疑问请在留言中回复.源代码下载如下:

Silverlight 4.0 右击菜单实现:/Files/chenkai/TestSilverlightRightMouseClickDemo.rar