WinForms — WXI Skin Options

In last week’s WXI Skin announcement post, I mentioned that our latest vector skin includes certain API-based options. This post will explain why you may want to use these options, and how they can help you create a unified appearance within your WinForms app.

Regular and Compact Modes

Let me start with the Compact mode that was already mentioned in the original WXI skin announcement. This WXI skin variation was designed for data-intense applications, where increased margins and the overall “airy” appearance of the standard WXI skin are not an option.

While users at runtime select "WXI Compact" as a separate skin, you should still think of it as a setting for the original WXI theme. Note that users can select between these two WXI style options only when the CompactUIMode property has its default value. Otherwise, only one style option is availble (depending on the current CompactUIMode setting).

The code below illustrates how to apply the "Compact" variation in code.

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

You can read the UserLookAndFeel.Default.CompactUIModeForced property to identify which WXI variation is currently active. This property can be useful to re-apply the correct style when the application restarts.

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

The Case of Rounded Corners

The traditional approach to application layout is to break a form down into rectangular regions, and put a control inside each one of them. In previous versions, we introduced features built upon this layout concept: Side Panels and Light style for Docking.

While Windows 11 did not completely bust this design thesis, the overall form design metaphor drifted towards a panel-based UI. One of the most notorious examples is the rounded Ribbon item panel, which is a questionable match for underlying rectangular controls (for example, Data Grid).

The "WXI" skin offers you complete control of your project's visual narrative, and allows you to decide the optimal solution for this issue. If you'd love to bring back the familiar look of a Ribbon's items panel and get rid of its rounded corners, set the RibbonControl.ItemPanelStyle property to "Classic".

The "classic Ribbon" is a universal solution that suits any UI type. However, this isn't your only option to eliminate design inconsistencies.

Rounded Panel

One of the most popular UI types is the classic Microsoft Office-inspired UI with a Ribbon at the top of your form, and a single client area control below. If this client area control does not support rounded corners out-of-the-box, you can always wrap it in the DevExpress.XtraEditors.RoundedSkinPanel.

At the moment, you'll need to add this panel manually in code, which only requires a few lines.

// 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;

The Rounded Panel has certain limitations (you should not add more than one Panel per each Form, and it does not affect certain controls, for example WinForms Map Control). And we also understand this is not the most convenient solution when you need to update a huge number of Forms. For these reasons we're keeping this Panel away from the Visual Studio toolbox, and suggest it as a workaround solution for those who'd love to replicate the Windows 11-inspired UI seen in our WinForms demos. At the same time, we're actively looking for alternative options and will do our best to create a more flexible solution for "rounding" corners of individual controls.

Layout Control

Another option available to you is to wrap your content in Layout or Data Layout Controls. In the WXI Skin, margins of layout control items are optimized to align your content with Ribbon's item panel. This solution works wonders in complex data editing UIs.

The image above illustrates another WXI feature: rounded editor corners. When looking at Windows 11 apps, most people instantly recognize rounded window corners. However, we believe that rounded editors are a much more significant update in terms of refreshing the overall application appearance.

Docking UI

While docked, docking panels have old-fashioned rectangular corners. For that reason, the aforementioned "Classic" Ribbon style (RibbonControl.ItemPanelStyle) is the best match for these panels. Among other options, you may want to manually adjust panel margins so that they line up with the rounded Ribbon.

As an option, you can also enable the Light docking style that eliminates side panel borders, and allows you to wrap panels into the Rounded Panel.

Your Opinion Matters

We’d love to know what you think of these options and the importance of rounded corners in your WinForms app.

Free DevExpress Products - Get Your Copy Today