Ribbon For WPF的使用

最新推荐文章于 2024-05-20 17:54:23 发布
最新推荐文章于 2024-05-20 17:54:23 发布
阅读量193 收藏 1
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/Angle-Louis/archive/2012/12/11/2805738.html
版权

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的结构：如图

另外，我们需要了解下元素的层次结构

①快速访问工具栏（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

weixin_30567225
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF Ribbon插件开发框架
06-29
解压密码：liushiquan wpf UI插件式开发框架。使用.net 4.0 Framework,Telerik第三方控件开发，设计模式使用MVVM(使用的不正规，见笑了)，使用到反射、特性等。 使用配置文件可以配置UI插件、windows工具、插件方法的调用。最近工作较忙，没有时间弄插件管理插件，但直接使用配置文件也可正常使用，相信直接用于项目开发也是可以的，使用到的知识还不少，希望对大家有用。 现有插件管理插件、日志插件、灵活换肤插件、windows工具计算器、记事本等插件，调用dll方法实现框架关闭等。插件管理插件后面有时间再补完整，整个框架完成后，打算写下开发文章，公开和大家讨论下。
Ribbon for WPF 发布 和使用教程 (Microsoft)
Lassewang的成长历程
05-16 7597
之前写过几篇关于WPF4 中开发Ribbon 工具栏的文章，其中利用的是WPF Ribbon Control 控件库，开发出类似Office 2007 样式的Ribbon 工具栏。当然CodePlex 也提供了Fluent Ribbon Control Suite 项目可以写出Office 2010 样式的工具栏应用程序。8月2日微软正式发布了Microsoft Ribbon for WPF，
界面开发控件DotNetBar for WPF教程：MobileRibbon快速入门指南（下）
qq_42444778的博客
01-21 389
DotNetBar for WPF是一个用于创建专业WPF应用并拥有超过38个原生WPF控件的工具箱，其中包含了新的日程安排控件、Wpf-Ribbon控件、具有Office样式的Ribbon控件和Wpf-Dock控件以及具有OfficeOutlook样式的Navigation Pane控件等。对于日期输入，DotNetBar for WPF还提供了Date/Time Picker、Numeric Input、Month-calendar以及TabNavigation等控件。 点击下载最新版DotNetBa
在VS2012 中Ribbon for WPF的介绍和使用教程
weixin_42974146的博客
04-03 1600
参考：参考1 参考2 自Office2007开始，软件都逐渐地采用了Ribbon界面，一方面是时尚，如同许多厂商声称的那样，是 state of arts，另外，通过调查表明，Ribbon界面比传统的下拉栏菜单方式的工作效率提高了不少。到目前为止Ribbon界面只更新到了VS2010，在结合了众多工程师前辈的基础上，介绍一下Ribbon在VS2012版本中的使用。首先 下载 MSI安装程序。 ...
Fluent Ribbon Crack,将类似Office的功能区界面集成到wpf
q2315702359的博客
12-27 604
Fluent Ribbon Crack,将类似Office的功能区界面集成到wpf 　　Fluent Ribbon Crack最近引人注目的 GUI 更改之一是 Office 功能区。它允许用户在不牺牲任何功能的情况下增加对各种控件的可访问性。 　　寻求利用这些对象的软件工程师可以使用 Fluent Ribbon Control Suite 库，因为它允许创建定制的实用功能区。 　　Fluent Ribbon Crack????2315702359组件支持所有标准控件，例如下拉菜单、文本框或列表，以及
Microsoft Ribbon for WPF
03-01
若要自定义窗口，同时保留其标准功能，可以使用WindowChrome类。 WindowChrome类将窗口框架的功能分隔开来从视觉对象，并允许您控制的客户端和应用程序窗口的非工作区之间的边界。 WindowChrome类，可以将 WPF 通过...
Ribbon for WPF Source and Samples
12-16
Ribbon 开发实例 Ribbon — 功能区，功能区是新的 Microsoft ...Windows Ribbon是一个Windows（Windows Vista/Windows 7）自带的GUI构架，外形更加华丽，但也存在一部分使用者不适应，抱怨无法找到想要的功能的情形。
Microsoft Ribbon for WPF Source and Samples
10-11
windows上在wpf开发模式下支持ribbon的表现方式，把按钮放在ribbon上
DotnetBar For WPF 7.1.0.14 破解版
02-24
非常漂亮的控件，只支持 WPF 有Office2010风格的 Ribbon 还有其他很多 绝对可用，有中文说明。
从0开始Fluent Ribbon
weixin_73344835的博客
04-13 652
Fluent/Ribbon是微软在其最新桌面操作系统Windows 7中使用的图形用户界面。 Windows平台的进化，伴随着系统图形界面的重新设计。从Windows XP到Windows Vista，最大的革新就是Windows Aero的引入。在Windows 7 中，Aero被保留下来。 但是，在未来，Windows 7的图形用户界面将朝着Office 2007相同的方向，名称为Fluent/Ribbon。
Fluent.Ribbon 自带内容多语言化
君子居易
12-04 621
通过在显示功能区之前更改当前线程的区域设置，可以强制对Fluent.Ribbon多语言化。 官方给了两种多语言方式： 例1，可以通过System.Threading.Thread.CurrentThread.CurrentUICulture=new System.Globalization.CultureInfo（“de”） 将其更改为德语。我验证过，在我本地程序里面无效。 例2，还可以通...
Unity射击游戏开发教程：（19）控制生命进度条
网易搬砖选手
05-17 65
我们不希望当前的健康状况超过最大健康状况，因此我们使用 If Then 来检查此情况，如果发生这种情况，我们会将当前值设置为最大值。在此游戏对象中，我们将添加到 UI 图像中，这些图像将作为生命值栏的填充和轮廓。回到检查器，我们将脚本附加到健康栏，将填充图像分配给填充变量并将最大值设置为我们想要的值。我们需要初始化的变量是两个整数，分别是生命值“条”的最大值和玩家生命值的当前值。对于每个UI图像，我们只需将之前上传的精灵图像拖到填充图像中，因为它是白色的，所以我们可以将颜色更改为我们想要的任何颜色。
python+selenium - UI自动框架之封装log类
weixin_41708323的博客
05-16 282
每次调用log函数，会根据绝对路径生成日志文件在logs目录下面(在被调用的时候日志会输出到指定的文件），日志文件的格式是年月日.log；通过自定log类，能把执行过程记录到日志，方便检查和重现问题。
Ollama + (Anythingllm / Open WebUI / MaxKB)搭建本地大模型
最新发布
yong472727322的博客
05-20 485
重命名镜像（如果是通过代理下载的） docker tag ghcr.dockerproxy.com/open-webui/open-webui:main ghcr.io/open-webui/open-webui:main。3. 在[Service]下添加OLLAMA_MODELS环境变量，目录需要配置权限给【ollama用户及用户组】1. 进入配置默认目录：cd /etc/systemd/system/# 删除代理镜像（如果是通过代理下载的）2、（可选）使用代理拉取镜像。1、下载Ollama。
VC++6.0自定义实现日志记录到文件及界面显示
qwestw的专栏
05-15 250
1，实现日志记录到文件，支持日志文件大小限制，节省空间。2.2 编写ApendLog UI函数。2.1使用Edit控件，使用多行模式。2，实现记录到UI Edit控件。完整代码上传到资源，欢迎下载！
mainwindow.ui和mainwindow.h和ui_mainwindow.h这几个文件之间的联系是什么
qq_41570500的博客
05-18 371
qt编译报错信息member access into incomplete type 'Ui::
Leaflet【二】图层绘制——UI图层【点线面】& 矢量图层【img、svg】
共勉
05-16 794
Leaflet地图库中，图层绘制是构建交互式地图的重要部分。UI图层包含点、线、面，实现地图上的标记和路径规划。通过API，开发者可以定制图形样式及交互功能。矢量图层支持img和svg格式，用于展示清晰可缩放的复杂图标和自定义图形。Leaflet结合这些图层提供了一个强大的平台，以满足不同复杂度地图应用的需求。
绘唐3AIGC推文工具Version: 0.2.1
2401_84285498的博客
05-16 16
（GPT全模型及Claude全模型的理解支持）智能水印擦除技术，而非传统的区域模糊。（魔音工坊与微软SSML）：无需配置要求，免部署。：免魔法，免MJ账号。
30、QUiLoader 在程序运行时读取UI 文件中的信息
Viciower的博客
05-18 219
QUiLoader 在程序运行时读取UI 文件中的信息
ribbon wpf 小例子
09-29
Ribbon（功能区）是WPF（Windows Presentation Foundation）中的一种用户界面控件，它提供了类似于Microsoft Office中Ribbon界面的功能。下面是一个简单的Ribbon WPF小例子： 首先，我们需要在WPF应用程序的XAML文件中引入Ribbon控件的命名空间： ``` xmlns:r="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon" ``` 然后，在定义界面的主窗口中添加一个Ribbon控件： ``` <r:Ribbon> <!-- 在这里添加Ribbon的各个组件：选项卡、组、按钮等 --> </r:Ribbon> ``` 接下来，我们可以在Ribbon控件中添加选项卡和组来组织界面上的按钮和其他控件。例如： ``` <r:RibbonTab Header="主页"> <r:RibbonGroup Header="常用操作"> <r:Button Command="{x:Static local:MainWindow.MyCommand}" Content="保存" /> <!-- 在这里可以添加更多的按钮和其他控件 --> </r:RibbonGroup> </r:RibbonTab> ``` 这个例子中，我们创建了一个名为"主页"的选项卡，该选项卡下面有一个名为"常用操作"的组。在这个组中，我们添加了一个按钮，其命令绑定到MainWindow类中定义的MyCommand命令。 在应用程序的代码中，我们需要定义MyCommand命令，并在命令的执行函数中添加相应的逻辑。例如： ``` public partial class MainWindow : Window { public static ICommand MyCommand { get; } = new RelayCommand(ExecuteMyCommand); private static void ExecuteMyCommand(object parameter) { // 执行保存操作的逻辑 } } ``` 在这个例子中，我们使用了RelayCommand类来创建一个命令对象，并通过静态属性MyCommand在XAML中绑定。当按钮被点击时，命令的执行函数ExecuteMyCommand将被调用，我们可以在此函数中添加我们需要执行的保存操作的逻辑。 以上就是一个简单的Ribbon WPF小例子，其中我们展示了如何添加Ribbon控件、设置各个组件的属性以及命令的使用。通过这个例子，我们可以初步了解如何使用Ribbon控件来构建具有Microsoft Office风格的界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值