Windows 11 UI
- 5 minutes to read
Our WinForms suite allows you to introduce Windows 11-inspired UI elements with relative ease.
WXI Skin
The vector-based DevExpress WXI Skin replicates key Windows 11 visual elements for DevExpress-powered WinForms apps. Like other DevExpress vector-based skins, the WXI leverages the usability benefits of soft palettes, subtle contrasts, and larger control sizes. WXI also increases paddings between controls to improve readability.
WXI Skin - Compact Mode
The DevExpress WXI Skin allows you to select between its “WXI” or “WXI Compact” option at runtime. The WXI Skin’s Compact Mode was designed for data editor-intensive applications. Apply the WXI Compact option if you need to maximize the use of form real-estate (in Compact mode, the WXI Skin decreases margins between controls).
Use the following code to specify WXI rendering options (standard vs compact) at runtime:
// 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);
Global Compact Mode Setting
Switching to/from Compact Mode triggers the same UI modifications as applying the global WindowsFormsSettings.CompactUIMode property. For this reason, Skin selectors display both skin variations only when this property is set to DefaultBoolean.Default. If set to a different value, users can only select one “WXI” option at runtime (based on the CompactUIMode property).
// 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;
How to Obtain the Current Mode
Read the UserLookAndFeel.Default.CompactUIModeForced property value to identify whether the regular or compact skin option is currently active.
Window Corners
The WXI Skin applies rounded corners to Forms displayed within Windows 11. If you prefer rectangular corners or if you want to apply rounded corners to other DevExpress Skins, use the WindowsFormsSettings.AllowRoundedWindowCorners property as needs dictate.
Ribbon
The WXI Skin automatically rounds the corners of the Ribbon Control’s Item Panel. Rounded corners may introduce visual inconsistencies if a specific UI control does not support Windows 11-inspired rounded corners. This inconsistency will be noticable if a UI control with “rectangular” corners is placed directly beneath the Ribbon.
Depending on your form layout, you can choose one of the following options to address this inconsistency:
Use the Classic Ribbon Style
Change the RibbonControl.ItemPanelStyle property to Classic. To change all Ribbon Controls within a project/application, change the WindowsFormsSettings.RibbonItemPanelStyle property to Classic. In this mode, the Ribbon is rendered using a standard rectangular shape, matching the rectangular shape of all other controls.
Add a Rounded Panel
Wrap client area controls with the DevExpress.XtraEditors.RoundedSkinPanel (the Rounded Skin Panel wraps the outer corner of client controls and adds spacing below the Ribbon).
The DevExpress Rounded Skin Panel is under active development and is not available in the Visual Studio Toolbox. To use this panel, you must create it in code.
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;
}
}
Important
Do not add more than one Rounded Skin Panel for each Form.
Note
Certain DevExpress WinForms Controls (such as the MapControl), will not not display rounded corners even when placed inside a Rounded Skin Panel.
Use the Layout Control
If your application and/or app design includes a large number of data editors or simple UI controls, use the DevExpress Layout/Data Layout Control to arrange your data editors/simple controls across the Form. Default Layout/Data Layout Control paddings used in the DevExpress WXI Skin ensure child controls are aligned with the sides of the Ribbon item panel.
Dock Panels
To align Dock Panels with the edge of the Ribbon item panel, you can move the Docking UI into a separate User Control, and: 1) either set individual UserControl paddings or 2) place the UserControl inside the Rounded Skin Panel (the Rounded Skin Panel adds the necessary margins automatically).
You can also use the DockManager’s “Light” style (see the DockManager.Style property for more information) to remove unwanted borders and enhance alignments within your interface.