Skip to main content

Skins

  • 11 minutes to read

This topic explains how to apply DevExpress Themes/Skins to your application, how to allow users to switch between themes at runtime, how to customize existing skins or create your own, and much more.

The DevExpress WinForms Subscription includes counterparts to many basic controls: buttons, check boxes, Forms, message boxes, dialogs, and others. A major reason why we implemented all these controls is to support our themes. With DevExpress, you get a variety of appearances and a comprehensive control library that guarantees visual consistency throughout your entire application.

To review available Themes/Skins, open any demo application.

Skin selector in DevExpress WinForms demos

How to Apply a Skin

At design time
Open the Project Settings Page and choose the required WinForms theme. This page is not available in .NET Core projects. Place the DefaultLookAndFeel component on the Form and use its smart-tag menu, or specify a required skin in code.
In code

Call the UserLookAndFeel.SetSkinStyle method.

using DevExpress.LookAndFeel;

// ...
UserLookAndFeel.Default.SetSkinStyle(SkinStyle.WXI);

How to Enable Bonus or Custom Skins

DevExpress skins are grouped into two main categories: up-to-date skins recommended by DevExpress, and outdated/thematic skins stored in a separate library/package.

  • Modern skins are instantly available when you create a project with the Template Gallery, or drop any control onto a Form. If you start a blank project, you need to add the DevExpress.Utils library manually (or install the DevExpress.Utils NuGet package). For blank .NET Core (.NET 5) projects, install the global DevExpress.Win.Design package.

  • Outdated and thematic skins are stored in the DevExpress.BonusSkins library/NuGet package. These skins must be registered before you can apply them. To register bonus skins, check the corresponding setting on the Project Settings Page, or call the Register method on application startup:

    namespace WindowsFormsApplication1 {
        static class Program {
            [STAThread]
            static void Main() {
                DevExpress.UserSkins.BonusSkins.Register();
    
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);
                Application.Run(new Form1());
            }
        }
    }
    

After bonus skins are registered, you can apply them in the same manner you apply standard skins.

using DevExpress.LookAndFeel;

UserLookAndFeel.Default.SetSkinStyle(SkinStyle.Pumpkin);

Custom skins from libraries produced by the Skin Editor tool must also be registered.

See also:

How to Let Users Select Skins at Runtime

The DevExpress WinForms Subscription includes multiple ready-to-use Bar Items that allow your users to switch between skins and skin palettes. You can add these items to toolbars, the Ribbon, and title bars of the Toolbar Form and Fluent Design Form.

Add skin selectors at design time

The code below adds the Skin Gallery selector to the "ribbonPageGroup2" group.

using DevExpress.XtraBars;
// ...
SkinRibbonGalleryBarItem skinGallery = new SkinRibbonGalleryBarItem();
ribbonPageGroup2.ItemLinks.Add(skinGallery);

Note that if you create the SkinDropDownButtonItem selector in code, you need to call the InitDropDownSkinGallery method to initialize this selector’s drop-down list.

using DevExpress.XtraBars;
using DevExpress.XtraBars.Helpers;
// Add the selector next to the standard "Close", "Maximize", and "Minimize"
// buttons of the Toolbar Form
SkinDropDownButtonItem skinSelector = new SkinDropDownButtonItem();
SkinHelper.InitDropDownSkinGallery(skinSelector);
skinSelector.Alignment = BarItemLinkAlignment.Right;
this.toolbarFormControl1.TitleItemLinks.Add(skinSelector);

To rename and/or change icons for items of these standard skin selectors, handle the SkinHelper.CreateGalleryItem event.

using DevExpress.XtraBars;
using DevExpress.XtraBars.Helpers;

SkinHelper.CreateGalleryItem += (s, e) => {
    if (e.ItemName.Equals("DevExpress Style")) {
        e.GalleryItem.Image = e.UseLargeIcons ? MyCustomLargeIcon : MyCustomSmallIcon;
        e.GalleryItem.HoverImage = MyCustomLargeIcon;
        e.GalleryItem.Caption = "Moonlight";
    }
};

See also:

Skin Palettes

