WPF 4 Ribbon 开发之快捷工具栏（Quick Access Toolbar）

2022-05-02 00:00:38

在Office 2007 和Windows 7 两款产品中微软开始引入了一种新概念：“Ribbon 工具栏”，Ribbon 工具栏的界面设计模式可以使用户方便快捷的找到所需的工具，同时这种直观的设计形式有助于用户发现软件其他功能特性，以便更好的了解应用程序的功能。

设计Ribbon 的目的本身就是要替代以往的老式工具栏，使应用程序的使用更加便捷。当然微软也为开发人员提供了Ribbon 工具栏的控件库（WPF Ribbon Control），方便大家开发出带有类似Office 2007 Ribbon 工具栏的应用程序。

获得Office UI 授权

在进行Ribbon 开发前首先需要获得Office UI 授权，并下载Ribbon 控件库（DLL）。进入授权页面点击“License the Office UI”。

用Windows Live ID 登录并填写个人信息，进入下载页面获得“WPF Ribbon Control”（注，该程序目前只是CTP 版本）。除此之外也可以下载其他相关资料。

Ribbon 界面结构

下载Ribbon 控件库后，就可以在程序中使用Ribbon 工具栏了。正式开发前我们先来看看Ribbon 工具栏的基本结构。下图为Office 2007 Ribbon 工具栏，其中主要分为Tab（Home、Insert 等），Group（Clipboard、Font、Paragraph 等）、Application Button、Quick Access Toolbar 四大部分。本篇将介绍快捷工具栏（Quick Access Toolbar）相关的开发内容。

快捷工具栏开发

在本系列的演示将完成一个具有Ribbon 工具栏的Notepad 程序。将RibbonControlsLibrary.dll 加入项目，在XAML 中添加Ribbon 控件的命名空间。另，在Ribbon 库中提供了<RibbonWindow>供大家使用，可以将原来的<Window> 标签替换之。

<r:RibbonWindow x:Class="WPF4RibbonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        Height="360" Width="500">
    ... ...
</r:RibbonWindow>

接下在快捷工具栏位置添加三个按键，分别实现以下功能：“保存文档”、“清空文档”和“帮助”。其实Ribbon 本身就是一个Command 工具栏，我们可以在<RibbonWindow.Resources>中为三个按键定义好相应的<RibbonCommand>内容。

在下面代码中CanExecute 用于判断是否执行Command，Executed 用于执行Command 的相关事件。SmallImageSource、LargeImageSource 用于设置工具栏大小图标，便于在窗口大小调整时随之变化。

<r:RibbonWindow.Resources>
    <r:RibbonCommand x:Key="SaveCommand" LabelTitle="Save"
                     CanExecute="SaveCommand_CanExecute"
                     Executed="SaveCommand_Executed"
                     SmallImageSource="Images/Save.png"
                     LargeImageSource="Images/Save.png"
                     ToolTipTitle="Save" ToolTipDescription="Save document" />
    <r:RibbonCommand x:Key="ClearCommand" LabelTitle="Clear"
                     CanExecute="ClearCommand_CanExecute"
                     Executed="ClearCommand_Executed"
                     SmallImageSource="Images/Clear.png"
                     LargeImageSource="Images/Clear.png" 
                     ToolTipTitle="Clear" ToolTipDescription="Clear all texts" />
    <r:RibbonCommand x:Key="HelpCommand" LabelTitle="Help"
                     CanExecute="HelpCommand_CanExecute"
                     Executed="HelpCommand_Executed"
                     SmallImageSource="Images/Help.png"
                     LargeImageSource="Images/Help.png" 
                     ToolTipTitle="Help" ToolTipDescription="Help Center" />
</r:RibbonWindow.Resources>

在<Ribbon> 中加入<RibbonQuickAccessToolBar>标签，添加三个<RibbonButton>按键，并将上面<RibbonCommand>的Key 值添加到<RibbonButton> 的Command 属性中。FocusManger.IsFocusScope 可使Command 事件在TextBox 中生效（将在后续标签工具栏文章中提到）。

<DockPanel>
    <r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad">
        <r:Ribbon.QuickAccessToolBar>
            <r:RibbonQuickAccessToolBar>
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource SaveCommand}" />
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource ClearCommand}" />
                <r:RibbonButton r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"
                                Command="{StaticResource HelpCommand}" />
            </r:RibbonQuickAccessToolBar>
        </r:Ribbon.QuickAccessToolBar>

</r:Ribbon>
</DockPanel>

上面程序中RibbonQuickAccessToolBar.Placement 用于设置快捷工具栏是否允许用户自定义调节。如下图所示可以将Help 按键从快捷工具栏中取消显示。若不设置该值则默认为不能调整，即工具栏中按键内容是固定的。

最后，为所有RibbonCommand 事件添加C# 代码完成事件内容，其中文档保存对话框可以使用Windows API Code Pack 的CommonSaveFileDialog 类完成文档保存功能。

private void SaveCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.CanExecute = true;
}

private void SaveCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    ShellContainer sc = KnownFolders.DocumentsLibrary as ShellContainer;
    CommonSaveFileDialog csfd = new CommonSaveFileDialog();
    csfd.InitialDirectoryShellContainer = sc;
    csfd.DefaultExtension = ".txt";
    csfd.Filters.Add(new CommonFileDialogFilter("Text Files", "*.txt"));
    if (csfd.ShowDialog() == CommonFileDialogResult.OK)
    {
        File.WriteAllText(csfd.FileName, txtBox.Text);
    }
}

private void ClearCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.CanExecute = true;
}

private void ClearCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    txtBox.Text = null;
}

private void HelpCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.CanExecute = true;
}

private void HelpCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    MessageBox.Show("You have clicked the help button.");
}

运行效果图：

至此，快捷工具栏的开发内容就讲到这里，下篇将介绍如何开发应用程序菜单（Application Menu），也就是上图左上角记事本图标中的内容。敬请关注… …

码农公寓

获得Office UI 授权

Ribbon 界面结构

快捷工具栏开发

相关资料

相关文章