皮肤列表和皮肤库允许用户选择皮肤。本文介绍如何在功能区中显示“皮肤列表”或“皮肤库”并对其进行自定义。
DevExpress演示中心中的大多数应用程序都允许您选择皮肤。例如，运行XtraGrid演示并导航到皮肤功能区页面以更改当前皮肤。

在功能区UI中显示皮肤列表或皮肤库

使用以下栏项将相应的UI元素添加到功能区UI：“Skin List, Skin Gallery”、“Skin Palette List”和“Skin Palette Gallery”。在RibbonPageGroup上单击鼠标右键，然后调用相应的命令在设计时添加“ Skin List ”或“Skin Gallery”。

Skin List

A Skin List (SkinDropDownButtonItem) is a drop-down menu that displays application skins.


Skin Gallery

A Skin Gallery (SkinRibbonGalleryBarItem) is an in-ribbon gallery that displays skins. Skins in the gallery are grouped into categories.

Skin Palette List

A Skin Palette List (SkinPaletteDropDownButtonItem) allows users to select a color palette for a vector skin.

Skin Palette Gallery

A Skin Palette Gallery (SkinPaletteRibbonGalleryBarItem) allows users to select a color palette in an embedded or dropdown gallery.

Example

using DevExpress.XtraBars;
using DevExpress.XtraBars.Ribbon;namespace DXApplication20 {public partial class Form1 : RibbonForm {public Form1() {InitializeComponent();skinPageGroup.ItemLinks.Add(new SkinDropDownButtonItem());skinPageGroup.ItemLinks.Add(new SkinRibbonGalleryBarItem());colorPalettePageGroup.ItemLinks.Add(new SkinPaletteDropDownButtonItem());colorPalettePageGroup.ItemLinks.Add(new SkinPaletteRibbonGalleryBarItem());}}
}

Display Advanced Skin Options

显示高级skin选项

以下示例演示如何显示与高级皮肤设置相对应的预先设计的功能区UI命令：