DevExpress WinForms skins can draw either raster or vector images on top of UI elements. Raster skins have only one default appearance, whereas each vector skin ships with a selection of palettes (swatches). Users can select palettes to modify the color scheme of the current skin. The figure below illustrates some of the palettes shipped with “The Bezier” vector skin.

Standard palettes for The Bezier skin

You can apply a palette in the same way as you specify a skin: open the Project Settings Page or call the SetSkinStyle(SkinSvgPalette) overload.

using DevExpress.LookAndFeel;
// ...
UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.Bezier.Tokyo);

See also:

Highlight Individual Controls

You can set up custom background, border, and foreground colors for individual DevExpress controls (for instance, SimpleButtons). To do this, access settings from the Control.Appearance group. It is recommended that you use DX Colors instead of system colors: these colors are retrieved from skins, and are automatically updated when users change skins at runtime.

// Use DXSkinColors.FillColors for background colors
simpleButton1.Appearance.BackColor = DXSkinColors.FillColors.Danger;
// Use DXSkinColors.ForeColors for text colors
simpleButton1.Appearance.ForeColor = DXSkinColors.ForeColors.Warning;

See also:

High Contrast Skins

The “High Contrast” vector skin is an accessibility theme for users with a low vision impairment.

Vector High Contrast skin

The appearance and availability of this theme depend on user settings (the “Personalize | High contrast settings” menu in Windows).

  • If Windows high contrast mode is off, users can select the “High Contrast” skin like any other DevExpress theme. Skin palette selectors are also available.
  • If Windows high contrast mode is on, all UI selectors that allow users to change skins and palettes are disabled, and the vector “High Contrast” skin with the “Default” palette becomes active. The “Default” palette uses the same colors a user sets in the Windows “High contrast settings” screen.

You can disable the static WindowsFormsSettings.TrackSystemHighContrastMode property to prevent your application from tracking the actual state of Windows high contrast mode. In this case applications do not switch the “High Contrast” skin on or off, and users can select any skin.

Thickened Form Borders

In modern flat skins like “Office 2019 Colorful”, DevExpress Forms display thin borders. This may be inconvenient for users because they must aim for those thin borders with a mouse pointer when they try to resize a Form. To improve the user experience, the resize area of DevExpress Forms includes both borders and a Form shadow/glow skin element. This allows a user to resize a Form when a mouse pointer hovers over the Form’s shadow.

Forms cannot display shadows in the following cases:

  • If you manually disable the XtraForm.FormBorderEffect property.
  • If Forms are child MDI forms.
  • If a user accesses the application through a Remote Desktop connection.

image

In these cases, you can increase form border width to broaden the resize area.

image

To increase the border width, enable either the WindowsFormsSettings.FormThickBorder or WindowsFormsSettings.MdiFormThickBorder property depending on whether you want to increase border size for all DevExpress Forms, or only those that serve as child MDI Forms.

Use the WindowsFormsSettings.ThickBorderWidth property to change the width of thick Form borders.

Tip

Forms switch to thick borders when you enable Remote Connection Optimization mode. Disable the FormThickBorder property to retain skin-based borders when this mode is on.

Skin Editor

The DevExpress WinForms installation ships with a tool that allows you to create, edit, and distribute themes: Skin Editor.

Landing Page Image

See also:

Examples and Best Practices

How to Obtain Names of the Currently Active Skin and Palette

Read values of the ActiveSkinName and ActiveSvgPaletteName properties.

var skinName = UserLookAndFeel.Default.ActiveSkinName;
var paletteName = UserLookAndFeel.Default.ActiveSvgPaletteName;

How to Identify a Skin or Palette was Changed at Runtime

Handle the static UserLookAndFeel.StyleChanged event. This event raises every time a user applies a different skin or skin palette.

UserLookAndFeel.Default.StyleChanged += (s, e) => {
    // TODO
};

How to Obtain a Color from the Vector Skin Palette

Use the following code to retrieve values of palette colors:

var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);
SvgPalette svgPalette = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName] as SvgPalette;
Color keyPaintColor = svgPalette["Key Paint"].Value;

How to Re-Apply the Last Active Skin When an Application Restarts

