DevExpress学习笔记(一)-Ribbon

DevExpress学习笔记

Ribbon

之前一直做Web开发，对于Asp.net、JavaScript、EXTJS等技术略懂一二，最近可能有一个项目会用到winform进行开发，虽然以前也用Winform做过一些小程序（包括使用MFC等），但此次需要用到第三方的界面开发控件DevExpress，这个就没什么底了，于是想到先做下技术调研工作。

有人说会做WebForm，那么做WinForm就不会有问题了。我觉得并不是那么一回事，开发WinForm有一套自己的研发思路，和WebForm不尽相同。要不然怎么会有B/S系统和C/S系统的区分呢。

大致翻了些资料，觉得整套Dev框架可以说是包罗万象，比较重要的组件有XtraBars、XtraGrid、XtraEditors、XtraTreeList等，先从较为简单的XtraBars入手，研究下较为流行的RibbonBar。

开发环境为：VS2010+DevExpress V11.1。

首先打开Visual Studio，新建一个WinForm的工程，如下图所示：

 

一 管理菜单项

从左边的工具箱中拖一个 RibbonControl组件放置到Form上，RibbonControl自动停靠到Form靠上的位置，如下图所示：

 

Page：表示Ribbon的菜单项，参考Word2007的“开始”菜单

PageGroup：表示菜单下面的各个功能项，参考Word2007“开始”菜单下的“剪贴板”功能项。

Quick Access:表示快捷功能键，参考Word2007“开始”上面的快捷按钮图标。

新增：

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

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

 

删除：

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

 

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

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

二 改变外观

从工具箱内拖住DefaultLookAndFeel控件到Form上，发现在Form的下方出现此控件，此时修改这个控件的属性既可实现对RibbonContrl改变外观操作。

如下所示：

 

 

三 新增图片资源

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

 

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

（1）    查看Ribbon Control的属性，将imagecollection 赋给Images属性。

（2）    选中button，查看其属性，选中ImageIndex属性，选择需要添加的图标既可。

如下图所示：