using DevExpress.XtraBars;
using DevExpress.XtraBars.Helpers;namespace DXRibbonSkinSekector {public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm {BarCheckItem bciTrackWindowsAppMode, bciOriginalPalette, bciTrackWindowsAccentColor;BarButtonItem bbiSystemAccentColor, bbiAccentCustomColor2;public Form1() {InitializeComponent();bciTrackWindowsAppMode = new BarCheckItem();bciOriginalPalette = new BarCheckItem();bciTrackWindowsAccentColor = new BarCheckItem();bbiSystemAccentColor = new BarButtonItem();bbiAccentCustomColor2 = new BarButtonItem();advancedOptionsGroup.ItemLinks.Add(bciTrackWindowsAppMode);advancedOptionsGroup.ItemLinks.Add(bciOriginalPalette);advancedOptionsGroup.ItemLinks.Add(bciTrackWindowsAccentColor);advancedOptionsGroup.ItemLinks.Add(bbiSystemAccentColor);/** "The Bezier" skin supports the second accent color.* Other skins do not support the second accent color.*/advancedOptionsGroup.ItemLinks.Add(bbiAccentCustomColor2);// Initializes corresponding skin settings/selectors.SkinHelper.InitTrackWindowsAppMode(bciTrackWindowsAppMode);SkinHelper.InitResetToOriginalPalette(bciOriginalPalette);SkinHelper.InitTrackWindowsAccentColor(bciTrackWindowsAccentColor);SkinHelper.InitCustomAccentColor(Ribbon.Manager, bbiSystemAccentColor);SkinHelper.InitCustomAccentColor2(Ribbon.Manager, bbiAccentCustomColor2);}}
}

Hide Specific Items And Groups

隐藏特定项目和组
下面的步骤描述了如何隐藏单个皮肤。

• Create a string array that contains unwanted skin names. These names can be full (e.g., “Office 2016 Colorful”) or partial (e.g., “2007”).

string[] skinsToHide = { "Seven Classic", "DevExpress Style", "Dark", "2010", "2007", "Sharp" };

• Define a custom method that will iterate through skin items and hide unwanted ones.

private void HideGalleryItemsByCaptions(RibbonGalleryBarItem galleryItem, string[] skinsToHide) {var allItems = galleryItem.Gallery.GetAllItems();foreach (GalleryItem item in allItems) {if (skinsToHide.Contains(item.Caption))item.Visible = false;}
}

• Use the form or UserControl Load event handler to call your method.

this.Load += ucRibbon_Load;void ucRibbon_Load(object sender, EventArgs e) {HideGalleryItemsByCaptions(skinRibbonGalleryBarItem1, skinsToHide);
}

To hide an entire skin group, use the code sample below.
要隐藏整个皮肤组，请使用下面的代码示例。

void ucRibbon_Load(object sender, EventArgs e) {skinRibbonGalleryBarItem1.Gallery.Groups.Remove(skinRibbonGalleryBarItem1.Gallery.Groups.OfType<GalleryItemGroup>().First(x => String.Equals(x.Caption, "Bonus Skins")));
}

The following example demonstrates how to rename and hide gallery groups in SkinDropDownButtonItem:
以下示例演示如何在SkinDropDownButtonItem中重命名和隐藏图库组：

using System.Linq;
using DevExpress.XtraBars;
using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraBars.Ribbon.Gallery;
using DevExpress.XtraBars.Helpers;namespace DXApplication20 {public partial class Form1 : RibbonForm {SkinDropDownButtonItem skinDropDownButtonItem;public Form1() {InitializeComponent();skinDropDownButtonItem = new SkinDropDownButtonItem(ribbonControl1.Manager);skinPageGroup.ItemLinks.Add(skinDropDownButtonItem);}private void Form1_Load(object sender, System.EventArgs e) {HideItems(skinDropDownButtonItem);}void HideItems(SkinDropDownButtonItem skinItem) {GalleryControlGallery gallery = ((skinItem.DropDownControl as SkinPopupControlContainer).Controls.OfType<GalleryControl>().FirstOrDefault()).Gallery;gallery.Groups[0].Caption = "My Custom Caption";gallery.Groups[1].Visible = false;gallery.Groups[2].Visible = false;}}
}

The following example demonstrates how to hide the specified groups from SkinPaletteDropDownButtonItem:
以下示例演示如何从SkinPartiteDropDownButtonItem中隐藏指定的组：

void HideSkins2(SkinPaletteDropDownButtonItem skinItem, string[] palettesToHide) {var groups = (skinItem.DropDownControl as GalleryDropDown).Gallery.Groups;for(var i = 0; i < groups.Count; i++) {var group = groups[i];if(group == null) {continue;}for(var j = 0; j < group.Items.Count; j++) {var item = group.Items[j];if(item == null) {continue;}foreach(var palette in palettesToHide) {if(item.Caption.Contains(palette)) {item.Visible = false;}}if(!group.HasVisibleItems())group.Visible = false;}}
}

Remove Item Grouping

To remove item grouping, add a new gallery group and populate it with all existing gallery items. Then, you can remove all gallery groups except for your new custom group – as illustrated in the code sample below.
若要删除项目分组，请添加一个新的库组，并用所有现有库项目填充该组。然后，您可以删除除新的自定义组之外的所有库组，如下面的代码示例所示。

void ucRibbon_Load(object sender, EventArgs e) {RemoveGrouping();
}void RemoveGrouping() {GalleryItemGroup group = new GalleryItemGroup() { Caption = "Available Skins" };skinRibbonGalleryBarItem1.Gallery.Groups.Insert(0, group);foreach(var item in skinRibbonGalleryBarItem1.Gallery.GetAllItems()) {skinRibbonGalleryBarItem1.Gallery.Groups[0].Items.Add(item);}while(skinRibbonGalleryBarItem1.Gallery.Groups.Count > 1)skinRibbonGalleryBarItem1.Gallery.Groups.Remove(skinRibbonGalleryBarItem1.Gallery.Groups.Last());
}

Change Captions and Icons Manually

手动更改标题和图标
To change captions and glyphs of items within a Ribbon skin gallery, iterate through gallery items and modify the following properties:
要更改功能区皮肤库中项目的标题和图示符，请遍历库项目并修改以下属性：

• GalleryItem.Caption — Gets or sets the item’s caption. 获取或设置项的标题
• GalleryItem.Hint — Gets a hint associated with the gallery item. 获取与库项目关联的提示。
• GalleryItem.Description — Gets or sets the item’s description.获取或设置项的描述。
• GalleryItem.ImageOptions.SvgImage — Gets or sets a vector image. The vector image has priority over the raster image.获取或设置矢量图像。矢量图像的优先级高于光栅图像。
• GalleryItem.ImageOptions.Image — Gets or sets a raster image. To display a custom raster image, nullify the default vector image. 获取或设置光栅图像。若要显示自定义光栅图像，请使默认矢量图像无效。
• GalleryItem.ImageOptions.HoverImage — Gets or sets a raster image displayed when the mouse pointer hovers the item. 获取或设置鼠标指针悬停项目时显示的光栅图像。

void ucRibbon_Load(object sender, EventArgs e) {CustomizeItems(skinRibbonGalleryBarItem1);
}
void CustomizeItems(SkinRibbonGalleryBarItem target) {foreach(var item in target.Gallery.GetAllItems()) {if(item.Caption == "DevExpress Dark Style") {item.Caption = item.Hint = "Default Skin";item.Description = "The default skin";// We recommend that you use vector images.item.ImageOptions.SvgImage = SvgImage.FromResources("DXApplication1.Resources.Driving.svg", typeof(Form1).Assembly);// The vector image has priority over the raster image.// To assign a raster image, nullify the default vector image.item.ImageOptions.SvgImage = null;item.ImageOptions.Image = DevExpress.Images.ImageResourceCache.Default.GetImage("office2013/miscellaneous/colors_16x16.png");item.ImageOptions.HoverImage = DevExpress.Images.ImageResourceCache.Default.GetImage("office2013/miscellaneous/colors_32x32.png");}}
}

Obtain Active Skin

The following example demonstrates how to get the active skin name:

string activeSkinName = DevExpress.UserLookAndFeel.Default.ActiveSkinName;