?本篇將開始介紹標簽工具欄的開發內容，標簽工具欄可以說是Ribbon 的核心部分，應用程序所有的功能特性都會集中在這里，一個強大的Ribbon 工具欄也是一款軟件成功的關鍵。在開始前還是先來看看標簽工具欄的結構，從圖中可看出Ribbon 工具欄主要分為四部分：Ribbon?->?Tab?->?Group?->?Control。

???? 下面來添加一個Clipboard 菜單組，其中包括三個RibbonButton 控件分別實現“粘貼”、“拷貝”、“剪切”功能。與前兩篇文章一樣，先為Button 控件編寫<RibbonCommand> 和Command 事件內容。

<r:RibbonCommand x:Key="PasteCommand" LabelTitle="Paste"CanExecute="PasteCommand_CanExecute"Executed="PasteCommand_Executed"SmallImageSource="Images/Paste.png"LargeImageSource="Images/Paste.png"ToolTipTitle="Paste"
ToolTipDescription="Paste contents" /> <r:RibbonCommand x:Key="CopyCommand" LabelTitle="Copy"CanExecute="CopyCommand_CanExecute"Executed="CopyCommand_Executed"SmallImageSource="Images/Copy.png"LargeImageSource="Images/Copy.png"ToolTipTitle="Copy"
ToolTipDescription="Copy selected contents" /> <r:RibbonCommand x:Key="CutCommand" LabelTitle="Cut"CanExecute="CutCommand_CanExecute"Executed="CutCommand_Executed"SmallImageSource="Images/Cut.png"LargeImageSource="Images/Cut.png"ToolTipTitle="Cut"
ToolTipDescription="Cut selected contents" /> private void PasteCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Paste.CanExecute(FocusManager.GetFocusedElement(this), null); }private void PasteCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Paste.Execute(FocusManager.GetFocusedElement(this), null); }private void CopyCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Copy.CanExecute(FocusManager.GetFocusedElement(this), null); }private void CopyCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Copy.Execute(FocusManager.GetFocusedElement(this), null); }private void CutCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Cut.CanExecute(FocusManager.GetFocusedElement(this), null); }private void CutCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Cut.Execute(FocusManager.GetFocusedElement(this), null); }

???? 在Command 事件中使用了ApplicationCommands 來完成Paste、Copy、Cut 各項功能。同時使用FocusManger.GetFocusedElement 來鎖定ApplicationCommands 的操作對象（TextBox），這也就是為什么在《WPF 4 Ribbon 開發 之 快捷工具欄（Quick Access Toolbar）》一文中提到的將<Ribbon> 的FocusManager.IsFocusScope 屬性設為True 的原因。將上面RibbonCommand 設置加入相應<RibbonButton>的Command 屬性中。

<r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad"><r:Ribbon.QuickAccessToolBar>... ...</r:Ribbon.QuickAccessToolBar><r:Ribbon.ApplicationMenu>... ...</r:Ribbon.ApplicationMenu><r:RibbonTab Label="Home"><r:RibbonGroup HasDialogLauncher="True" Command="{StaticResource GroupCommand}"><r:RibbonGroup.GroupSizeDefinitions><r:RibbonGroupSizeDefinitionCollection><r:RibbonGroupSizeDefinition><r:RibbonControlSizeDefinition ImageSize="Large" /><r:RibbonControlSizeDefinition ImageSize="Small" /><r:RibbonControlSizeDefinition ImageSize="Small" /></r:RibbonGroupSizeDefinition></r:RibbonGroupSizeDefinitionCollection></r:RibbonGroup.GroupSizeDefinitions><r:RibbonButton Command="{StaticResource PasteCommand}" /><r:RibbonButton Command="{StaticResource CopyCommand}" /><r:RibbonButton Command="{StaticResource CutCommand}" /></r:RibbonGroup></r:RibbonTab><r:RibbonTab Label="View" /><r:RibbonTab Label="Help" /> </r:Ribbon>

???? 上面程序中通過RibbonControlSizeDefinition 來定義RibbonButton 控件在Group 中的圖標顯示方式（分別為大、小兩種），在本例中我們將Paste 設為大圖標，另外Copy、Cut 兩個設為小圖標。HasDialogLauncher 屬性用于設定是否顯示Dialog Box Launcher 按鍵（如下圖），如果有需要也可以為Dialog Launcher 添加工具欄。

???? 這樣一個RibbonGroup 就完成了。有了上面的基礎對于Font 組的開發就輕而易舉了，在該組中使用了兩個<RibbonControlGroup>控件組分別用于字體顏色和尺寸大小的設置，大家可以參考下面代碼進一步了解。

<r:RibbonGroup><r:RibbonGroup.Command><r:RibbonCommand LabelTitle="Font" /></r:RibbonGroup.Command><r:RibbonControlGroup><r:RibbonLabel ToolTip="Font Color"><r:RibbonLabel.Content><Image Source="Images/Paint.png" Width="16" Height="16" /></r:RibbonLabel.Content></r:RibbonLabel><r:RibbonButton ToolTip="Black" Background="Black"CommandParameter="Black"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Red" Background="Red"CommandParameter="Red"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Blue" Background="Blue"CommandParameter="Blue"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Green" Background="Green"CommandParameter="Green"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton></r:RibbonControlGroup><r:RibbonControlGroup><r:RibbonLabel ToolTip="Font Size"><r:RibbonLabel.Content><Image Source="Images/Font.png" Width="16" Height="16" /></r:RibbonLabel.Content></r:RibbonLabel><r:RibbonComboBox x:Name="fontComboBox" Width="80"SelectionChanged="fontComboBox_SelectionChanged"><r:RibbonComboBoxItem Content="10"/><r:RibbonComboBoxItem Content="20"/><r:RibbonComboBoxItem Content="30"/></r:RibbonComboBox></r:RibbonControlGroup> </r:RibbonGroup>

private void FontColorCommand_Executed(object sender, ExecutedRoutedEventArgs e) {txtBox.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString(e.Parameter as string)); }private void fontComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) {double fontSize = 0;switch (fontComboBox.SelectedIndex){case 0:fontSize = 10;break;case 1:fontSize = 20;break;case 2:fontSize = 30;break;default:break;}txtBox.FontSize = fontSize; }

修改字體大小和顏色后的效果圖：

?

???? 至此，Ribbon 工具欄相關內容的介紹已全部完成，希望該系列對大家有所幫助。當然Ribbon 控件庫中的控件還不止這些，有很多其他控件供開發者使用，有興趣的朋友可以按需要進行選擇，并完善軟件的Ribbon 工具欄功能。

本系列相關文章

1.?WPF 4 Ribbon 開發 之 快捷工具欄（Quick Access Toolbar）

2.?WPF 4 Ribbon 開發 之 應用程序菜單（Application Menu）

源代碼下載

本文轉自Gnie博客園博客，原文鏈接：http://www.cnblogs.com/gnielee/archive/2010/05/12/wpf4-ribbon-tab-toolbar.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的WPF 4 Ribbon 开发 之 标签工具栏（Tab Toolbar）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。