DevExpress 设计Ribbon界面

转载 2016年04月03日 13:56:47

Ribbon上包含以下一些元素,如图所示:

DevExpress Dashboard RibbonUI

元素对应API:

Element

Ribbon API

Quick Access ToolbarRibbonControl.Toolbar
RibbonQuickAccessToolbar.ItemLinks
Application ButtonRibbonControl.ShowApplicationButton
RibbonControl.ApplicationButtonDropDownControl
Main pagesRibbonControl.Pages
Page CategoryRibbonControl.Categories
Contextual pagesRibbonPageCategory.Pages
Page GroupsRibbonPage.Groups
RibbonPageGroup.ItemLinks
Bar Item linksRibbonControl.Items
BarItemLink.Item

1、首先新建一窗体工程,从工具栏“导航和布局Navigation&Layout”拖动RibbonControl到窗体,RibbonControl自动停靠到Form靠上的位置,如下图所示:

  Page:表示Ribbon的菜单项,参考Word2007的“开始”菜单(菜单下又分很多PageGroup,每一个PageGroup里可以包含多个功能项,如按钮、文本、编辑框等等)功能项和Quick Access快速访问实质是一样的,所以可以共用相同按钮或文本等控件。

  PageGroup:表示菜单下面的各个功能项,参考Word2007“开始”菜单下的“剪贴板”功能项。每一个PageGroup里可以包含多个功能项,如按钮、文本、编辑框等等

  Quick Access:表示快捷功能键,参考Word2007“开始”上面的快捷按钮图标。(相当于03下的工具栏)

新增:

  选中Page,右键点击可以新增Page或者新增属于本Page的PageGroup。

  我们先增加一个Page,并在第一个Page下的Group里新增一个按钮button。

删除:

  点击右RibbonControl右上角的三角符号 ,选择Run Designer,

  在第一项Ribbon Items里,可看到刚才新建的Page和PageGroup,在这里选中想要删除的项目,点击上面的Remove既可。

  Quick Access的新建和删除参考上述的步骤既可。

2、转换窗体为Ribbon窗体

选择RibbonControl控件的右上角的三角符号,选择Convert Form to Ribbonform 窗体会转换为Ribbon格式

要把DX图标换成自己的,修改RibbonControl.ApplicationICon即可

不显示快速访问this.ribbonControl1.ToolbarLocation = DevExpress.XtraBars.Ribbon.RibbonQuickAccessToolbarLocation.Hidden;


3、设置外观和样式

这个可以通过拖动DXXX Components组的DefaultLookAndFeel控件到窗体设计器来设置ribbon的皮肤。(我发现13.2.8试用版会影响解决方案的其他项目,所以要慎重哦,删除了仍有影响)


也可以通过设置控件自身UseDefaultLookAndFeel=false,然后设置自己的样式和外观。4

4、单击应用程序图标弹出菜单

所以是PopupMenu,其实任何一个DropDown形式的都可以

拖动一个PopupMenu控件到窗体设计器,将ribbonControl.ApplicationButtonDropDownControl=popupMenu1

单击ApplicationButton就会出现弹出菜单了。


四、新增图片资源

  从工具箱内拖住ImageCollection控件到Form上,类似于DefaultLookAndFeel,在Form下方出现新增控件,右键点击此控件,选中Add Image,可从本地获取相关图标,我在这里新增了四个小图标,如下图所示:

  下面我想要在第一个PageGroup里的Button前面新添加一个小图标。

  (1)查看Ribbon Control的属性,将imagecollection 赋给Images属性。

  (2)选中button,查看其属性,选中ImageIndex属性,选择需要添加的图标既可。

如下图所示:

DevExpress 设计Ribbon界面

1、首先新建一窗体工程,从工具栏
  • whucv
  • whucv
  • 2014年07月08日 00:11
  • 8518

DevExpress学习笔记(一)-Ribbon

DevExpress学习笔记 http://www.cnblogs.com/liwei81730/archive/2011/12/21/2296203.html Ribbon 之...
  • ltrelax
  • ltrelax
  • 2012年08月13日 10:28
  • 1198

dev中RibbonForm1中的ribbon控件属性设置

隐藏下啦菜单:ShowToolbarCustomizeItem设为false 头部图片设置:ApplicationIcon选择新的图片...
  • huyanliang
  • huyanliang
  • 2017年07月14日 10:48
  • 369

Devexpress Dxribbon风格窗体设计

转自:http://blog.163.com/bin0315@126/blog/static/406626422012844271447/ Delphi2010及其以后的版本,已经有了RIBBOB风格...
  • ghs79
  • ghs79
  • 2017年02月21日 17:14
  • 1071

DevExpress控件使用

零零散散的先总结一下吧 1.TextEditor(barEditItem)取文本 string editValue = barEditItem1.EditValue.ToString(); ...
  • davinciyxw
  • davinciyxw
  • 2010年05月18日 15:14
  • 24610

DevExpress Ribboncontrol 去掉顶部菜单栏

this.ribbonControl1.ToolbarLocation = DevExpress.XtraBars.Ribbon.RibbonQuickAccessToolbarLocation.Hi...
  • sxz787899
  • sxz787899
  • 2017年03月13日 15:53
  • 621

适合做项目界面抬头的部分---RibbonControl

今天介绍的是Dev的控件RibbconControl: 功能: 这款控件适合做软件的抬头部分 来源: Ribbcon这个词问了同事才知道,office这些软件上面一堆的小按钮这种类似的叫Rib...
  • PanPen120
  • PanPen120
  • 2015年07月10日 13:27
  • 1593

C# 开发Ribbon风格组件RibbonControl & Demo

  • 2012年07月10日 09:45
  • 421KB
  • 下载

DevExpress 使用 XtraTabbedMdiManager 控件以 Tab样式加载 Mdi窗体并合并 RibbonControl 解决方案

最近刚接触到 DevExpress 13.1 这个皮肤组件, 觉得相当好用 于是开始准备搭建 个小应用的主体框架. 找了好久的就是没找到对应的文章来讲解这一块.. 翻了他们主网站上人家问的,以及...
  • fangtaocn
  • fangtaocn
  • 2016年01月28日 10:35
  • 2624

DevExpress学习笔记(二)-NavBarControl

DevExpress学习笔记 http://www.cnblogs.com/liwei81730/archive/2011/12/22/2298296.html NavBarContr...
  • ltrelax
  • ltrelax
  • 2012年08月13日 10:35
  • 2838
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DevExpress 设计Ribbon界面
举报原因:
原因补充:

(最多只允许输入30个字)