皮膚
這個主題解釋了如何將DevExpress主題/皮膚應用到應用程序中,如何允許用戶在運行時在主題之間切換,如何自定義現有的皮膚或創建自己的皮膚等等。
DevExpress WinForms控件包含許多基本控件的對應項:按鈕、復選框、窗體、消息框、對話框等。我們實現所有這些控件的主要原因是為了支持的主題,使用DevExpress您可以獲得各種外觀和全面的控制庫,來保證整個應用程序的視覺一致性。
要查看可用的主題/皮膚,打開任何演示應用程序。
如何應用皮膚
設計時間
打開項目設置頁面并選擇所需的 WinForms 主題,此頁面在 .NET Core 項目中不可用,將組件放置在 Form 上并使用其智能標記菜單,或在代碼中指定所需的外觀。
運行時(在代碼中)
調用UserLookAndFeel.SetSkinStyle方法。
C#:
using DevExpress.LookAndFeel; // ... UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI);
VB.NET:
Imports DevExpress.LookAndFeel ' ... UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI)
提示:矢量調色板適用于整個 Windows 窗體應用程序,您不能將不同的調色板應用于程序中的不同表單。
如何啟用Bonus或自定義皮膚
DevExpress皮膚分為兩大類:DevExpress推薦的最新皮膚,以及存儲在單獨庫/包中的過時/主題皮膚。
當您使用模板庫創建項目或將任何控件拖放到表單上時,現代皮膚立即可用。如果啟動空白項目,則需要DevExpress.Utils手動添加庫(或安裝DevExpress.Utils NuGet package),對于blank .NET Core (. NET 5) 項目,請安裝全局DevExpress.Win.Design。
過時的皮膚和主題皮膚存儲在DevExpress.BonusSkins 庫/NuGet 包中,這些皮膚必須先注冊才能應用。如需注冊獎勵皮膚,請在項目設置頁面查看相應設置,或在應用啟動時Register調用該方法:
C#:
namespace WindowsFormsApplication1 { static class Program { [STAThread] static void Main() { DevExpress.UserSkins.BonusSkins.Register(); Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new Form1()); } } }
VB.NET:
Public Class Form1 Shared Sub Main() DevExpress.UserSkins.BonusSkins.Register() Application.EnableVisualStyles() Application.SetCompatibleTextRenderingDefault(False) Application.Run(New Form1) End Sub End Class
注冊獎勵皮膚后,您可以像使用standard skins一樣使用它們。
C#:
using DevExpress.LookAndFeel; UserLookAndFeel.Default.SetSkinStyle(SkinStyle.Pumpkin);
VB.NET:
Imports DevExpress.LookAndFeel UserLookAndFeel.Default.SetSkinStyle(SkinStyle.Pumpkin)
還必須注冊 Skin Editor工具生成的庫中的自定義皮膚。
如何讓用戶在運行時選擇皮膚
DevExpress WinForms 訂閱包括多個即用型欄項目,允許用戶在皮膚和皮膚調色板之間切換,您可以將這些項目添加到工具欄表單和Fluent Design 表單的工具欄、功能區和標題欄。
下面的代碼將 Skin Gallery 選擇器添加到"ribbonPageGroup2"組中。
C#:
using DevExpress.XtraBars; // ... SkinRibbonGalleryBarItem skinGallery = new SkinRibbonGalleryBarItem(); ribbonPageGroup2.ItemLinks.Add(skinGallery);
VB.NET:
Imports DevExpress.XtraBars ' ... Private skinGallery As New SkinRibbonGalleryBarItem() ribbonPageGroup2.ItemLinks.Add(skinGallery)
請注意,如果SkinDropDownButtonItem在代碼中創建選擇器,則需要調用該InitDropDownSkinGallery方法來初始化該選擇器的下拉列表。
C#:
using DevExpress.XtraBars; using DevExpress.XtraBars.Helpers; // Add the selector next to the standard "Close", "Maximize", and "Minimize" // buttons of the Toolbar Form SkinDropDownButtonItem skinSelector = new SkinDropDownButtonItem(); SkinHelper.InitDropDownSkinGallery(skinSelector); skinSelector.Alignment = BarItemLinkAlignment.Right; this.toolbarFormControl1.TitleItemLinks.Add(skinSelector);
VB.NET:
Imports DevExpress.XtraBars Imports DevExpress.XtraBars.Helpers ' Add the selector next to the standard "Close", "Maximize", and "Minimize" ' buttons of the Toolbar Form Private skinSelector As New SkinDropDownButtonItem() SkinHelper.InitDropDownSkinGallery(skinSelector) skinSelector.Alignment = BarItemLinkAlignment.Right Me.toolbarFormControl1.TitleItemLinks.Add(skinSelector)
要重命名和/或更改這些標準皮膚選擇器項目的圖標,請處理該SkinHelper.CreateGalleryItem事件。
C#:
using DevExpress.XtraBars; using DevExpress.XtraBars.Helpers; SkinHelper.CreateGalleryItem += (s, e) => { if (e.ItemName.Equals("DevExpress Style")) { e.GalleryItem.Image = e.UseLargeIcons ? MyCustomLargeIcon : MyCustomSmallIcon; e.GalleryItem.HoverImage = MyCustomLargeIcon; e.GalleryItem.Caption = "Moonlight"; } };
VB.NET:
Imports DevExpress.XtraBars Imports DevExpress.XtraBars.Helpers AddHandler SkinHelper.CreateGalleryItem, Sub(s, e) If e.ItemName.Equals("DevExpress Style") Then e.GalleryItem.Image = If(e.UseLargeIcons, MyCustomLargeIcon, MyCustomSmallIcon) e.GalleryItem.HoverImage = MyCustomLargeIcon e.GalleryItem.Caption = "Moonlight" End If End Sub
提示:
- 在不同的皮膚中,皮膚元素可以有不同的設置(例如填充、邊距等)。有些皮膚包含了其他皮膚中不可用的元素。
- 在某些情況下,從一個皮膚切換到另一個皮膚可能會破壞表單的布局(例如,UI控件可能更短或更薄,內容可能被剪切),我們建議不要創建 pixel-perfect的布局,以避免在更改皮膚時出現UI問題。
皮膚調色板
DevExpress WinForms皮膚可以在UI元素上繪制光柵或矢量圖像。柵格皮膚只有一個默認外觀,而每個矢量皮膚都有一個選擇的調色板(色板),用戶可以選擇調色板來修改當前皮膚的配色方案。下圖展示了“The Bezier”矢量皮膚附帶的一些調色板。
您可以采用與指定外觀相同的方式應用調色板:打開項目設置頁面或調用重載。
C#:
using DevExpress.LookAndFeel; // ... UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.Bezier.Tokyo);
VB.NET:
Imports DevExpress.LookAndFeel ' ... UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.Bezier.Tokyo)
默認應用程序模式(淺色/深色)
使用設置指定您的應用程序是否跟蹤 Windows 操作系統中的默認應用程序模式設置并在外觀庫中僅顯示淺色或深色調色板。
以下示例演示了如何啟用該TrackWindowsAppMode設置:
C#:
static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); WindowsFormsSettings.TrackWindowsAppMode = DevExpress.Utils.DefaultBoolean.True; Application.Run(new Form1()); }
VB.NET:
Shared Sub Main() Application.EnableVisualStyles() Application.SetCompatibleTextRenderingDefault(False) WindowsFormsSettings.TrackWindowsAppMode = DevExpress.Utils.DefaultBoolean.True Application.Run(New Form1()) End Sub
注意:WindowsFormsSettings.TrackWindowsAppMode設置僅適用于“WXI”,“Basic”和“The Bezier”皮膚。
使用系統或自定義強調色
系統強調色
啟用選項來使用 Windows 操作系統中的強調顏色設置,并將其應用到矢量外觀的所有調色板(高對比度外觀除外)。
C#:
using DevExpress.XtraEditors; static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); WindowsFormsSettings.TrackWindowsAccentColor = DevExpress.Utils.DefaultBoolean.True; Application.Run(new Form1()); }
VB.NET:
Imports DevExpress.XtraEditors Shared Sub Main() Application.EnableVisualStyles() Application.SetCompatibleTextRenderingDefault(False) WindowsFormsSettings.TrackWindowsAccentColor = DevExpress.Utils.DefaultBoolean.True Application.Run(New Form1()) End Sub
自定義強調色
使用SetAccentColor方法自定義強調色(優先于系統強調色)。
C#:
DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor(Color.FromArgb(16, 124, 65));
VB.NET:
DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor(Color.FromArgb(16, 124, 65))
提示:
- “The Bezier”皮膚支持第二種強調色,其他皮膚不支持第二種強調色。
- 使用方法指定第二個強調色。
重置強調色
以下示例演示了如何重置主要和次要強調色:
C#:
DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor(System.Drawing.Color.Empty); DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor2(System.Drawing.Color.Empty);
VB.NET:
DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor(System.Drawing.Color.Empty) DevExpress.XtraEditors.WindowsFormsSettings.SetAccentColor2(System.Drawing.Color.Empty)
當您禁用設置時,強調色不會自動重置。您應該調用該SetAccentColor(System.Drawing.Color.Empty)方法來重置強調色。
C#:
WindowsFormsSettings.TrackWindowsAccentColor = DefaultBoolean.False; WindowsFormsSettings.SetAccentColor(Color.Empty); WindowsFormsSettings.SetAccentColor2(Color.Empty);
VB.NET:
WindowsFormsSettings.TrackWindowsAccentColor = DefaultBoolean.False WindowsFormsSettings.SetAccentColor(Color.Empty) WindowsFormsSettings.SetAccentColor2(Color.Empty)
突出顯示單獨的控件
您可以為各個 DevExpress 控件(例如)設置自定義背景、邊框和前景色,為此請訪問Control.Appearance組中的設置。建議您使用DX Colors而不是系統顏色,這些顏色是從外觀中檢索的,并且當用戶在運行時更改外觀時會自動更新。
C#:
// Use DXSkinColors.FillColors for background colors simpleButton1.Appearance.BackColor = DXSkinColors.FillColors.Danger; // Use DXSkinColors.ForeColors for text colors simpleButton1.Appearance.ForeColor = DXSkinColors.ForeColors.Warning;
VB.NET:
' Use DXSkinColors.FillColors for background colors simpleButton1.Appearance.BackColor = DXSkinColors.FillColors.Danger ' Use DXSkinColors.ForeColors for text colors simpleButton1.Appearance.ForeColor = DXSkinColors.ForeColors.Warning
高對比度皮膚
“高對比度”矢量皮膚是為低視力障礙用戶提供的無障礙主題。
該主題的外觀和可用性取決于用戶設置(Windows 中的“Personalize | High contrast settings菜單)。
- 如果Windows的高對比度模式是 off,用戶可以像選擇其他DevExpress主題一樣選擇High contrast 皮膚,皮膚調色板選擇器也是可用的。
- 如果Windows高對比度模式的on,所有允許用戶更改皮膚和調色板的UI選擇器都被禁用,帶有Default調色板的矢量High Contrast皮膚變得活躍。Default調色板使用與用戶在Windows “ High contrast settings”屏幕中設置的顏色相同。
您可以禁用靜態屬性,以防止應用程序跟蹤 Windows 高對比度模式的實際狀態。在這種情況下,應用程序不會打開或關閉“High Contrast”皮膚,用戶可以選擇任何皮膚。
加厚表單邊框
在“Office 2019 Colorful”等現代平面皮膚中,DevExpress Forms會顯示薄邊框,這對用戶來說可能不方便,因為當他們試圖調整表單的大小時,他們必須用鼠標指針瞄準那些細邊框。為了改善用戶體驗,DevExpress Forms的調整大小區域包括邊框和Form陰影/發光皮膚元素,這允許用戶在鼠標指針懸停在窗體的陰影上時調整窗體的大小。
在以下情況下,表單無法顯示陰影:
- 如果手動禁用屬性。
- 如果表單是子 MDI 表單。
- 如果用戶通過遠程桌面連接訪問應用程序。
在這些情況下,您可以增加表單邊框寬度來擴大調整大小區域。
要增加邊框寬度,請啟用或屬性,具體取決于您是要增加所有 DevExpress 窗體的邊框大小,還是僅增加用作子 MDI 窗體的窗體的邊框大小。
使用WindowsFormsSettings.ThickBorderWidth屬性更改表單邊框的寬度。
提示:當啟用遠程連接優化模式時,表單將切換為粗邊框。啟用此模式時,禁用FormThickBorder屬性來保留基于皮膚的邊框。
皮膚編輯器
DevExpress WinForms 安裝附帶了一個允許您創建、編輯和分發主題的工具:Skin Editor。
備忘表和故障排除
示例和最佳實踐
如何獲取當前活動的皮膚和調色板的名稱
讀取和屬性的值。
C#:
var skinName = UserLookAndFeel.Default.ActiveSkinName; var paletteName = UserLookAndFeel.Default.ActiveSvgPaletteName;
VB.NET:
Dim skinName = UserLookAndFeel.Default.ActiveSkinName Dim paletteName = UserLookAndFeel.Default.ActiveSvgPaletteName
如何識別皮膚或調色板在運行時是否已更改
處理靜態事件,每次用戶應用不同的皮膚或皮膚調色板時都會引發此事件。
C#:
UserLookAndFeel.Default.StyleChanged += (s, e) => { // TODO };
VB.NET:
AddHandler UserLookAndFeel.Default.StyleChanged, Sub(s, e) ' TODO End Sub
如何從矢量皮膚調色板中獲取顏色
使用以下代碼檢索調色板顏色的值:
C#:
var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default); SvgPalette svgPalette = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName] as SvgPalette; Color keyPaintColor = svgPalette["Key Paint"].Value;
VB.NET:
Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default) Dim svgPalette As SvgPalette = TryCast(commonSkin.SvgPalettes(Skin.DefaultSkinPaletteName), SvgPalette) Dim keyPaintColor As Color = svgPalette("Key Paint").Value
當應用程序重新啟動時,如何重新應用上次活動的皮膚
Windows表單功能允許您在客戶端計算機上創建、存儲和維護自定義應用程序和用戶首選項。此時可以使用此功能在應用程序重新啟動時保存和恢復活動的皮膚和調色板。
雙擊 Visual Studio 解決方案資源管理器中的“Settings.settings”文件,并創建兩個字符串類型的條目,將兩個條目的范圍設置為“User”。當應用程序即將關閉時,將和屬性的值保存到應用程序設置。當應用程序啟動時,讀取這些保存的值并將它們作為參數傳遞給UserLookAndFeel.SetSkinStyle方法。
對于 v22.1 及更高版本的 DevExpress 安裝,請在設置中添加額外的布爾條目,這一項應用于確定是采用常規版本還是精簡版本的WXI皮膚。
xml:
<?xml version='1.0' encoding='utf-8'?> <SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)" GeneratedClassNamespace="DXApplication1.Properties" GeneratedClassName="Settings"> <Profiles/> <Settings> <Setting Name="SkinName" Type="System.String" Scope="User"> <Value Profile="(Default)" /> </Setting> <Setting Name="Palette" Type="System.String" Scope="User"> <Value Profile="(Default)" /> </Setting> <Setting name="CompactMode" serializeAs="String"> <Value>False</value> </Setting> </Settings> </SettingsFile>
C#:
using DevExpress.LookAndFeel; private void Form1_FormClosing(object sender, FormClosingEventArgs e) { var settings = Properties.Settings.Default; settings.SkinName = UserLookAndFeel.Default.SkinName; settings.Palette = UserLookAndFeel.Default.ActiveSvgPaletteName; settings.CompactMode = UserLookAndFeel.Default.CompactUIModeForced; settings.Save(); } protected override void OnShown(EventArgs e) { base.OnShown(e); var settings = Properties.Settings.Default; if (!string.IsNullOrEmpty(settings.SkinName)) { if (settings.CompactMode) UserLookAndFeel.ForceCompactUIMode(true, false); if (!string.IsNullOrEmpty(settings.Palette)) UserLookAndFeel.Default.SetSkinStyle(settings.SkinName, settings.Palette); else UserLookAndFeel.Default.SetSkinStyle(settings.SkinName, "DefaultSkinPalette"); } }
VB.NET:
Imports DevExpress.LookAndFeel Private Sub Form1_FormClosing(ByVal sender As Object, ByVal e As FormClosingEventArgs) Dim settings_Renamed = My.Settings.Default settings_Renamed.SkinName = UserLookAndFeel.Default.SkinName settings_Renamed.Palette = UserLookAndFeel.Default.ActiveSvgPaletteName settings_Renamed.CompactMode = UserLookAndFeel.Default.CompactUIModeForced settings_Renamed.Save() End Sub Protected Overrides Sub OnShown(ByVal e As EventArgs) MyBase.OnShown(e) Dim settings_Renamed = My.Settings.Default If Not String.IsNullOrEmpty(settings_Renamed.SkinName) Then If settings_Renamed.CompactMode Then UserLookAndFeel.ForceCompactUIMode(True, False) End If If Not String.IsNullOrEmpty(settings_Renamed.Palette) Then UserLookAndFeel.Default.SetSkinStyle(settings_Renamed.SkinName, settings_Renamed.Palette) Else UserLookAndFeel.Default.SetSkinStyle(settings_Renamed.SkinName, "DefaultSkinPalette") End If End If End Sub
如何識別常規版本和精簡版本的WXI皮膚是否活躍
讀取UserLookAndFeel.Default.CompactUIModeForced屬性值。
C#:
bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;
VB.NET:
Dim isCompact As Boolean = UserLookAndFeel.Default.CompactUIModeForced
如何在代碼中區分淺色皮膚和深色皮膚
所有 DevExpress 皮膚和調色板分為兩類:深色和淺色。要識別活動主題請調用DevExpress.Utils.Frames.FrameHelper.IsDarkSkin方法。
C#:
using DevExpress.Utils.Frames; //... if (FrameHelper.IsDarkSkin(this.GetActiveLookAndFeel())) { // Current skin/palette is dark } else { // Current skin/palette is light }
VB.NET:
Imports DevExpress.Utils.Frames '... If FrameHelper.IsDarkSkin(Me.GetActiveLookAndFeel()) Then ' Current skin/palette is dark Else ' Current skin/palette is light End If
請注意,該IsDarkSkin方法根據“Paint High”調色板顏色的值來識別皮膚是淺色還是深色,因此,該方法的返回值可能與整體皮膚外觀相反。例如,“Office 2019 深灰色”由于其淺“Paint High”顏色值而被識別為淺色皮膚,盡管該皮膚主要是深色的。
您可以用自己的方法來“修復”感到困惑的返回值。
C#:
VB.NET:bool IsDarkSkinEx() { var res = FrameHelper.IsDarkSkin(this.GetActiveLookAndFeel()); return res || UserLookAndFeel.Default.SkinName == "Office 2019 Dark Gray"; }
VB.NET:
Private Function IsDarkSkinEx() As Boolean Dim res = FrameHelper.IsDarkSkin(Me.GetActiveLookAndFeel()) Return res OrElse UserLookAndFeel.Default.SkinName = "Office 2019 Dark Gray" End Function
如何將皮膚應用到沒有標題欄的表單
要隱藏表單的標題欄,請禁用其和圖標,并刪除表單的標題。
C#:
this.Text = null; this.IconOptions.ShowIcon = false; this.ControlBox = false;
VB.NET:
Me.Text = Nothing Me.IconOptions.ShowIcon = False Me.ControlBox = False
除非您重寫它們的方法,否則此類表單不會設置皮膚GetAllowSkin。
C#:
protected override bool GetAllowSkin() { return true; }
VB.NET:
Protected Overrides Function GetAllowSkin() As Boolean Return True End Function