Ribbon For WPF的使用

Ribbon For WPF是微軟的構建Office等應用命令欄，它將應用的程序功能組織到應用窗口的頂部的一系列選項卡中。Ribbon用戶界面 (UI) 使特性和功能更容易發現，允許更快地掌握應用程序，並且使用戶感覺增強了對應用程序體驗的控制。而且它很適合對於UI組織並不擅長的程序員。使用它可以很容易的組織出漂亮的UI（您只需要找到合適的Icon就行）。

我們將從幾個方面學習使用Ribbon。

1.組件：應用程序菜單、快速訪問工具欄、選項卡、組和控件

2.隨目標窗口調整大小

3.一些控件的使用

好了，開始我們的Ribbon之旅吧，我們將通過一個小例子來了解如何使用Ribbon來進行開發。

首先，我們先建立一個WPF應用程序，然后將默認的Window1.Xaml刪除，新建一個RibbonWindow（如圖，需要先安裝這個）

另外，我們需要修改App.xaml中的 StartupUri，將其值改為RibbonWindow1.xaml，這時候程序已經可以運行了。不過只是一個框架，我們現在要做的就是向框架中添加內容。

在添加內容前，我們需要先了解下RibbonWindow的結構：如圖

另外，我們需要了解下元素的層次結構

• Ribbon

  • Ribbon..::.HelpPaneContent

  • RibbonQuickAccessToolBar

    • RibbonButton, RibbonRadioButton, RibbonToggleButton, RibbonCheckBox, RibbonTextBox

    • RibbonComboBox, RibbonMenuButton, RibbonSplitButton

    • CustomizeMenuButton

  • RibbonApplicationMenu

    • RibbonApplicationMenuItem

    • RibbonApplicationSplitMenuItem

    • FooterPaneContent

    • AuxiliaryPaneContent

  • RibbonTab

    • RibbonGroup

      • RibbonButton, RibbonRadioButton, RibbonToggleButton, RibbonCheckBox, RibbonTextBox

      • RibbonComboBox, RibbonMenuButton, RibbonSplitButton

      • RibbonControlGroup

①快速訪問工具欄（QuickAccessToolBar）

<ribbon:Ribbon.QuickAccessToolBar>
                <ribbon:RibbonQuickAccessToolBar>
                    <ribbon:RibbonButton SmallImageSource="/Images/Save.png" LargeImageSource="/Images/Save.png"
                                         ToolTipTitle="保存" ToolTipDescription="已其他形式保存該郵件" Command="SaveAs"/>
                    <ribbon:RibbonButton SmallImageSource="/Images/Undo.png" LargeImageSource="/Images/Undo.png"
                                         ToolTipTitle="撤銷" ToolTipDescription="已其他形式保存該郵件" Command="ApplicationCommands.Undo" />
                    <ribbon:RibbonButton SmallImageSource="/Images/Redo.png" LargeImageSource="/Images/Redo.png"
                                         ToolTipTitle="恢復" ToolTipDescription="已其他形式保存該郵件" Command="ApplicationCommands.Redo"/>
                    <ribbon:RibbonButton SmallImageSource="/Images/attach.png" LargeImageSource="/Images/attach.png"
                                         ToolTipTitle="附件" ToolTipDescription="已其他形式保存該郵件" x:Name="quickAttachBtn" Click="attachmentBtn_Click"/>
                </ribbon:RibbonQuickAccessToolBar>
            </ribbon:Ribbon.QuickAccessToolBar>

這個是在窗口icon旁邊的快速訪問工具欄，主要是給一些比較常用的按鈕使用的。另外關於Command，微軟為我們細心的提供了很多內置的命令,目前我只發現了ApplicationCommands和EditingCommands兩個（如果有更多的Command請不吝分享）。

②應用程序菜單（ApplicationMenu）

