在之前的文章中我們?yōu)榇蠹医榻B了什么是WXI皮膚，其中有提到這個(gè)最新的矢量皮膚包括了某些基于API的選項(xiàng)。本文將繼續(xù)為大家揭秘為什么要使用這些選項(xiàng)，以及它們?nèi)绾螏椭?a target="_blank">WinForm應(yīng)用程序中創(chuàng)建統(tǒng)一的外觀。

獲取DevExpress WinForms v21.2正式版下載

常規(guī)和緊湊模式

從最初的WXI皮膚公告中可以知道緊湊模式已經(jīng)開始流行了，這種WXI皮膚專為數(shù)據(jù)密集型應(yīng)用而設(shè)計(jì)，在這些應(yīng)用中，不能選擇標(biāo)準(zhǔn) WXI 皮膚的增加邊距和整體“airy”外觀。

雖然用戶在運(yùn)行時(shí)選擇“WXI Compact”作為單獨(dú)的皮膚，但您仍應(yīng)將其視為原始WXI主題的設(shè)置。請注意，只有當(dāng) 屬性具有默認(rèn)值時(shí)，用戶才能在這兩個(gè) WXI 樣式選項(xiàng)之間進(jìn)行選擇，否則只有一個(gè)樣式選項(xiàng)可用（取決于當(dāng)前的 CompactUIMode 設(shè)置）。

下面的代碼說明了如何在代碼中應(yīng)用"Compact"變體。

DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXICompact);
// or
DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXICompact.Sharpness);

您可以了解UserLookAndFeel.Default.CompactUIModeForced屬性來識別當(dāng)前處于激活狀態(tài)的WXI變體，此屬性可用于在應(yīng)用程序重新啟動時(shí)重新應(yīng)用正確的樣式。

bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;
// Save the isCompact variable
// ...

// Load the isCompact variable
// ...
if (isCompact)
UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXICompact.Calmness);
else UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.WXI.Calmness);

圓角案例

應(yīng)用程序布局的傳統(tǒng)方法是將表單分解為矩形區(qū)域，并在每個(gè)區(qū)域內(nèi)放置一個(gè)控件。 在以前的版本中，我們引入了基于此布局概念的功能：側(cè)面板和對接的燈光樣式。

雖然 Windows 11 并沒有完全打破這個(gè)設(shè)計(jì)論點(diǎn)，但整體表單設(shè)計(jì)隱喻轉(zhuǎn)向基于面板的UI，最著名的例子就是圓形功能區(qū)項(xiàng)目面板，它與底層矩形控件（例如，數(shù)據(jù)網(wǎng)格）的匹配存在問題。

“WXI”皮膚讓您可以完全控制項(xiàng)目的視覺敘述，并讓您決定針對此問題的最佳解決方案。 如果您想恢復(fù) Ribbon 項(xiàng)目面板的熟悉外觀并擺脫其圓角，請將 RibbonControl.ItemPanelStyle 屬性設(shè)置為“Classic”。

 "classic Ribbon"是適用于任何 UI 類型的通用解決方案，但這不是消除設(shè)計(jì)不一致的唯一選擇。

圓形面板

最受歡迎的UI類型是受Microsoft Office啟發(fā)的經(jīng)典UI，表單頂部有一個(gè)功能區(qū)，下方有一個(gè)客戶區(qū)控件。 如果此客戶區(qū)控件不支持開箱即用的圓角，您始終可以將其封裝在DevExpress.XtraEditors.RoundedSkinPanel中。

目前您需要在代碼中手動添加此面板，只需要幾行代碼。

// Designer.cs file

this.rootPanel = new DevExpress.XtraEditors.RoundedSkinPanel();
// ...
this.rootPanel.Dock = System.Windows.Forms.DockStyle.Fill;
this.Controls.Add(this.gridControl1);
// ...
this.Controls.Add(this.rootPanel);
// ...
private DevExpress.XtraEditors.RoundedSkinPanel rootPanel;

圓形面板有一定的限制（您不應(yīng)為每個(gè)表單添加多個(gè)面板，并且它不會影響某些控件，例如 WinForms 地圖控件），當(dāng)需要更新大量表單時(shí)，這不是最方便的解決方案。 出于這些原因，我們將此面板遠(yuǎn)離 Visual Studio 工具箱，并建議將其作為一種變通解決方案，供那些希望復(fù)制受Windows 11啟發(fā)的UI的開發(fā)者使用。

布局控件

您可用的另一個(gè)選項(xiàng)是將內(nèi)容封裝在布局或數(shù)據(jù)布局控件中，在WXI皮膚中，布局控件項(xiàng)目的邊距進(jìn)行了優(yōu)化，以使您的內(nèi)容與功能區(qū)的項(xiàng)目面板對齊。

上圖說明了另一個(gè) WXI 功能：圓角編輯器角。 在查看 Windows 11 應(yīng)用程序時(shí)，大多數(shù)人會立即認(rèn)出圓角窗角，但是我們認(rèn)為圓形編輯器在刷新整體應(yīng)用程序外觀方面是一個(gè)更重要的更新。

Docking UI

 停靠時(shí)，停靠面板具有老式的矩形角，因此前面提到的"Classic" Ribbon樣式(RibbonControl.ItemPanelStyle) 是這些面板的最佳匹配。在其他選項(xiàng)中，您可能需要手動調(diào)整面板邊距，使其與圓形功能區(qū)對齊。

 作為一個(gè)選項(xiàng)，您還可以啟用消除側(cè)面板邊框的 Light 停靠樣式，并允許您將面板封裝到圓形面板中。

DevExpress WinForm | 下載試用

DevExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論