Skip to main content
All docs
V24.1

Windows 11 UI

  • 5 minutes to read

Our WinForms suite allows you to introduce Windows 11-inspired UI elements with relative ease.

Windows 11-inspired Layout

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 Overview

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).

WXI Skin Options

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.

bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;

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.

Inconsistent control corners in the WXI skin

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.

Classic Ribbon Style

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).

Rounded Panel

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.

WXI Skin Layout Control

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).

Dock Panels in Windows 11 UI

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.