Ribbon For WPF的使用
Ribbon For WPF是微軟的構(gòu)建Office等應(yīng)用命令欄，它將應(yīng)用的程序功能組織到應(yīng)用窗口的頂部的一系列選項(xiàng)卡中。Ribbon用戶界面 (UI) 使特性和功能更容易發(fā)現(xiàn)，允許更快地掌握應(yīng)用程序，并且使用戶感覺增強(qiáng)了對應(yīng)用程序體驗(yàn)的控制。而且它很適合對于UI組織并不擅長的程序員。使用它可以很容易的組織出漂亮的UI（您只需要找到合適的Icon就行）。
我們將從幾個方面學(xué)習(xí)使用Ribbon。
1.組件：應(yīng)用程序菜單、快速訪問工具欄、選項(xiàng)卡、組和控件
2.隨目標(biāo)窗口調(diào)整大小
3.一些控件的使用
好了，開始我們的Ribbon之旅吧，我們將通過一個小例子來了解如何使用Ribbon來進(jìn)行開發(fā)。
首先，我們先建立一個WPF應(yīng)用程序，然后將默認(rèn)的Window1.Xaml刪除，新建一個RibbonWindow（如圖，需要先安裝這個）
另外，我們需要修改App.xaml中的?StartupUri，將其值改為RibbonWindow1.xaml，這時候程序已經(jīng)可以運(yùn)行了。不過只是一個框架，我們現(xiàn)在要做的就是向框架中添加內(nèi)容。
在添加內(nèi)容前，我們需要先了解下RibbonWindow的結(jié)構(gòu)：如圖
另外，我們需要了解下元素的層次結(jié)構(gòu)
-
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="恢復(fù)" 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旁邊的快速訪問工具欄，主要是給一些比較常用的按鈕使用的。另外關(guān)于Command，微軟為我們細(xì)心的提供了很多內(nèi)置的命令,目前我只發(fā)現(xiàn)了ApplicationCommands和EditingCommands兩個（如果有更多的Command請不吝分享）。
②應(yīng)用程序菜單（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進(jìn)行分割，尾部可以添加FooterPaneContent，AuxiliaryPaneContent可以用來進(jìn)行對輔助窗格的設(shè)置。
③選項(xiàng)卡（RibbonTab）和組（RibbonGroup）
這兩個元素構(gòu)成了Ribbon應(yīng)用的主要部分，一個應(yīng)用可以有多個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內(nèi)的布局進(jìn)行設(shè)置（當(dāng)然不設(shè)置也是可以的，不過當(dāng)我們講到后面的讓Ribbon隨著應(yīng)用的大小自動調(diào)整的時候就要使用到GroupSizeDefinitions了），使用ImageSize指定對應(yīng)位置控件的大小，使用IsLabelVisible對控件的Lable是否可見進(jìn)行設(shè)置。
2.RibbonGroup隨目標(biāo)窗口調(diào)整大小
接下來，我們就要將如何讓Group隨著窗口大小而自動調(diào)整。
我們先來看效果圖，注意ClipBorad這個組
隨著窗口的縮小：
?再縮小：
（具體的效果可以使用live mail試試）
那么這個是如何實(shí)現(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中，我們插入這樣一段代碼（當(dāng)然需要幾個RibbonControlSizeDefinition完全看您的選擇），在縮小窗口的時候，WPF會自動選擇一個最適合當(dāng)前窗口的RibbonGroupSizeDefinition。這樣就達(dá)到了上面截圖的效果。
That‘s all~~~因?yàn)闁|西有點(diǎn)多，第三點(diǎn)控件介紹我會另外寫一篇博文。有上面寫錯的地方請大家多多指教~
轉(zhuǎn)載于:https://www.cnblogs.com/Angle-Louis/archive/2012/12/11/2805738.html
總結(jié)
以上是生活随笔為你收集整理的Ribbon For WPF的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
