DevExpress 设计Ribbon界面

最新推荐文章于 2025-03-15 13:02:30 发布

whucv

最新推荐文章于 2025-03-15 13:02:30 发布

阅读量2.3w

点赞数 1

分类专栏： DevExpress

本文链接：https://blog.csdn.net/archielau/article/details/37544251

版权

DevExpress 专栏收录该内容

19 篇文章

订阅专栏

Ribbon上包含以下一些元素，如图所示：

DevExpress Dashboard RibbonUI

元素对应API：

Element	Ribbon API
Quick Access Toolbar	RibbonControl.Toolbar RibbonQuickAccessToolbar.ItemLinks
Application Button	RibbonControl.ShowApplicationButton RibbonControl.ApplicationButtonDropDownControl
Main pages	RibbonControl.Pages
Page Category	RibbonControl.Categories
Contextual pages	RibbonPageCategory.Pages
Page Groups	RibbonPage.Groups RibbonPageGroup.ItemLinks
Bar Item links	RibbonControl.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点滴学习--换肤

一、在项目下新建RibbonForm 命名为：useSkin

二、添加引用DevExpress.OfficeSkins
DevExpress.UserSkins.BonusSkins

三、将ribbonPage1的Text属性设置为：皮肤

ribbonPageGroup1的Text属性设置为：更换皮肤

在ribbonPageGroup1下新建个ribbonGalleryBarItem1，将其Caption的属性设置为：请选择您喜欢的皮肤，并添GalleryItemClick 事件：ribbonGalleryBarItem1_GalleryItemClick

四、在应用程序的主入口里添加：

static void Main()
        {
            //皮肤
            DevExpress.UserSkins.OfficeSkins.Register();
            DevExpress.UserSkins.BonusSkins.Register();
            DevExpress.Skins.SkinManager.EnableFormSkins();

            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Exercises.useSkin());
        }

五、添加命名空间using System.Xml;

在事件ribbonGalleryBarItem1_Click里添加代码：

private void ribbonGalleryBarItem1_Click(object sender, DevExpress.XtraBars.Ribbon.GalleryItemClickEventArgs e)
        {
            string name = string.Empty;
            string caption = string.Empty;
            if (ribbonGalleryBarItem1.Gallery == null) return;
            caption = ribbonGalleryBarItem1.Gallery.GetCheckedItems()[0].Caption;//主题的描述
            caption = caption.Replace("主题：", "");
            //name = bsiPaintStyle.Manager.PressedLink.Item.Tag.ToString();//主题的名称
            ribbonGalleryBarItem1.Caption = "主题：" + caption;

            XmlDocument doc = new XmlDocument();
            doc.Load("SkinInfo.xml");
            XmlNodeList nodelist = doc.SelectSingleNode("SetSkin").ChildNodes;
            foreach (XmlNode node in nodelist)
            {
                XmlElement xe = (XmlElement)node;//将子节点类型转换为XmlElement类型 
                if (xe.Name == "Skinstring")
                {
                    xe.InnerText = caption;
                }
            }

            doc.Save("SkinInfo.xml");
            //XtraMessageBox.Show("您选择了主题：" + caption);
        }

添加命名空间

using DevExpress.XtraBars.Helpers;
using DevExpress.LookAndFeel;

六、添加命名空间using DevExpress.XtraEditors;

在Load下添加代码：

