添加和自定義帶狀皮膚列表和皮膚庫

---

立即下載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