添加和自定義帶狀皮膚列表和皮膚庫(kù)

---

立即下載DevExpress WinForms

 皮膚列表和皮膚庫(kù)是允許用戶選擇皮膚的。本文介紹如何在功能區(qū)中顯示皮膚列表或皮膚庫(kù)并對(duì)其進(jìn)行自定義。

提示：DevExpress Demo Center中的大多數(shù)應(yīng)用程序都允許您選擇皮膚。例如，運(yùn)行XtraGrid演示并導(dǎo)航到Skins功能區(qū)頁(yè)面可以更改當(dāng)前皮膚。

在Ribbon UI中顯示皮膚列表或皮膚庫(kù)

 使用以下欄項(xiàng)將相應(yīng)的 UI 元素添加到 Ribbon UI：皮膚列表、皮膚庫(kù)、皮膚調(diào)色板列表、皮膚調(diào)色板庫(kù)，右鍵單擊RibbonPageGroup并調(diào)用相應(yīng)的命令可以在設(shè)計(jì)時(shí)添加外觀列表或外觀庫(kù)。

皮膚列表

 皮膚列表 ( SkinDropDownButtonItem) 是一個(gè)顯示應(yīng)用程序皮膚的下拉菜單。

皮膚庫(kù)

 皮膚庫(kù) ( SkinRibbonGalleryBarItem) 是一個(gè)顯示皮膚的功能區(qū)庫(kù)，庫(kù)中的皮膚按類(lèi)別分組。

皮膚調(diào)色板列表

 皮膚調(diào)色板列表 ( SkinPaletteDropDownButtonItem) 允許用戶為矢量皮膚選擇調(diào)色板。

皮膚調(diào)色板庫(kù)

 皮膚調(diào)色板庫(kù) ( SkinPaletteRibbonGalleryBarItem) 允許用戶在嵌入或下拉庫(kù)中選擇調(diào)色板。

例子

以下示例演示了如何在 Ribbon UI 中顯示皮膚項(xiàng)：

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

隱藏特定項(xiàng)目和組

以下步驟描述了如何隱藏各個(gè)皮膚。

1.創(chuàng)建一個(gè)包含不需要的皮膚名稱(chēng)的字符串?dāng)?shù)組，這些名稱(chēng)可以是完整的（例如，“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.定義一個(gè)自定義方法，該方法將遍歷皮膚項(xiàng)并隱藏不需要的項(xiàng)。

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事件處理程序調(diào)用您的方法。

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

要隱藏整個(gè)皮膚組，請(qǐng)使用下面的代碼示例。

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中重命名和隱藏圖庫(kù)組：

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

刪除項(xiàng)目分組

 要?jiǎng)h除項(xiàng)目分組，請(qǐng)?zhí)砑有碌膱D庫(kù)組并用所有現(xiàn)有的圖庫(kù)項(xiàng)目填充它，然后您可以去掉除新的自定義組之外的所有圖庫(kù)組 ，如下面的代碼示例所示：

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

手動(dòng)更改標(biāo)題和圖標(biāo)

要更改功能區(qū)皮膚庫(kù)中項(xiàng)目的標(biāo)題和字形，請(qǐng)迭代庫(kù)項(xiàng)目并修改以下屬性：

• ——獲取或設(shè)置項(xiàng)目的標(biāo)題。

• ——獲取與圖庫(kù)項(xiàng)目關(guān)聯(lián)的提示。

• —— 獲取或設(shè)置項(xiàng)目的描述。

• —— 獲取或設(shè)置矢量圖像，矢量圖像優(yōu)先于光柵圖像。

• ——獲取或設(shè)置光柵圖像，要顯示自定義光柵圖像，請(qǐng)取消默認(rèn)矢量圖像。

• —— 獲取或設(shè)置當(dāng)鼠標(biāo)指針懸停在項(xiàng)目上時(shí)顯示的光柵圖像。

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

下圖顯示了結(jié)果。

使用定位器更改皮膚標(biāo)題

您可以使用 Localizer 對(duì)象，而不是手動(dòng)重命名外觀項(xiàng)目。

獲得活躍肌膚

以下示例演示了如何獲取活動(dòng)皮膚名稱(chēng)：

C#：

string activeSkinName = DevExpress.UserLookAndFeel.Default.ActiveSkinName;

VB.NET:

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