DevExpress皮肤样式

转载

mob604756fe27f4 2019-01-23 15:35:00

文章标签 控件初始化界面切换 i++ 点击事件 文章分类 C/C++ 后端开发

【时间】

2016-02-15 11:41:11 天气晴没有雾霾难得的好天气！！！

【工具】

（1）Visual Studio 2015

（2）DevExpress15.2.3

【感言】

一直以来都在对微软提供的灰色窗体及控件很反感，但是自己能力水平有限对网上很多大神提出的换肤方案都不甚理解。于是在茫茫的网海中各种百度、各种谷歌去寻找最简单的换肤方案，期间自学过WPF，WPF虽然能实现界面和业务逻辑代码的分离，但是WPF网上的资料很少且用户群体也很少，遇到问题无法快速解决掉。经过内心的一番挣扎，决定先将WPF放一放，但是WPF给我传递给我一个思想确实很震撼的，程序员应该把编程的重心放到程序的逻辑上而不是炫酷界面的设计，炫酷界面的设计应该交由专业美工人员。正是在这一思想的影响下我决定试用下专业的.Net控件组，通过一番了解DevExpress进入了我的视野，下面我将系统的学习下DevExpress控件组，并将学习心得和编程技巧记录于此，希望能给DevExpress爱好者起到抛砖引玉的作用，同时也希望大家多提宝贵意见，共同学习共同进步。

【操作方法】

Visual Studio 2015和DevExpress15.2.3的安装我就不说了，有不明白的可以百度、谷歌一下，遍地都是……

首先说明下：(1)Visual Studio 2015以后简称VS2015 (2)DevExpress15.2.3以后简称DV15.2.3

（1）启动VS2015，选择[文件]>>[新建]>>[项目]，按下图选择或填写，名称的话随便，仅仅是测试而已。

DevExpress皮肤样式_初始化

（2）按照DevExpress给出的创建工程向导创建个简单的空的winform程序，如下图：

DevExpress皮肤样式_i++_02

（3）打开新建项目的Program.cs文件，整个项目预览如下图：

DevExpress皮肤样式_界面切换_03

从上图可以看出DevExpress.BonusSkins.v15.2这个皮肤样式dll已经默认引入到了新建的项目中，并且从打开的Program.cs文件也可以看出BonusSkins已经注册并启用了窗体皮肤功能，启用皮肤样式是DevExpress默认样式：DevExpress Style。

（3）方法一：切换到窗体设计窗口通过修改窗体的属性来控制窗体皮肤的样式，注意默认情况下修改窗体样式会影响到窗体中的所有控件的样式。

例如本例将窗体皮肤修改成Office 2010 Blue，要想使窗体效果显现出来必须将UseDefaultLookAndFeel属性改为False。

DevExpress皮肤样式_初始化_04

（4）方法二：修改Program.cs文件中的程序，如下图，道理和方法一一样，只不过用代码实现而已。但是这种方式在窗体设计窗口不能预览的到的，推荐使用方法一。

DevExpress皮肤样式_界面切换_05

（5）注意：DevExpress默认提供的控件都有个LookAndFeel属性，修改其中的属性值可以单个更改控件的皮肤样式使其与窗体或其他控件不同。例如：

DevExpress皮肤样式_界面切换_06

=======================================================================================================

　　最近要用到devExpress，一句话，很好很强大，比起vs自带的winform界面，种类和花样要多了不少，然而，强力的功能带来了庞大的信息量，所以我打算通过一些小模块来和大家一起对它进行探讨和研究。

　　今天先研究一下他的换肤功能。在控件中，其默认提供了18中风格让我们选择，如下图：

DevExpress皮肤样式_界面切换_07

　　下面就看看怎么实现让界面切换到选中风格的功能。先建立一个项目，引入一个button和一个grid如下图：

DevExpress皮肤样式_点击事件_08

　　由于在devExpress.skins.skinManager.Default.Skins中只有13中皮肤所以我们要手动添加5种，找到Designer.cs文件，添加下列代码：

DevExpress皮肤样式_控件_09

this.iPaintStyle.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");

this.iPaintStyle.LinksPersistInfo.AddRange(new DevExpress.XtraBars.LinkPersistInfo[] {

new DevExpress.XtraBars.LinkPersistInfo(this.ipsDefault),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsWXP),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsOXP),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsO2K),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsO3)});

