Windows 11用户界面

---

立即下载DevExpress WinForms

我们的 WinForms 套件允许您相对轻松地引入受 Windows 11 启发的 UI 元素。

WXI皮肤

基于矢量的DevExpress WXI皮肤为DevExpress驱动的WinForms应用复制了关键的Windows 11视觉元素。像其他DevExpress基于矢量的皮肤一样，WXI利用了软调色板、微妙的对比和更大的控件尺寸的可用性优势，WXI还增加了控件之间的填充，以提高可读性。

WXI 皮肤 - 精简模式

DevExpress WXI皮肤允许您在运行时选择“WXI”或“WXI Compact”选项，WXI Skin的紧凑模式是为数据编辑器密集型应用程序设计的。如果需要最大限度地利用表单面积，请应用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)

全局紧凑模式设置

切换到/从紧凑模式触发与应用全局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属性值来确定当前激活的是常规皮肤还是紧凑皮肤选项。

C#：

bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;

VB.NET：

Dim isCompact As Boolean = UserLookAndFeel.Default.CompactUIModeForced

窗角

WXI 皮肤将圆角应用于 Windows 11 显示的表单中，如果您更喜欢矩形角，或者如果想将圆角应用于其他 DevExpress 皮肤，请根据需要使用 WindowsFormsSettings.AllowRoundedWindowCorners属性。

Ribbon

WXI 皮肤会自动将功能区控件的项目面板的角变圆，如果特定的 UI 控件不支持受 Windows 11 启发的圆角，则圆角可能会导致视觉上的不一致。如果将具有“矩形”角的 UI 控件直接放置在Ribbon下方，则这种不一致将会很明显。

根据您的表单布局，可以选择以下选项之一来解决此问题：

使用经典Ribbon样式

将RibbonControl.ItemPanelStyle属性更改为Classic。要更改项目/应用程序中的所有功能区控件，请将WindowsFormsSettings.RibbonItemPanelStyle属性更改为Classic.， 在此模式下，功能区使用标准矩形呈现，与所有其他控件的矩形相匹配。

添加圆形面板

使用devexpress . xtraeditor . roundedskinpanel包裹客户端区域控件(圆形皮肤面板包裹客户端控件的外角，并在Ribbon下面添加间隔)。

DevExpress Rounded Skin Panel 正在积极开发中，在 Visual Studio 工具箱中不可用。要使用此面板，您必须在代码中创建它。

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)，即使放在圆形的外观面板中，也不会显示圆角。

使用布局控件

如果您的应用程序和/或应用程序设计包含大量数据编辑器或简单的 UI 控件，请使用 DevExpress布局/数据布局控件在整个表单中排列您的数据编辑器/简单控件。在DevExpress WXI 皮肤中使用的默认布局/数据布局控件填充确保子控件与功能区项目面板的两侧对齐。

停靠面板

要使Dock panel与Ribbon项目面板的边缘对齐，您可以将Dock UI移动到单独的用户控件中，并且:1)设置单独的UserControl填充或2)将UserControl放置在圆形皮肤面板中(圆形皮肤面板会自动添加必要的边距)。

您还可以使用 DockManager 的“Light”样式