public string defaultSkinName;//皮肤
        private void useSkin_Load(object sender, EventArgs e)
        {
            SkinHelper.InitSkinGallery(ribbonGalleryBarItem1);
            CheckFile();//检查文件
            GetXmlSkin();//获取xml主题
            UserLookAndFeel.Default.SetSkinStyle(defaultSkinName);//设置主题样式
            ribbonGalleryBarItem1.Caption = "主题：" + defaultSkinName;
        }

        #region 检查XML文件是否存在
        public void CheckFile()
        {
            try
            {
                if (System.IO.File.Exists("SkinInfo.xml") == false)
                {
                    //XtraMessageBox.Show("不存在XML");
                    CreateXml();
                }
            }
            catch (Exception ex)
            {
                XtraMessageBox.Show(ex.ToString(), "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        #region 创建XML文件

        public void CreateXml()
        {
            XmlDocument doc = new XmlDocument();
            //建立xml定义声明
            XmlDeclaration dec = doc.CreateXmlDeclaration("1.0", "utf-8", null);
            doc.AppendChild(dec);

            //创建根节点
            XmlElement root = doc.CreateElement("SetSkin");
            XmlElement rootone = doc.CreateElement("Skinstring");//皮肤


            //将one，two，插入到root节点下
            doc.AppendChild(root);
            root.AppendChild(rootone);
            doc.Save("SkinInfo.xml");
        }

        #endregion

        #region 读取Xml节点内容

        public void GetXmlSkin()
        {
            try
            {
                XmlDocument mydoc = new XmlDocument();
                mydoc.Load("SkinInfo.xml");
                XmlNode ressNode = mydoc.SelectSingleNode("SetSkin");
                defaultSkinName = ressNode.SelectSingleNode("Skinstring").InnerText;

            }
            catch (Exception ex)
            {
                XtraMessageBox.Show(ex.ToString(), "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        #endregion

        #endregion

好了，现在就可以为自己的窗体选择喜欢的皮肤了。

看一下效果吧。。。。

Look And Feel被类UserLookAndFeel类实现，每个支持该机理的控件，都有一项属性叫做LookAndFeel，通常，所有的控件都是使用该类的一个静态缺省对象。

例如在窗体中添加一个简单按钮DevExpress.XtraEditors.SimpleButton simpleButton1，该按钮就会有LookAndFeel属性：

DevExpress 中的LookAndFeel机理 - Castor - 趁年轻，多折腾~~

你要特别注意这个LookAndFeel下的UseDefaultLookAndFeel和 UseWindowsXPTheme，这两个属性能够否决所有其他的设置。

如果UseDefaultLookAndFeel被设置为True，则所有其他的设置将会被无视，将会采用默认的设置，那么默认的设置是什么呢？默认的设置又是可以定制的。这个看起来有点奇怪，其实慢慢看就会明白。

在工具箱中Component下拖动一个DefaultLookAndFeel控件（DevExpress.LookAndFeel.DefaultLookAndFeel defaultLookAndFeel1）
后，设置其属性，这个属性就会作为全局的默认属性，程序员就可以自行定制默认的LookAndFeel了。

这个时候你试试设置UseDefaultLookAndFeel会发现只能改为True（因为没有上级的LookAndFeel供其参考了），同时把UseWindowsXPTheme设置为False，然后修改一下SkinName，例如为Lilian，会发现简单按钮的外观发生了改变。在往其中添加控件，你会发现会自动使用Lilian外观：

现在，一旦我修改了defaultLookAndFeel1的SkinName，这四个控件的外观都会按统一的样式发生变化，有趣的是，这一改变是可以在运行时发生的，例如我们给simpleButton1添加事件：

private void simpleButton1_Click(object sender, EventArgs e)
{
this.defaultLookAndFeel1.LookAndFeel.SkinName = "iMaginary";
}

在运行过程就可以修改程序的外观了。

如果UseDefaultLookAndFeel被设置为False，控件的外观就会受到UseWindowsXPTheme的影响，如果说UseDefaultLookAndFeel是总统的话，则UseWindowsXPTheme就是副总统了。该属性决定了控件的外观是否受到XP样式的影响，当副总统说True的时候，并且系统恰好使用了XP主题，则UserLookAndFeel.Style的值就会被无视，而采用XP的主题。

修改简单按钮的的点击事件，试试分别在副总统说True和False的时候运行该代码：

private void simpleButton1_Click(object sender, EventArgs e)
{
this.defaultLookAndFeel1.LookAndFeel.Style = LookAndFeelStyle.Office2003;
}

你就会知道副总统还是管点事的。

如果真想修改Style，比较好的建议是在运行时修改其值，例如：

private void simpleButton1_Click(object sender, EventArgs e)
{
this.defaultLookAndFeel1.LookAndFeel.UseWindowsXPTheme = false;
this.defaultLookAndFeel1.LookAndFeel.Style = LookAndFeelStyle.Office2003;//要使用命名空间using DevExpress.LookAndFeel;

}
这样就可以不管控件的默认值了。

最后说说UserLookAndFeel.Style，它接收或者返回一个 LookAndFeelStyle的枚举值，其中有Flat、Office2003、UltraFlat等，具体可查看帮助文档。

呃，还忘记了SkinName，前面可以发现，该属性接收或者返回的是字符串，其实可行的字符串也就那几种吧，即Caramel、Money Twins、Lilian、iMaginary、DevExpress Dark Style、Black、Blue，如果设置其他值，会有什么后果呢？你自己试试吧