The Windows Forms Application Settings feature allows you to create, store, and maintain custom application and user preferences on client computers. You can use this feature to save and restore active skins and palettes when your application restarts.

Double-click the “Settings.settings” file in the Visual Studio Solution Explorer and create two entries of the String type. Set the scope of both entries to “User”. When an application is about to close, save values of the UserLookAndFeel.Default.SkinName and UserLookAndFeel.Default.ActiveSvgPaletteName properties to Application Settings. When an application starts, read these saved values and pass them to the UserLookAndFeel.SetSkinStyle method as parameters.

For DevExpress installations of v22.1 and newer, add an additional Boolean entry in settings. This entry should be used to identify whether a regular or compact version of the WXI skin should be applied.

<?xml version='1.0' encoding='utf-8'?>
<SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)" GeneratedClassNamespace="DXApplication1.Properties" GeneratedClassName="Settings">
  <Profiles/>
  <Settings>
    <Setting Name="SkinName" Type="System.String" Scope="User">
      <Value Profile="(Default)" />
    </Setting>
    <Setting Name="Palette" Type="System.String" Scope="User">
      <Value Profile="(Default)" />
    </Setting>
    <Setting name="CompactMode" serializeAs="String">
      <Value>False</value>
    </Setting>
  </Settings>
</SettingsFile>
private void Form1_FormClosing(object sender, FormClosingEventArgs e) {
    var settings = Properties.Settings.Default;
    settings.SkinName = UserLookAndFeel.Default.SkinName;
    settings.Palette = UserLookAndFeel.Default.ActiveSvgPaletteName;
    settings.CompactMode = UserLookAndFeel.Default.CompactUIModeForced;
    settings.Save();
}

protected override void OnShown(EventArgs e) {
    base.OnShown(e);
    var settings = Properties.Settings.Default;
    if (!string.IsNullOrEmpty(settings.SkinName)) {
        if (settings.CompactMode)
            UserLookAndFeel.ForceCompactUIMode(true, false);
        if (!string.IsNullOrEmpty(settings.Palette))
            UserLookAndFeel.Default.SetSkinStyle(settings.SkinName, settings.Palette);
        else UserLookAndFeel.Default.SetSkinStyle(settings.SkinName);
    }
}

View Example: How to save/restore the applied skin and palette between application sessions

How to Modify Skin Palettes in Code

See this article for the code sample: How To: Create New and Modify Existing Vector Skin Palettes.

How to Identify Whether the Regular or Compact Version of the WXI Skin is Active

Read the UserLookAndFeel.Default.CompactUIModeForced property value.

bool isCompact = UserLookAndFeel.Default.CompactUIModeForced;

See also: Windows 11 UI

How to Distinguish Light from Dark Skins in Code

All DevExpress skins and palettes fall into two categories: dark and light. To identify an active theme category, call the DevExpress.Utils.Frames.FrameHelper.IsDarkSkin method.

using DevExpress.Utils.Frames;
//...
if (FrameHelper.IsDarkSkin(this.GetActiveLookAndFeel())) {
    // Current skin/palette is dark
}
else {
    // Current skin/palette is light
}

Note that the IsDarkSkin method identifies whether a skin is light or dark based on the value of the “Paint High” palette color. For this reason, the return value of this method can be the opposite of the overall skin appearance. For example, “Office 2019 Dark Gray” identifies as a light skin because of its light “Paint High” color value, although this skin is primarily dark.

You can implement your own method that “fixes” return values for cases you find confusing.

bool IsDarkSkinEx() {
    var res = FrameHelper.IsDarkSkin(this.GetActiveLookAndFeel());
    return res || UserLookAndFeel.Default.SkinName == "Office 2019 Dark Gray";
}

How to Apply Skins to Forms without Title Bars

To hide a Form’s title bar, disable its ControlBox and icon, and remove the Form’s caption.

this.Text = null;
this.IconOptions.ShowIcon = false;
this.ControlBox = false;

Such Forms are not skinned, unless you override their GetAllowSkin methods.

protected override bool GetAllowSkin() {
    return true;
}
See Also