原文: WPF 4 Ribbon 開發 之 标簽工具欄（Tab Toolbar） 本篇将開始介紹标簽工具欄的開發内容，标簽工具欄可以說是Ribbon 的核心部分，應用程式所有的功能特性都會集中在這裡，一個強大的Ribbon 工具欄也是一款軟體成功的關鍵。在開始前還是先來看看标簽工具欄的結構，從圖中可看出Ribbon 工具欄主要分為四部分：Ribbon -> Tab -> Group -> Control。
<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）