原文: WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar) 本篇将开始介绍标签工具栏的开发内容,标签工具栏可以说是Ribbon 的核心部分,应用程序所有的功能特性都会集中在这里,一个强大的Ribbon 工具栏也是一款软件成功的关键。在开始前还是先来看看标签工具栏的结构,从图中可看出Ribbon 工具栏主要分为四部分:Ribbon -> Tab -> Group -> Control。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcucTMlV2YkJDZzMzMklTOiNzYhNTZhFjYmFGMxcDMxEjMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
<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" />
http://11011.net/software/vspaste 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);
}
http://11011.net/software/vspaste 在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>
http://11011.net/software/vspaste 上面程序中通过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>
http://11011.net/software/vspaste 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;
}
http://11011.net/software/vspaste 修改字体大小和颜色后的效果图:
至此,Ribbon 工具栏相关内容的介绍已全部完成,希望该系列对大家有所帮助。当然Ribbon 控件库中的控件还不止这些,有很多其他控件供开发者使用,有兴趣的朋友可以按需要进行选择,并完善软件的Ribbon 工具栏功能。
本系列相关文章
1.
WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)2.
WPF 4 Ribbon 开发 之 应用程序菜单(Application Menu)