在釋出Silverlight4 Beta版本和RC時 增加不少新的特性和控件. 類似在WinForm實作右鍵菜單ContentMenu功能. 在Silverlight 4中也有所展現.
當初在Silverlight4還是beta版本時 就有很多人問我如何實作右鍵菜單功能. 當時beta版本更新隻是增加兩個右鍵點選事件.分别為:
MouseRightButtonDown MouseRightButtonUp [右鍵按下和釋放事件]
在絕大多數情況下這個右擊事件被開發人員用來做了右鍵菜單, 而最新釋出的Toolkit for March 2010裡新增加了一個ContextMenu控件來實作右擊菜單的功能.Silverlight4正式版中增加了所有UIElement 對MouseRightButtonDown和MouseRightButtonUp操作支援,總而言之是改進一大.這讓我們實作其一個右鍵菜單ContentMenu更加快捷簡便.
先看看實作效果:右鍵點選文本框顯示ContentMenu
<a href="http://blog.51cto.com/attachment/201201/094750257.jpg" target="_blank"></a>
具體效果如上 為了達到示範目的 我做了一個比較簡單運用,其中也涉及到剪切闆部分操作. 具體實作步驟如下:
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":
case "Paste":
tb.SelectedText = Clipboard.GetText();
case "Chenkai制作右鍵菜單Demo":
MessageBox.Show("Author:chenkai Date:2010年5月27日11:09:51 文章附有源碼下載下傳 :)!");
default:
}
mymenu.IsOpen = false;
}
C:注意事項
(1)當第一次運作程式時右鍵單擊文本框 浏覽器提示:
<a href="http://blog.51cto.com/attachment/201201/094758499.png" target="_blank"></a>
其實到這了解Silverlight 4新特性朋友應該能看出來. 4.0版本中增加了對攝像頭、剪切闆等的使用者對話框 ,用于使用者選擇操作.當啟用剪切闆後才能正常示範該程式, 否則會提示一個異常資訊. "Application OPerator Exception:沒有啟用剪切闆".
(2)剪切闆的使用:
在上面的代碼,我們程式設計時通路該菜單項被點選的ContextMenu做的TextBox的剪切,複制和粘貼來操作剪貼闆,具體操作提示如下:
Clipboard.SetText() 從一個Silverlight應用程式資料複制到剪貼闆
Clipboard.GetText() 從剪切闆中獲得Copy複制資料
Cut剪切則隻需使用Clipboard.SetText(),并設定目前選擇的内容到一個空字元串 即可 操作簡便.為了示範目的, 如果想了解更多可找一些新特性文章檢視詳細操作.
當然細心朋友也能夠看出. 能不能把這個Menu右鍵菜單 做成多個級别關聯的.Silverlight 4.0 Beta版本是不支援的, 上例中我也做了嘗試.但尚未成功!希望有實作這方面的經驗相告.. 轉載請注明出去.如有疑問請在留言中回複.源代碼下載下傳如下:
Silverlight 4.0 右擊菜單實作源碼見附件。
<a href="http://down.51cto.com/data/2359689" target="_blank">附件:http://down.51cto.com/data/2359689</a>
本文轉自chenkaiunion 51CTO部落格,原文連結:http://blog.51cto.com/chenkai/765061