WPF 4 Ribbon 開發 之 快捷工具列（Quick Access Toolbar）

     在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），也就是左上方記事本表徵圖中的內容。敬請關注… …

相關資料

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