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

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

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

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

获得Office UI 授权

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

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

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

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

Ribbon 界面结构

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

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

快捷工具栏开发

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

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

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

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

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

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

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

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

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

Nach dem Login kopieren

运行效果图：

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