Windows 11用戶界面

---

立即下載DevExpress WinForms

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

WXI皮膚

 基于矢量的DevExpress WXI皮膚為DevExpress驅(qū)動(dòng)的WinForms應(yīng)用復(fù)制了關(guān)鍵的Windows 11視覺(jué)元素。像其他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屬性值來(lái)確定當(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)致視覺(jué)上的不一致。如果將具有“矩形”角的 UI 控件直接放置在Ribbon下方，則這種不一致將會(huì)很明顯。

根據(jù)您的表單布局，可以選擇以下選項(xiàng)之一來(lái)解決此問(wèn)題：

使用經(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 正在積極開(kāi)發(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ì)齊。

停靠面板

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

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