添加和自定义带状皮肤列表和皮肤库

---

立即下载DevExpress WinForms

皮肤列表和皮肤库是允许用户选择皮肤的。本文介绍如何在功能区中显示皮肤列表或皮肤库并对其进行自定义。

提示：DevExpress Demo Center中的大多数应用程序都允许您选择皮肤。例如，运行XtraGrid演示并导航到Skins功能区页面可以更改当前皮肤。

在Ribbon UI中显示皮肤列表或皮肤库

使用以下栏项将相应的 UI 元素添加到 Ribbon UI：皮肤列表、皮肤库、皮肤调色板列表、皮肤调色板库，右键单击RibbonPageGroup并调用相应的命令可以在设计时添加外观列表或外观库。

皮肤列表

皮肤列表 ( SkinDropDownButtonItem) 是一个显示应用程序皮肤的下拉菜单。

皮肤库

 皮肤库 ( SkinRibbonGalleryBarItem) 是一个显示皮肤的功能区库，库中的皮肤按类别分组。

皮肤调色板列表

皮肤调色板列表 ( SkinPaletteDropDownButtonItem) 允许用户为矢量皮肤选择调色板。

皮肤调色板库

皮肤调色板库 ( SkinPaletteRibbonGalleryBarItem) 允许用户在嵌入或下拉库中选择调色板。

例子

以下示例演示了如何在 Ribbon UI 中显示皮肤项：

C#：

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());
}
}
}

VB.NET:

Imports DevExpress.XtraBars
Imports DevExpress.XtraBars.Ribbon

Namespace DXApplication20
Partial Public Class Form1
Inherits RibbonForm

Public Sub New()
InitializeComponent()
skinPageGroup.ItemLinks.Add(New SkinDropDownButtonItem())
skinPageGroup.ItemLinks.Add(New SkinRibbonGalleryBarItem())
colorPalettePageGroup.ItemLinks.Add(New SkinPaletteDropDownButtonItem())
colorPalettePageGroup.ItemLinks.Add(New SkinPaletteRibbonGalleryBarItem())
End Sub
End Class
End Namespace

隐藏特定项目和组

以下步骤描述了如何隐藏各个皮肤。

1.创建一个包含不需要的皮肤名称的字符串数组，这些名称可以是完整的（例如，“Office 2016 Colorful”）或部分的（例如，“2007”）。

C#：

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

VB.NET:

Dim skinsToHide() As String = { "Seven Classic", "DevExpress Style", "Dark", "2010", "2007", "Sharp" }

2.定义一个自定义方法，该方法将遍历皮肤项并隐藏不需要的项。

C#：

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;
}
}

VB.NET:

Private Sub HideGalleryItemsByCaptions(ByVal galleryItem As RibbonGalleryBarItem, ByVal skinsToHide() As String)
Dim allItems = galleryItem.Gallery.GetAllItems()
For Each item As GalleryItem In allItems
If skinsToHide.Contains(item.Caption) Then
item.Visible = False
End If
Next item
End Sub

3.使用表单或 UserControl Load事件处理程序调用您的方法。

C#：

this.Load += ucRibbon_Load;

void ucRibbon_Load(object sender, EventArgs e) {
HideGalleryItemsByCaptions(skinRibbonGalleryBarItem1, skinsToHide);
}

VB.NET:

Private Me.Load += AddressOf ucRibbon_Load

Private Sub ucRibbon_Load(ByVal sender As Object, ByVal e As EventArgs)
HideGalleryItemsByCaptions(skinRibbonGalleryBarItem1, skinsToHide)
End Sub

要隐藏整个皮肤组，请使用下面的代码示例。

C#：

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

VB.NET:

Private Sub ucRibbon_Load(ByVal sender As Object, ByVal e As EventArgs)
skinRibbonGalleryBarItem1.Gallery.Groups.Remove(skinRibbonGalleryBarItem1.Gallery.Groups.OfType(Of GalleryItemGroup)().First(Function(x) String.Equals(x.Caption, "Bonus Skins")))
End Sub

下面的例子演示了如何在SkinDropDownButtonItem中重命名和隐藏图库组：

C#：

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;
}
}
}

VB.NET:

Imports System.Linq
Imports DevExpress.XtraBars
Imports DevExpress.XtraBars.Ribbon
Imports DevExpress.XtraBars.Ribbon.Gallery
Imports DevExpress.XtraBars.Helpers

Namespace DXApplication20
Partial Public Class Form1
Inherits RibbonForm

