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

 
 
<!--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;  

  
           }

C:注意事项

(1)当第一次运行程序时右键单击文本框浏览器提示:

其实到这了解Silverlight 4新特性朋友应该能看出来. 4.0版本中增加了对摄像头、剪切板等的用户对话框,用于用户选择操作.当启用剪切板后才能正常演示该程序,否则会提示一个异常信息. "Application OPerator Exception:没有启用剪切板".

(2)剪切板的使用:

在上面的代码，我们编程时访问该菜单项被点击的ContextMenu做的TextBox的剪切，复制和粘贴来操作剪贴板,具体操作提示如下:

Clipboard.SetText() 从一个Silverlight应用程序数据复制到剪贴板

Clipboard.GetText() 从剪切板中获得copy复制数据

Cut剪切则只需使用Clipboard.SetText（），并设置当前选择的内容到一个空字符串即可操作简便.为了演示目的,如果想了解更多可找一些新特性文章查看详细操作.

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

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

Silverlight 4.0 右击菜单实现源码见附件。

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

相关文章