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~~~因为东西有点多，第三点控件介绍我会另外写一篇博文。有上面写错的地方请大家多多指教~

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

Ribbon For WPF的使用相关推荐

  1. 一起谈.NET技术，WPF Ribbon 开发资料分享

    Ribbon 开发工具 WPF Ribbon New 目前微软发布的最新Ribbon 开发工具,上一篇已经做过介绍这里就不再多说了.支持WPF 3.5 SP1.WPF 4,全面兼容VS2010 和Bl ...

  2. 微软官方的.NET Framework API 参考网址

    微软官方的.NET Framework API 参考网址,值得收藏和查阅~~~ https://docs.microsoft.com/zh-cn/dotnet/api/?view=netframewo ...

  3. WPF 4 Ribbon 开发 之 快捷工具栏（Quick Access Toolbar）

    在Office 2007 和Windows 7 两款产品中微软开始引入了一种新概念:"Ribbon 工具栏",Ribbon 工具栏的界面设计模式可以使用户方便快捷的找到所需的工具, ...

  4. WPF 4 Ribbon 开发 之 应用程序菜单（Application Menu）

    原文:WPF 4 Ribbon 开发 之 应用程序菜单(Application Menu) 在上一篇中我们完成了快捷工具栏的开发,本篇将讲解应用程序菜单开发的相关内容.如下图所示,点击程序窗口左上角的 ...

  5. WPF 4 Ribbon 开发 之 标签工具栏（Tab Toolbar）

    本篇将开始介绍标签工具栏的开发内容,标签工具栏可以说是Ribbon 的核心部分,应用程序所有的功能特性都会集中在这里,一个强大的Ribbon 工具栏也是一款软件成功的关键.在开始前还是先来看看标签工具 ...

  6. WPF使用Fluent.Ribbon修改标题栏背景颜色

    使用NuGet安装:Install-Package Fluent.Ribbon 修改App.xaml: <Application.Resources><!-- Attach defa ...

  7. WPF中使用Windows.Controls.Ribbon创建一个简单画板

    Windows系统自带的画图工具很完善的,如下代码只是演示创建一个简易的画板,可以做教学使用. 整体效果如下: 1. 添加组件System.Windows.Controls.Ribbon 2. 界面设 ...

  8. 分享Silverlight/WPF/Windows Phone一周学习导读(07月25日-07月31日)

    上周,微软发布Visual Studio LightSwitch 2011正式版,为商业应用开发人员推出一个新的应用开发产品.Visual Studio LightSwitch 2011 作为一种简单 ...

  9. wpf ui框架_RapidCAX 开源UI框架

    微信公众号:AnyCAD专注打造新一代图形平台,助每一个工业软件成功! RapidCAX UI框架 从零开始搭建CAD/CAE/CAM的UI框架是一件繁琐的事情:需要选组件.集成组件以及各种配置.若集 ...

最新文章

  1. Tensorflow实例：（卷积神经网络）LeNet-5模型
  2. 熬了一个通宵，终于解决了所有的事情，下线，睡觉
  3. Mac搭建Lua运行环境
  4. 使用JUnit 5 执行条件和并发测试
  5. php数组指定键名,查找数组中指定键名的值_PHP教程
  6. ios 应用商店_如何在预算范围内制作值得应用商店使用的iOS应用预览
  7. android 查看图片、保存图片
  8. LeetCode 5. 最长回文子串
  9. 负载均衡原理与实践详解 第三篇 服务器负载均衡的基本概念-网络基础
  10. 接口与事件之图形界面的认证登录
  11. Semantic Role Labeling (SRL)
  12. x64伪装进程路径 过PCHunter xxx ARK
  13. ONVIF协议开发使用
  14. Linux-shell篇之while用法
  15. 百度地图3D地球接入
  16. 耦合度如何降低耦合度
  17. 错误：1 error and 0 warnings potentially fixable with the `--fix` option. 报错问题解决方法
  18. 论文笔记二 Positive, Negative and Neutral: Modeling Implicit Feedback inSession-based News Recommendatio。
  19. diy公益拍卖会 杨宗纬吴尊林俊杰s.h.e等拼人气
  20. vue 视频播放(使用vue-video-player)

热门文章

  1. 关于ThinkPHP的一些编程技巧
  2. leetcode算法题--Is Subsequence
  3. leetcode算法题--分割等和子集★
  4. css 背景效果_css基础篇06--背景样式
  5. 基于前后端分离的Nginx+Tomcat动静分离
  6. 使用 TiKV 构建分布式类 Redis 服务
  7. MobPush精准把握用户的使用时间
  8. php: xampp安装对应的phalcon版本(3.2.2-php5.6)：比如redis-php5.6, php_igbinary-5.6
  9. Oracle存储过程创建及调用（转）
  10. window对象方法之setTimeout(),setInterval()