Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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]Document Server
[Expand]Reporting
[Expand]Report 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 ship with many ready-to-use themes or skins. In most of the demo applications, these themes can be viewed in the "Appearances" section of the Ribbon gallery.

In this section, you will learn which styles are available, how to apply a skin to an entire application or to individual controls, how to optimize theme resources when shipping the application, and how to modify existing skins or create your own.

Related topics:

Expanded Basic Skin Set: Themes Inspired by Popular Applications

The following gallery lists skin options from the base collection: themes inspired by popular software applications. These options are defined in the DevExpress.Utils assembly required by all DevExpress controls. This ensures that extra steps are not required to enable these skins, and that they ship with your applications.

Expanded Apply Themes to Individual Controls or to the Entire Application

At design time, to apply a theme to an entire application, add the DefaultLookAndFeel component to the form. Click the smart tag (or the LookAndFeel property in the Properties window) to access skin settings. The UserLookAndFeel.SkinName option specifies the skin style.

Alternatively, call the UserLookAndFeel.SetSkinStyle method of the static class, which is available via the UserLookAndFeel.Default property.

To change the skin for an individual control, under the LookAndFeel property, set the UserLookAndFeel.UseDefaultLookAndFeel option to false, and then set the UserLookAndFeel.SkinName to the required skin. This will force the control to use its own skin settings instead of those provided by the default static object.

In code, use the following two lines.

Expanded Form Themes and Best Practices for Achieving a Consistent UI

Basic DevExpress controls such as SimpleButton or RadioGroup are included as alternatives to standard Visual Studio controls, to achieve a consistent look and feel throughout the application. Note, however, that certain controls (e.g., forms, message boxes and user controls) are not available in the Toolbox, and need to be created in code. See the following articles for a complete list of these controls.

DevExpress Project Templates can automatically add the following code lines that apply DevExpress themes to form title bars and borders. You may need to manually add or remove these lines to the Main() method in Program.cs. Review the SkinManager.EnableFormSkins and SkinManager.EnableMdiFormSkins method descriptions for additional details.

Expanded Additional Themes

The DevExpress.BonusSkins assembly contains all skin styles not included in the basic set described above. A separate DLL gives you the option of excluding these themes from your project, thus making the distribution more lightweight.

Most DevExpress WinForms demos allow you to preview bonus skins, categorized into the following two groups.

Bonus Skins

Theme Skins

Execute the Register BonusSkins action of the DefaultLookAndFeel component to manually register these additional themes. If this action is not available, then the themes have already been registered. This occurs when themes are automatically registered via DevExpress Project templates.

To do the same in code, add a reference to the DevExpress.BonusSkins assembly and call the following method before applying the desired skin style.

Expanded Vector Themes

Vector skins utilize vector images for all UI elements, which allows the application look sharp on high resolution displays.

Currently, there is only one vector skin available - The Bezier. Using the updated WinForms Skin Editor, you can quickly repaint this skin and alternate its color scheme. See the Working with Vector Skins article to learn more. You can also utilize the DevExpress.Customization.SvgSkinPaletteSelector dialog to allow your end-users to instantly re-paint a vector skin using pre-defined color presets (swatches).

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

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.

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

Expanded Adjust Skin Colors

DevExpress Skins allow you to customize an application's color scheme. For example, you can adjust the Office 2016 Colorful skin (based by default on Outlook colors) to match the color pattern of Excel, PowerPoint, or other Office application.

In the DevExpress WinForms demos, you can use the pre-defined Color Mixer dialog to apply these changes – as shown below.

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

At design time or in code, you can also apply color adjustments to all controls via the DefaultLookAndFeel component, or to individual controls. The following API is provided the LookAndFeel property:

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 the properties at design time.

Call the method below to set colors 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 skin assemblies mentioned earlier. You can also access this application via the DevExpress menu in Visual Studio, to accomplish the following: modify skins to fit a specific corporate style or re-package skins into more lightweight DLLs to optimize an application.

How would you rate this topic?​​​​​​​