<ribbon:Ribbon.ApplicationMenu>
    <ribbon:RibbonApplicationMenu SmallImageSource="Images/ApplicationMenuIcon.png" 
                                  KeyTip="F">
        <ribbon:RibbonApplicationMenuItem Header="Open"
                                          Command="Open"
                                          ImageSource="Images/Open32.png"
                                          KeyTip="O" />
        <ribbon:RibbonApplicationMenuItem Header="Save"
                                          Command="Save"
                                          ImageSource="Images/Save32.png"
                                          KeyTip="S" />
        <ribbon:RibbonApplicationSplitMenuItem Header="Save As"
                                               Command="SaveAs"
                                               ImageSource="Images/SaveAs32.png" 
                                               KeyTip="V" >
            <ribbon:RibbonApplicationMenuItem Header="Rich Text document"
                                              Command="SaveAs" CommandParameter="rtf"
                                              ImageSource="Images/SaveAsRtf32.png" 
                                              KeyTip="R" />
            <ribbon:RibbonApplicationMenuItem Header="Plain Text document"
                                              Command="SaveAs" CommandParameter="txt"
                                              ImageSource="Images/SaveAsTxt32.png"
                                              KeyTip="P" />
            <ribbon:RibbonApplicationMenuItem Header="Other format"
                                              Command="SaveAs"
                                              ImageSource="Images/SaveAs32.png" 
                                              KeyTip="O" />
        </ribbon:RibbonApplicationSplitMenuItem>               
        <ribbon:RibbonSeparator />
        <ribbon:RibbonApplicationSplitMenuItem Header="Print" 
                                               ImageSource="Images/Print32.png"
                                               KeyTip="R" />           
       <ribbon:RibbonApplicationMenuItem Header="Page Setup"
                                          ImageSource="Images/PrintSetup32.png"
                                          KeyTip="G" />
        <ribbon:RibbonApplicationMenu.FooterPaneContent>
            <DockPanel LastChildFill="False">
                <ribbon:RibbonButton Command="ApplicationCommands.Close"
                                     Label="Exit"
                                     ToolTipTitle="Exit" 
                                     SmallImageSource="Images\Exit16.png"
                                     KeyTip="X"
                                     DockPanel.Dock="Right"
                                     Margin="2"
                                     BorderBrush="#B8114EAF" />
            </DockPanel>
        </ribbon:RibbonApplicationMenu.FooterPaneContent>
        <ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
            <ribbon:RibbonGallery CanUserFilter="False"
                                  ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ribbon:RibbonGalleryCategory Header="Recent Documents" 
                                              Background="Transparent" 
                                              ItemsSource="{DynamicResource MostRecentFiles}">
                    <ribbon:RibbonGalleryCategory.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" IsItemsHost="True"/>
                        </ItemsPanelTemplate>
                    </ribbon:RibbonGalleryCategory.ItemsPanel>
                </ribbon:RibbonGalleryCategory>
            </ribbon:RibbonGallery>
        </ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
    </ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>

效果如圖： 

Applicaiton Menu主要由RibbonApplicationMenu組成，可以像普通的MenuItem一樣一層一層疊加。用RibbonSeparator進行分割，尾部可以添加FooterPaneContent，AuxiliaryPaneContent可以用來進行對輔助窗格的設置。

③選項卡（RibbonTab）和組（RibbonGroup）

這兩個元素構成了Ribbon應用的主要部分，一個應用可以有多個RibbonTab，一個Tab里可以有多個RibbonGroup。

<ribbon:RibbonTab x:Name="HomeTab" 
                  Header="Home">
    <ribbon:RibbonGroup x:Name="Group1" 
                        Header="Group1">
         <ribbon:RibbonGroup.GroupSizeDefinitions>
     
                <ribbon:RibbonGroupSizeDefinitionCollection>
          
                       <ribbon:RibbonGroupSizeDefinition>
                
                               <ribbon:RibbonControlSizeDefinition ImageSize="Large" />
      
                               <ribbon:RibbonControlSizeDefinition ImageSize="Small" />
     
                               <ribbon:RibbonControlSizeDefinition ImageSize="Small" />
         
                       </ribbon:RibbonGroupSizeDefinition>
    
                </ribbon:RibbonGroupSizeDefinitionCollection>
     
         </ribbon:RibbonGroup.GroupSizeDefinitions>
         <ribbon:RibbonButton x:Name="Button3"
                 
                             LargeImageSource="Images\LargeIcon.png"
        
                             Label="Button1" />

         <ribbon:RibbonButton x:Name="Button1"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button3" />
         <ribbon:RibbonButton x:Name="Button2"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button4" />                   
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup>
        <ribbon:RibbonButton x:Name="Button3"
                             LargeImageSource="Images\LargeIcon.png"
                             Label="Button1" />
        <ribbon:RibbonButton x:Name="Button4"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button2" />

    </ribbon:RibbonGroup>
</ribbon:RibbonTab>

要讓Group符合我們的想法，先要使用GroupSizeDefinitions對Group內的布局進行設置（當然不設置也是可以的，不過當我們講到后面的讓Ribbon隨着應用的大小自動調整的時候就要使用到GroupSizeDefinitions了），使用ImageSize指定對應位置控件的大小，使用IsLabelVisible對控件的Lable是否可見進行設置。

2.RibbonGroup隨目標窗口調整大小

接下來，我們就要將如何讓Group隨着窗口大小而自動調整。

我們先來看效果圖，注意ClipBorad這個組

隨着窗口的縮小：

 再縮小：

（具體的效果可以使用live mail試試）

那么這個是如何實現的呢？我們來看代碼。

<ribbon:RibbonGroup.GroupSizeDefinitions>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>

在一個RibbonGroup中，我們插入這樣一段代碼（當然需要幾個RibbonControlSizeDefinition完全看您的選擇），在縮小窗口的時候，WPF會自動選擇一個最適合當前窗口的RibbonGroupSizeDefinition。這樣就達到了上面截圖的效果。

That‘s all~~~因為東西有點多，第三點控件介紹我會另外寫一篇博文。有上面寫錯的地方請大家多多指教~