private DevExpress.XtraBars.BarButtonItem ipsWXP;
        private DevExpress.XtraBars.BarButtonItem ipsOXP;
        private DevExpress.XtraBars.BarButtonItem ipsO2K;
        private DevExpress.XtraBars.BarButtonItem ipsO3;
        private DevExpress.XtraBars.BarButtonItem ipsDefault;


        this.ipsDefault = new DevExpress.XtraBars.BarButtonItem();
        this.ipsWXP = new DevExpress.XtraBars.BarButtonItem();
        this.ipsOXP = new DevExpress.XtraBars.BarButtonItem();
        this.ipsO2K = new DevExpress.XtraBars.BarButtonItem();
        this.ipsO3 = new DevExpress.XtraBars.BarButtonItem();


            // 
            // ipsDefault
            // 
            this.ipsDefault.Caption = "Default";
            this.ipsDefault.CategoryGuid = new         System.Guid("d0173875-    bf7b-4740-b252-5047db62606c");
            this.ipsDefault.Description = "Default";
            this.ipsDefault.Id = 15;
            this.ipsDefault.Name = "ipsDefault";
            this.ipsDefault.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsWXP
            // 
            this.ipsWXP.Caption = "Windows XP";
            this.ipsWXP.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsWXP.Description = "WindowsXP";
            this.ipsWXP.Id = 11;
            this.ipsWXP.ImageIndex = 5;
            this.ipsWXP.Name = "ipsWXP";
            this.ipsWXP.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsOXP
            // 
            this.ipsOXP.Caption = "Office XP";
            this.ipsOXP.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsOXP.Description = "OfficeXP";
            this.ipsOXP.Id = 12;
            this.ipsOXP.ImageIndex = 3;
            this.ipsOXP.Name = "ipsOXP";
            this.ipsOXP.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsO2K
            // 
            this.ipsO2K.Caption = "Office 2000";
            this.ipsO2K.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsO2K.Description = "Office2000";
            this.ipsO2K.Id = 13;
            this.ipsO2K.ImageIndex = 4;
            this.ipsO2K.Name = "ipsO2K";
            this.ipsO2K.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsO3
            // 
            this.ipsO3.Caption = "Office 2003";
            this.ipsO3.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsO3.Description = "Office2003";
            this.ipsO3.Id = 14;
            this.ipsO3.ImageIndex = 6;
            this.ipsO3.Name = "ipsO3";
            this.ipsO3.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);

DevExpress皮肤样式_点击事件_10

　　然后将其添加到barManager的项中

DevExpress皮肤样式_控件_11

this.barManager1.Items.AddRange(new DevExpress.XtraBars.BarItem[] {
            this.barSubItem1,
            this.barSubItem2,
            this.ipsWXP,
            this.ipsOXP,
            this.ipsO2K,
            this.ipsO3,
            this.ipsDefault,
            this.iPaintStyle});

DevExpress皮肤样式_控件_12

　　然后添加这几种风格的点击事件

DevExpress皮肤样式_初始化_13

private void ips_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            barManager1.GetController().PaintStyleName = e.Item.Description;
            InitPaintStyle(e.Item);
            barManager1.GetController().ResetStyleDefaults();
            DevExpress.LookAndFeel.UserLookAndFeel.Default.SetDefaultStyle();
        }

DevExpress皮肤样式_初始化_14

　　然后将皮肤初始化并为其注册选择事件

DevExpress皮肤样式_点击事件_15

private void iPaintStyleStyle_Init()
        {
            BarItem item = null;
            for (int i = 0; i < barManager1.Items.Count; i++)
            {
                if (barManager1.Items[i].Description == barManager1.GetController().PaintStyleName)
                    item = barManager1.Items[i];
            }
            InitPaintStyle(item);
        }

        private void InitPaintStyle(BarItem item)
        {
            if (item == null)
            {
                iPaintStyle.ImageIndex = item.ImageIndex;
                iPaintStyle.Caption = item.Caption;
                iPaintStyle.Hint = item.Description;
            }
        }

        void InitSkins()
        {
            barManager1.ForceInitialize();
            foreach (DevExpress.Skins.SkinContainer cnt in DevExpress.Skins.SkinManager.Default.Skins)
            {
                BarButtonItem item = new BarButtonItem(barManager1, skinMask + cnt.SkinName);
                iPaintStyle.AddItem(item);
                item.ItemClick += new ItemClickEventHandler(OnSkinClick);

            }
        }

        void OnSkinClick(Object sender, ItemClickEventArgs e)
        {
            string skinName = e.Item.Caption.Replace(skinMask, "");
            DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(skinName);
            barManager1.GetController().PaintStyleName = "Skin";
            iPaintStyle.Caption = iPaintStyle.Hint = e.Item.Caption;
            iPaintStyle.Hint = iPaintStyle.Caption;
            iPaintStyle.ImageIndex = -1;
        }

