Ribbon For WPF

来源：互联网发布：网络大电影招商案编辑：程序博客网时间：2024/06/05 20:00

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。这样就达到了上面截图的效果。

0 0