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

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

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

2.隨目標窗口調整大小

3.一些控件的使用

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

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

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

在添加內容前，我們需要先了解下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，微軟為我們細心的提供了很多內置的命令,目前我只發(fā)現(xiàn)了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試試）

那么這個是如何實現(xiàn)的呢？我們來看代碼。

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

轉載于:https://www.cnblogs.com/Angle-Louis/archive/2012/12/11/2805738.html

總結

以上是生活随笔為你收集整理的Ribbon For WPF的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。