Windows 11用戶界面
我們的 WinForms 套件允許您相對(duì)輕松地引入受 Windows 11 啟發(fā)的 UI 元素。
WXI皮膚
基于矢量的DevExpress WXI皮膚為DevExpress驅(qū)動(dòng)的WinForms應(yīng)用復(fù)制了關(guān)鍵的Windows 11視覺元素。像其他DevExpress基于矢量的皮膚一樣,WXI利用了軟調(diào)色板、微妙的對(duì)比和更大的控件尺寸的可用性優(yōu)勢(shì),WXI還增加了控件之間的填充,以提高可讀性。
WXI 皮膚 - 精簡(jiǎn)模式
DevExpress WXI皮膚允許您在運(yùn)行時(shí)選擇“WXI”或“WXI Compact”選項(xiàng),WXI Skin的緊湊模式是為數(shù)據(jù)編輯器密集型應(yīng)用程序設(shè)計(jì)的。如果需要最大限度地利用表單面積,請(qǐng)應(yīng)用WXI Compact選項(xiàng)(在Compact模式下,WXI Skin會(huì)減少控件之間的邊距)。
使用以下代碼在運(yùn)行時(shí)指定WXI渲染選項(xiàng)(標(biāo)準(zhǔn)vs緊湊):
C#:
// Apply the WXI skin with its default palette. DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI); // Or DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXICompact); // Apply the WXI skin and its "Sharpness" palette. DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXI.Sharpness); // Or DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXICompact.Sharpness);
VB.NET:
' Apply the WXI skin with its default palette. DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI) ' Or DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXICompact) ' Apply the WXI skin and its "Sharpness" palette. DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXI.Sharpness) ' Or DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXICompact.Sharpness)
全局緊湊模式設(shè)置
切換到/從緊湊模式觸發(fā)與應(yīng)用全局WindowsFormsSettings.CompactUIMode屬性相同的 UI 修改。因此只有當(dāng)此屬性設(shè)置為DefaultBoolean.Default時(shí),皮膚選擇器才會(huì)顯示兩種皮膚變體,如果設(shè)置為不同的值,用戶只能在運(yùn)行時(shí)選擇一個(gè)“WXI”選項(xiàng)(基于屬性CompactUIMode)。
C#:
// The global Compact Mode is off; the "WXI" runtime option applies the regular WXI variation. WindowsFormsSettings.CompactUIMode = DevExpress.Utils.DefaultBoolean.False; // The global Compact Mode is on; the "WXI" runtime option applies the compact WXI variation. WindowsFormsSettings.CompactUIMode = DevExpress.Utils.DefaultBoolean.True;
VB.NET:
' The global Compact Mode is off; the "WXI" runtime option applies the regular WXI variation. WindowsFormsSettings.CompactUIMode = DevExpress.Utils.DefaultBoolean.False ' The global Compact Mode is on; the "WXI" runtime option applies the compact WXI variation. WindowsFormsSettings.CompactUIMode = DevExpress.Utils.DefaultBoolean.True
如何獲取當(dāng)前模式
讀取UserLookAndFeel.Default.CompactUIModeForced屬性值來確定當(dāng)前激活的是常規(guī)皮膚還是緊湊皮膚選項(xiàng)。
C#:
bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;
VB.NET:
Dim isCompact As Boolean = UserLookAndFeel.Default.CompactUIModeForced
窗角
WXI 皮膚將圓角應(yīng)用于 Windows 11 顯示的表單中,如果您更喜歡矩形角,或者如果想將圓角應(yīng)用于其他 DevExpress 皮膚,請(qǐng)根據(jù)需要使用 WindowsFormsSettings.AllowRoundedWindowCorners屬性。
Ribbon
WXI 皮膚會(huì)自動(dòng)將功能區(qū)控件的項(xiàng)目面板的角變圓,如果特定的 UI 控件不支持受 Windows 11 啟發(fā)的圓角,則圓角可能會(huì)導(dǎo)致視覺上的不一致。如果將具有“矩形”角的 UI 控件直接放置在Ribbon下方,則這種不一致將會(huì)很明顯。
根據(jù)您的表單布局,可以選擇以下選項(xiàng)之一來解決此問題:
使用經(jīng)典Ribbon樣式
將RibbonControl.ItemPanelStyle屬性更改為Classic。要更改項(xiàng)目/應(yīng)用程序中的所有功能區(qū)控件,請(qǐng)將WindowsFormsSettings.RibbonItemPanelStyle屬性更改為Classic., 在此模式下,功能區(qū)使用標(biāo)準(zhǔn)矩形呈現(xiàn),與所有其他控件的矩形相匹配。
添加圓形面板
使用devexpress . xtraeditor . roundedskinpanel包裹客戶端區(qū)域控件(圓形皮膚面板包裹客戶端控件的外角,并在Ribbon下面添加間隔)。
DevExpress Rounded Skin Panel 正在積極開發(fā)中,在 Visual Studio 工具箱中不可用。要使用此面板,您必須在代碼中創(chuàng)建它。
C#:
using System.Windows.Forms; using DevExpress.XtraEditors; using DevExpress.XtraEditors.Controls; using DevExpress.XtraBars.Ribbon; namespace DXApplication { public partial class Form1 : RibbonForm { public Form1() { InitializeComponent(); this.rootPanel = new RoundedSkinPanel(); this.Controls.Add(this.rootPanel); this.rootPanel.Dock = System.Windows.Forms.DockStyle.Fill; this.rootPanel.Controls.Add(this.gridControl1); this.rootPanel.BringToFront(); this.gridControl1.Dock = DockStyle.Fill; this.gridView1.BorderStyle = BorderStyles.NoBorder; } private DevExpress.XtraEditors.RoundedSkinPanel rootPanel; } }
VB.NET:
Imports System.Windows.Forms Imports DevExpress.XtraEditors Imports DevExpress.XtraEditors.Controls Imports DevExpress.XtraBars.Ribbon Namespace DXApplication Partial Public Class Form1 Inherits RibbonForm Public Sub New() InitializeComponent() Me.rootPanel = New RoundedSkinPanel() Me.Controls.Add(Me.rootPanel) Me.rootPanel.Dock = System.Windows.Forms.DockStyle.Fill Me.rootPanel.Controls.Add(Me.gridControl1) Me.rootPanel.BringToFront() Me.gridControl1.Dock = DockStyle.Fill Me.gridView1.BorderStyle = BorderStyles.NoBorder End Sub Private rootPanel As DevExpress.XtraEditors.RoundedSkinPanel End Class End Namespace
注意
不要為每個(gè)表單添加多個(gè)圓形蒙皮面板。
提示
某些DevExpress的WinForms控件(如MapControl),即使放在圓形的外觀面板中,也不會(huì)顯示圓角。
使用布局控件
如果您的應(yīng)用程序和/或應(yīng)用程序設(shè)計(jì)包含大量數(shù)據(jù)編輯器或簡(jiǎn)單的 UI 控件,請(qǐng)使用 DevExpress布局/數(shù)據(jù)布局控件在整個(gè)表單中排列您的數(shù)據(jù)編輯器/簡(jiǎn)單控件。在DevExpress WXI 皮膚中使用的默認(rèn)布局/數(shù)據(jù)布局控件填充確保子控件與功能區(qū)項(xiàng)目面板的兩側(cè)對(duì)齊。
??棵姘?/strong>
要使Dock panel與Ribbon項(xiàng)目面板的邊緣對(duì)齊,您可以將Dock UI移動(dòng)到單獨(dú)的用戶控件中,并且:1)設(shè)置單獨(dú)的UserControl填充或2)將UserControl放置在圓形皮膚面板中(圓形皮膚面板會(huì)自動(dòng)添加必要的邊距)。
您還可以使用 DockManager 的“Light”樣式