Windows 11用戶界面

---

立即下載DevExpress WinForms

我們的 WinForms 套件允許您相對輕松地引入受 Windows 11 啟發(fā)的 UI 元素。

WXI皮膚

基于矢量的DevExpress WXI皮膚為DevExpress驅(qū)動的WinForms應用復制了關(guān)鍵的Windows 11視覺元素。像其他DevExpress基于矢量的皮膚一樣，WXI利用了軟調(diào)色板、微妙的對比和更大的控件尺寸的可用性優(yōu)勢，WXI還增加了控件之間的填充，以提高可讀性。

WXI 皮膚 - 精簡模式

DevExpress WXI皮膚允許您在運行時選擇“WXI”或“WXI Compact”選項，WXI Skin的緊湊模式是為數(shù)據(jù)編輯器密集型應用程序設計的。如果需要最大限度地利用表單面積，請應用WXI Compact選項（在Compact模式下，WXI Skin會減少控件之間的邊距）。

 

使用以下代碼在運行時指定WXI渲染選項(標準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)

全局緊湊模式設置

切換到/從緊湊模式觸發(fā)與應用全局WindowsFormsSettings.CompactUIMode屬性相同的 UI 修改。因此只有當此屬性設置為DefaultBoolean.Default時，皮膚選擇器才會顯示兩種皮膚變體，如果設置為不同的值，用戶只能在運行時選擇一個“WXI”選項（基于屬性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

如何獲取當前模式

讀取UserLookAndFeel.Default.CompactUIModeForced屬性值來確定當前激活的是常規(guī)皮膚還是緊湊皮膚選項。

C#：

bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;

VB.NET：

Dim isCompact As Boolean = UserLookAndFeel.Default.CompactUIModeForced

窗角

WXI 皮膚將圓角應用于 Windows 11 顯示的表單中，如果您更喜歡矩形角，或者如果想將圓角應用于其他 DevExpress 皮膚，請根據(jù)需要使用 WindowsFormsSettings.AllowRoundedWindowCorners屬性。

Ribbon

WXI 皮膚會自動將功能區(qū)控件的項目面板的角變圓，如果特定的 UI 控件不支持受 Windows 11 啟發(fā)的圓角，則圓角可能會導致視覺上的不一致。如果將具有“矩形”角的 UI 控件直接放置在Ribbon下方，則這種不一致將會很明顯。

根據(jù)您的表單布局，可以選擇以下選項之一來解決此問題：

使用經(jīng)典Ribbon樣式

將RibbonControl.ItemPanelStyle屬性更改為Classic。要更改項目/應用程序中的所有功能區(qū)控件，請將WindowsFormsSettings.RibbonItemPanelStyle屬性更改為Classic.， 在此模式下，功能區(qū)使用標準矩形呈現(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

注意

不要為每個表單添加多個圓形蒙皮面板。

提示

某些DevExpress的WinForms控件(如MapControl)，即使放在圓形的外觀面板中，也不會顯示圓角。

使用布局控件

如果您的應用程序和/或應用程序設計包含大量數(shù)據(jù)編輯器或簡單的 UI 控件，請使用 DevExpress布局/數(shù)據(jù)布局控件在整個表單中排列您的數(shù)據(jù)編輯器/簡單控件。在DevExpress WXI 皮膚中使用的默認布局/數(shù)據(jù)布局控件填充確保子控件與功能區(qū)項目面板的兩側(cè)對齊。

停靠面板

要使Dock panel與Ribbon項目面板的邊緣對齊，您可以將Dock UI移動到單獨的用戶控件中，并且:1)設置單獨的UserControl填充或2)將UserControl放置在圓形皮膚面板中(圓形皮膚面板會自動添加必要的邊距)。

您還可以使用 DockManager 的“Light”樣式