Private skinDropDownButtonItem As SkinDropDownButtonItem
Public Sub New()
InitializeComponent()
skinDropDownButtonItem = New SkinDropDownButtonItem(ribbonControl1.Manager)
skinPageGroup.ItemLinks.Add(skinDropDownButtonItem)
End Sub
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs)
HideItems(skinDropDownButtonItem)
End Sub
Private Sub HideItems(ByVal skinItem As SkinDropDownButtonItem)
Dim gallery As GalleryControlGallery = ((TryCast(skinItem.DropDownControl, SkinPopupControlContainer)).Controls.OfType(Of GalleryControl)().FirstOrDefault()).Gallery
gallery.Groups(0).Caption = "My Custom Caption"
gallery.Groups(1).Visible = False
gallery.Groups(2).Visible = False
End Sub
End Class
End Namespace

下面的例子演示了如何从SkinPaletteDropDownButtonItem隐藏指定的组：

C#：

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;
}
}
}

VB.NET:

Private Sub HideSkins2(ByVal skinItem As SkinPaletteDropDownButtonItem, ByVal palettesToHide() As String)
Dim groups = (TryCast(skinItem.DropDownControl, GalleryDropDown)).Gallery.Groups
For i = 0 To groups.Count - 1
Dim group = groups(i)
If group Is Nothing Then
Continue For
End If
For j = 0 To group.Items.Count - 1
Dim item = group.Items(j)
If item Is Nothing Then
Continue For
End If
For Each palette In palettesToHide
If item.Caption.Contains(palette) Then
item.Visible = False
End If
Next palette
If Not group.HasVisibleItems() Then
group.Visible = False
End If
Next j
Next i
End Sub

删除项目分组

要删除项目分组，请添加新的图库组并用所有现有的图库项目填充它，然后您可以去掉除新的自定义组之外的所有图库组 ，如下面的代码示例所示：

C#：

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());
}

VB.NET:

Private Sub ucRibbon_Load(ByVal sender As Object, ByVal e As EventArgs)
RemoveGrouping()
End Sub

Private Sub RemoveGrouping()
Dim group As New GalleryItemGroup() With {.Caption = "Available Skins"}
skinRibbonGalleryBarItem1.Gallery.Groups.Insert(0, group)
For Each item In skinRibbonGalleryBarItem1.Gallery.GetAllItems()
skinRibbonGalleryBarItem1.Gallery.Groups(0).Items.Add(item)
Next item
Do While skinRibbonGalleryBarItem1.Gallery.Groups.Count > 1
skinRibbonGalleryBarItem1.Gallery.Groups.Remove(skinRibbonGalleryBarItem1.Gallery.Groups.Last())
Loop
End Sub

手动更改标题和图标

要更改功能区皮肤库中项目的标题和字形，请迭代库项目并修改以下属性：

• ——获取或设置项目的标题。

• ——获取与图库项目关联的提示。

• —— 获取或设置项目的描述。

• —— 获取或设置矢量图像，矢量图像优先于光栅图像。

• ——获取或设置光栅图像，要显示自定义光栅图像，请取消默认矢量图像。

• —— 获取或设置当鼠标指针悬停在项目上时显示的光栅图像。

C#：

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");
}
}
}

VB.NET:

Private Sub ucRibbon_Load(ByVal sender As Object, ByVal e As EventArgs)
CustomizeItems(skinRibbonGalleryBarItem1)
End Sub

Private Sub CustomizeItems(ByVal target As SkinRibbonGalleryBarItem)
For Each item In target.Gallery.GetAllItems()
If item.Caption = "DevExpress Style" Then
item.Caption = "Default Skin"
' We recommend that you use vector images.
item.ImageOptions.SvgImage = SvgImage.FromResources("DXApplication1.Resources.Driving.svg", GetType(Form1).Assembly)
' The vector image has priority over the raster image.
' To assign a raster image, nullify the default vector image.
item.ImageOptions.SvgImage = Nothing
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")
End If
Next item
End Sub

下图显示了结果。

使用定位器更改皮肤标题

您可以使用 Localizer 对象，而不是手动重命名外观项目。

获得活跃肌肤

以下示例演示了如何获取活动皮肤名称：

C#：

string activeSkinName = DevExpress.UserLookAndFeel.Default.ActiveSkinName;

VB.NET:

Dim activeSkinName As String = DevExpress.UserLookAndFeel.Default.ActiveSkinName