|
之前寫(xiě)過(guò)幾篇關(guān)于WPF4 中開(kāi)發(fā)Ribbon 工具欄的文章,其中利用的是WPF Ribbon Control 控件庫(kù),開(kāi)發(fā)出類(lèi)似Office 2007 樣式的Ribbon 工具欄。當(dāng)然CodePlex 也提供了Fluent Ribbon Control Suite 項(xiàng)目可以寫(xiě)出Office 2010 樣式的工具欄應(yīng)用程序。8月2日微軟正式發(fā)布了Microsoft Ribbon for WPF,該Ribbon 控件是100%完全屬于的WPF 工具,并支持WPF3.5 SP1 以及WPF4。
下載安裝
首先下載 MSI 安裝程序。Microsoft Ribbon for WPF Source and Samples.msi 程序包括一些源碼及實(shí)例,安裝后VS2010 版的項(xiàng)目開(kāi)發(fā)包MicrosoftRibbonForWPFSourceAndSamples.zip 會(huì)釋放在C:/Program Files/Microsoft Ribbon for WPF/v3.5.40729.1 目錄中。
Microsoft Ribbon for WPF.msi 程序就是我們真正需要的東西,程序安裝后打開(kāi)VS2010 新建項(xiàng)目,在Windows 模板中可以看到"WPF Ribbon Application" 的選項(xiàng)。
VS2010 演示
新建項(xiàng)目后,一個(gè)默認(rèn)Ribbon 模型已經(jīng)為我們編寫(xiě)好了。
看看XAML 代碼,與原來(lái)用過(guò)的WPF Ribbon Control 也無(wú)太多差異。
<ribbon:RibbonWindow x:Class="WpfRibbonApplicationVS2010.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;
assembly=RibbonControlsLibrary" Title="MainWindow" x:Name="RibbonWindow" Width="640" Height="480"> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ribbon:Ribbon x:Name="Ribbon"> <ribbon:Ribbon.ApplicationMenu> <ribbon:RibbonApplicationMenu SmallImageSource="Images/SmallIcon.png"> <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon" x:Name="MenuItem1" ImageSource="Images/LargeIcon.png"/> </ribbon:RibbonApplicationMenu> </ribbon:Ribbon.ApplicationMenu> <ribbon:RibbonTab x:Name="HomeTab" Header="Home"> <ribbon:RibbonGroup x:Name="Group1" Header="Group1"> <ribbon:RibbonButton x:Name="Button1" LargeImageSource="Images/LargeIcon.png" Label="Button1" /> <ribbon:RibbonButton x:Name="Button2" SmallImageSource="Images/SmallIcon.png" Label="Button2" /> <ribbon:RibbonButton x:Name="Button3" SmallImageSource="Images/SmallIcon.png" Label="Button3" /> <ribbon:RibbonButton x:Name="Button4" SmallImageSource="Images/SmallIcon.png" Label="Button4" /> </ribbon:RibbonGroup> </ribbon:RibbonTab> </ribbon:Ribbon> </Grid></ribbon:RibbonWindow>
Blend4 演示
更令人興奮的是該Ribbon 庫(kù)同樣支持Blend4,這樣可以更方便的設(shè)計(jì)Ribbon 工具欄樣式。打開(kāi)Blend4 新建項(xiàng)目也能看到"WPF Ribbon Application"的選項(xiàng)。
在控件庫(kù)里也有不少的Ribbon 控件供大家使用。
在當(dāng)前項(xiàng)目基礎(chǔ)上,拖拽一個(gè)RibbonTab 進(jìn)來(lái),并將Tab 命名為"MyTab"。
在設(shè)計(jì)窗口調(diào)整MyTab 區(qū)域范圍。
Tab 標(biāo)簽設(shè)計(jì)完成后,繼續(xù)在MyTab 中添加MyGroup 組,為了設(shè)計(jì)方便先將Home 標(biāo)簽隱藏。
調(diào)整MyGroup 區(qū)域范圍。
在MyGroup 中添加RibbonButton 和RibbonCheckBox 控件,并為RibbonButton 設(shè)置一個(gè)Small 圖標(biāo)。
接下來(lái)為添加RibbonButton 和RibbonCheckBox 一些簡(jiǎn)單的事件。
private void ribbonButton_Click(object sender, RoutedEventArgs e){ // TODO: Add event handler implementation here. MessageBox.Show("Button Clicked.");}
private void RibbonCheckBox_Checked(object sender, RoutedEventArgs e){ // TODO: Add event handler implementation here. MessageBox.Show("Checked.");}
private void RibbonCheckBox_Unchecked(object sender, RoutedEventArgs e){ // TODO: Add event handler implementation here. MessageBox.Show("UnChecked.");}
通過(guò)上面的簡(jiǎn)單的演示,本次微軟發(fā)布的Ribbon for WPF 的確為我們開(kāi)發(fā)Ribbon 工具欄省了不少事,不必為繁瑣的嵌套XAML 代碼發(fā)愁了。感興趣的朋友可以閱讀MicrosoftRibbonForWPFSourceAndSamples.zip 中的源代碼學(xué)習(xí)更為復(fù)雜的Ribbon 工具欄。
相關(guān)參考
2. WPF 4 Ribbon 開(kāi)發(fā) 之 快捷工具欄(Quick Access Toolbar)
3. WPF 4 Ribbon 開(kāi)發(fā) 之 應(yīng)用程序菜單(Application Menu)
4. WPF 4 Ribbon 開(kāi)發(fā) 之 標(biāo)簽工具欄(Tab Toolbar)
NET技術(shù):Microsoft Ribbon for WPF 正式發(fā)布,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。