DevExpress皮肤样式_点击事件_16

　　大功告成：初始化winform的时候调用下面两个方法就可以进行换肤了

iPaintStyleStyle_Init();
            InitSkins();

　　效果如下：

DevExpress皮肤样式_控件_17

DevExpress皮肤样式_初始化_18

DevExpress皮肤样式_i++_19

　　上面的是比较麻烦的办法，我们也可以用他自身集成的换肤功能来实现这一效果：在winform中拉一个ribbonControl控件，在page页中添加ribbonGalleryBarItem。

DevExpress皮肤样式_初始化_20

　　然后加入引用

using DevExpress.XtraBars.Helpers;

　　在窗口加载时让刚添加的item设置为皮肤选项：

private void Form1_Load(object sender, EventArgs e)
        {
            SkinHelper.InitSkinGallery(ribbonGalleryBarItem1);
            this.ribbonControl1.ToolbarLocation = DevExpress.XtraBars.Ribbon.RibbonQuickAccessToolbarLocation.Hidden;
        }

　　这样就可以实现下面的效果了：

DevExpress皮肤样式_界面切换_21 　　 DevExpress皮肤样式_初始化_22 　　 DevExpress皮肤样式_初始化_23

　　今天先研究一下他的换肤功能。在控件中，其默认提供了18中风格让我们选择，如下图：

DevExpress皮肤样式_i++_24

　　下面就看看怎么实现让界面切换到选中风格的功能。先建立一个项目，引入一个button和一个grid如下图：

DevExpress皮肤样式_控件_25

　　由于在devExpress.skins.skinManager.Default.Skins中只有13中皮肤所以我们要手动添加5种，找到Designer.cs文件，添加下列代码：

DevExpress皮肤样式_控件_26

this.iPaintStyle.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");

this.iPaintStyle.LinksPersistInfo.AddRange(new DevExpress.XtraBars.LinkPersistInfo[] {

new DevExpress.XtraBars.LinkPersistInfo(this.ipsDefault),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsWXP),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsOXP),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsO2K),

new DevExpress.XtraBars.LinkPersistInfo(this.ipsO3)});

private DevExpress.XtraBars.BarButtonItem ipsWXP;
        private DevExpress.XtraBars.BarButtonItem ipsOXP;
        private DevExpress.XtraBars.BarButtonItem ipsO2K;
        private DevExpress.XtraBars.BarButtonItem ipsO3;
        private DevExpress.XtraBars.BarButtonItem ipsDefault;


        this.ipsDefault = new DevExpress.XtraBars.BarButtonItem();
        this.ipsWXP = new DevExpress.XtraBars.BarButtonItem();
        this.ipsOXP = new DevExpress.XtraBars.BarButtonItem();
        this.ipsO2K = new DevExpress.XtraBars.BarButtonItem();
        this.ipsO3 = new DevExpress.XtraBars.BarButtonItem();


            // 
            // ipsDefault
            // 
            this.ipsDefault.Caption = "Default";
            this.ipsDefault.CategoryGuid = new         System.Guid("d0173875-    bf7b-4740-b252-5047db62606c");
            this.ipsDefault.Description = "Default";
            this.ipsDefault.Id = 15;
            this.ipsDefault.Name = "ipsDefault";
            this.ipsDefault.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsWXP
            // 
            this.ipsWXP.Caption = "Windows XP";
            this.ipsWXP.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsWXP.Description = "WindowsXP";
            this.ipsWXP.Id = 11;
            this.ipsWXP.ImageIndex = 5;
            this.ipsWXP.Name = "ipsWXP";
            this.ipsWXP.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsOXP
            // 
            this.ipsOXP.Caption = "Office XP";
            this.ipsOXP.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsOXP.Description = "OfficeXP";
            this.ipsOXP.Id = 12;
            this.ipsOXP.ImageIndex = 3;
            this.ipsOXP.Name = "ipsOXP";
            this.ipsOXP.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsO2K
            // 
            this.ipsO2K.Caption = "Office 2000";
            this.ipsO2K.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsO2K.Description = "Office2000";
            this.ipsO2K.Id = 13;
            this.ipsO2K.ImageIndex = 4;
            this.ipsO2K.Name = "ipsO2K";
            this.ipsO2K.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);
            // 
            // ipsO3
            // 
            this.ipsO3.Caption = "Office 2003";
            this.ipsO3.CategoryGuid = new System.Guid("d0173875-bf7b-4740-b252-5047db62606c");
            this.ipsO3.Description = "Office2003";
            this.ipsO3.Id = 14;
            this.ipsO3.ImageIndex = 6;
            this.ipsO3.Name = "ipsO3";
            this.ipsO3.ItemClick += new DevExpress.XtraBars.ItemClickEventHandler(this.ips_ItemClick);

