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
①快速訪問工具欄（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~~~因為東西有點多，第三點控件介紹我會另外寫一篇博文。有上面寫錯的地方請大家多多指教~