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

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

     在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）相关的开发内容。

快捷工具栏开发

 

<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>

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

     在下面代码中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>

<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>

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

     最后，为所有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>);
}

运行效果图：

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

相关资料

1. Office UI Licensing Developer Center
http://msdn.microsoft.com/en-us/office/aa973809.aspx

2. Ribbons
http://msdn.microsoft.com/en-us/library/cc872782.aspx

3. WPF Ribbon Preview
http://www.codeplex.com/wikipage?ProjectName=wpf&title=WPF%20Ribbon%20Preview

4. WPF 4 (VS 2010 and .NET 4.0 Series)
http://weblogs.asp.net/scottgu/archive/2009/10/26/wpf-4-vs-2010-and-net-4-0-series.aspx

5. Ribbon Feature Walkthrough
http://windowsclient.net/wpf/wpf35/wpf-35sp1-ribbon-walkthrough.aspx?PageIndex=1

6. Introducing the Windows Ribbon Framework
http://msdn.microsoft.com/en-us/library/dd316910(VS.85).aspx