DevExpress皮肤样式_点击事件_27

　　然后将其添加到barManager的项中

DevExpress皮肤样式_初始化_28

this.barManager1.Items.AddRange(new DevExpress.XtraBars.BarItem[] {
            this.barSubItem1,
            this.barSubItem2,
            this.ipsWXP,
            this.ipsOXP,
            this.ipsO2K,
            this.ipsO3,
            this.ipsDefault,
            this.iPaintStyle});

DevExpress皮肤样式_点击事件_29

　　然后添加这几种风格的点击事件

DevExpress皮肤样式_控件_30

private void ips_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            barManager1.GetController().PaintStyleName = e.Item.Description;
            InitPaintStyle(e.Item);
            barManager1.GetController().ResetStyleDefaults();
            DevExpress.LookAndFeel.UserLookAndFeel.Default.SetDefaultStyle();
        }

DevExpress皮肤样式_初始化_31

　　然后将皮肤初始化并为其注册选择事件

DevExpress皮肤样式_i++_32

private void iPaintStyleStyle_Init()
        {
            BarItem item = null;
            for (int i = 0; i < barManager1.Items.Count; i++)
            {
                if (barManager1.Items[i].Description == barManager1.GetController().PaintStyleName)
                    item = barManager1.Items[i];
            }
            InitPaintStyle(item);
        }

        private void InitPaintStyle(BarItem item)
        {
            if (item == null)
            {
                iPaintStyle.ImageIndex = item.ImageIndex;
                iPaintStyle.Caption = item.Caption;
                iPaintStyle.Hint = item.Description;
            }
        }

        void InitSkins()
        {
            barManager1.ForceInitialize();
            foreach (DevExpress.Skins.SkinContainer cnt in DevExpress.Skins.SkinManager.Default.Skins)
            {
                BarButtonItem item = new BarButtonItem(barManager1, skinMask + cnt.SkinName);
                iPaintStyle.AddItem(item);
                item.ItemClick += new ItemClickEventHandler(OnSkinClick);

            }
        }

        void OnSkinClick(Object sender, ItemClickEventArgs e)
        {
            string skinName = e.Item.Caption.Replace(skinMask, "");
            DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(skinName);
            barManager1.GetController().PaintStyleName = "Skin";
            iPaintStyle.Caption = iPaintStyle.Hint = e.Item.Caption;
            iPaintStyle.Hint = iPaintStyle.Caption;
            iPaintStyle.ImageIndex = -1;
        }

DevExpress皮肤样式_控件_33

　　大功告成：初始化winform的时候调用下面两个方法就可以进行换肤了

iPaintStyleStyle_Init();
            InitSkins();

　　效果如下：

DevExpress皮肤样式_点击事件_34

DevExpress皮肤样式_i++_35

DevExpress皮肤样式_初始化_36

　　上面的是比较麻烦的办法，我们也可以用他自身集成的换肤功能来实现这一效果：在winform中拉一个ribbonControl控件，在page页中添加ribbonGalleryBarItem。

DevExpress皮肤样式_初始化_37

　　然后加入引用

using DevExpress.XtraBars.Helpers;

　　在窗口加载时让刚添加的item设置为皮肤选项：

private void Form1_Load(object sender, EventArgs e)
        {
            SkinHelper.InitSkinGallery(ribbonGalleryBarItem1);
            this.ribbonControl1.ToolbarLocation = DevExpress.XtraBars.Ribbon.RibbonQuickAccessToolbarLocation.Hidden;
        }

　　这样就可以实现下面的效果了：

DevExpress皮肤样式_控件_38 　　 DevExpress皮肤样式_点击事件_39 　　 DevExpress皮肤样式_初始化_40