[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Collapse]Build an Application
  [Expand]Choose Application UI
   Data Management Controls
  [Expand]Printing and Exporting
  [Expand]WinForms MVVM
  [Collapse]Skins
    Add and Customize the Toolbar and Menu Skin Selector
    Add and Customize the Ribbon Gallery Skin Selector
    Build a Custom End-User Skin Selector
    How To: Localize Bar and Ribbon Skin Items
    Bonus and Custom Skin Registration
    Design-Time Skinning
  [Expand]Localization
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Skins

DevExpress WinForms controls include many ready-to-use paint themes (or skins) for changing DevExpress forms' and controls' appearance. You can see the different skins by running WinForms Demo Applications and switching between the available themes using a Skin Selector.

This topic describes the available raster and vector skins, how to apply a skin to the entire application and individual controls, how to alter a skin's color palette and how to create a custom skin.

Related topics:

Expanded Basic Skin Set: Themes Inspired by Popular Applications

The following gallery demonstrates the default skins that are part of the DevExpress.Utils library (all projects that use DevExpress WinForms controls require this library):

Expanded Apply Themes to Entire Application and Individual Controls

Invoke the DevExpress Project Settings page and select a desired theme to apply it to the entire application.

Alternatively, call the UserLookAndFeel.Default static object's UserLookAndFeel.SetSkinStyle method.

The Default Look And Feel (accessible using the DefaultLookAndFeel component or UserLookAndFeel.Default static property) specifies the default theme for all DevExpress forms and the DevExpress controls in these forms.

You can make a control use its skin and ignore the default one by setting the control's LookAndFeel.UseDefaultLookAndFeel (UserLookAndFeel.UseDefaultLookAndFeel) option to false, and the LookAndFeel.SkinName (UserLookAndFeel.SkinName) to the required skin.

For more information, see Look And Feel and Skinning.

Expanded Form Title Bar and Border Skinning

DevExpress forms and message boxes have skinned title bars and borders by default.

You can disable default title bar skinning using a compatibility option (see Version Compatibility: Default Property Values) or the WindowsFormsSettings.DisableFormSkins method.

Expanded Additional Themes

Add the DevExpress.BonusSkins assembly to your project to use additional skins that are not included in the basic set described above.

Bonus skins are divided into the following two categories:

Bonus Skins

Theme Skins

To access bonus skins at design time, select Register BonusSkins from the DefaultLookAndFeel component's smart tag. If this command is not available, then the bonus themes have already been registered. Certain DevExpress Project Templates automatically register bonus skins.

To register bonus skins in code, first ensure that your project references the DevExpress.BonusSkins assembly. Then call the DevExpress.UserSkins.BonusSkins.Register method before the main application form runs.

You can apply bonus skins once they are registered. The following code sets the Pumpkin bonus skin as the application's default skin:

Expanded Vector Themes

Vector skins utilize vector images for all UI elements to improve the display quality on high-resolution devices.

Currently, there is only one vector skin available - Bezier. To apply it in code, use the UserLookAndFeel.SetSkinStyle method overload that takes a SkinSvgPalette object as a parameter. This parameter allows you to apply a pre-defined color palette (swatch) to the Bezier skin.

Your end-users can also select swatches at runtime by utilizing the DevExpress.Customization.SvgSkinPaletteSelector dialog.

The following code illustrates how to modify the default color preset (swatch) and\or create additional ones:

For a more traditional swatch selector, create a SkinPaletteRibbonGalleryBarItem button in a Ribbon Control.

You can repaint the Bezier skin and change its color scheme using the updated WinForms Skin Editor. See the Working with Vector Skins article to learn more.

Expanded Provide Runtime Skin Selector UI for End-Users

DevExpress Toolbars and Menus and Ribbon provide pre-defined skin selector items - SkinBarSubItem and SkinRibbonGalleryBarItem - which are automatically populated with available skin items and allow end-users to switch an application theme at any time.

The SkinDropDownButtonItem and SkinPaletteRibbonGalleryBarItem skin selectors provide additional functionality.

The SkinDropDownButtonItem displays available skins in a drop-down list. Unlike SkinBarSubItem, the SkinDropDownButtonItem allows you to search for a specific skin by its name and hide unwanted skin groups.

The SkinPaletteRibbonGalleryBarItem selector displays swatches instead of skins. It is hidden if a traditional raster skin is currently active. Note that this item is only available in the Ribbon Control and does not support the Bar Manager.

You can create all these skin selectors at design time using the Ribbon and Toolbar smart tags.

You can also manually obtain the list of available skin styles and create a custom UI element to switch between them. Refer to the following topics to learn how to use a built-in selector and create a custom one:

Expanded Adjust Skin Colors

DevExpress skins allow you to modify their default color palettes. For example, you can adjust the Office 2016 Colorful skin's default colors (which are based on MS Outlook colors) to match other MS Office applications' color palette.

You can use the pre-defined Color Mixer dialog to adjust the skin color in DevExpress WinForms demos, as shown below.

Use the following code to invoke this dialog in your application:

You can also customize the entire application's (with the DefaultLookAndFeel component) or a specific control's (via its LookAndFeel property) skin color palette at design time or in code.

Member Description
UserLookAndFeel.SkinMaskColor Specifies the primary or background color.
UserLookAndFeel.SkinMaskColor2 Specifies the highlight color.
UserLookAndFeel.SetSkinMaskColors Allows you to set both colors in one call.

You can access these properties at design time.

Call the method below to adjust the skin palette in code.

Expanded Skin Editor: Modify and Re-Package Skins

A skin is a set of bitmaps, fonts, and alignment settings that determine how control elements are painted in all possible states: normal, hot-tracked, selected, etc. DevExpress designers use the Skin Editor application to associate skin attributes with individual controls, and this information is compiled into the skin assemblies mentioned earlier. You can access the Skin Editor application from the DevExpress menu in Visual Studio to modify skins to fit a specific corporate style or re-package skins into lightweight DLLs.

Is this topic helpful?​​​​​​​