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]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]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Skins

DevExpress WinForms controls support dozens of predefined themes or skins. Most demo applications allow you to try these themes using a specially designed Ribbon gallery.

In this section, you will learn which styles are available to you, how to apply a skin to an entire application or to individual controls, how to optimize theme resources when shipping your 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 basic collection: themes inspired by popular software applications. These options are defined in the DevExpress.Utils assembly required by all DevExpress controls. This means that no extra steps are necessary to enable these skins and that they are always shipped with your applications.

Expanded Apply Themes to Individual Controls or to the Entire Application

To apply a theme to your entire application at design time, add the DefaultLookAndFeel component onto your form. Access skin settings using the smart tag or (in the Properties window) under the LookAndFeel property. The skin style is specified by the UserLookAndFeel.SkinName option.

Alternatively, call the UserLookAndFeel.SetSkinStyle method of the static class available through the UserLookAndFeel.Default property.

To change the skin used by an individual control, use that control's LookAndFeel property to disable the UserLookAndFeel.UseDefaultLookAndFeel option and then specify UserLookAndFeel.SkinName. By doing so, you will force the control to use its own skin settings rather than reading information from the default static object.

In code, use the following two lines.

Expanded Form Themes and Best Practices for Achieving a Consistent UI

The DevExpress WinForms Subscription includes basic controls such as a SimpleButton or RadioGroup to allow you to replace standard Visual Studio counterparts and thus achieve a consistent look and feel throughout your application. Note that several of the controls you may need - forms, message boxes, user controls and so on - cannot be made available directly from the Toolbox and need to be created in code. To review the complete list of these controls, use the following two links.

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 these lines to the Main() method in Program.cs, or remove them from there. 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 with the basic set described above. A separate DLL gives you the option of not shipping these themes with your project, thus making the distribution more lightweight.

Most of DevExpress WinForms demos allow you to preview these bonus skins, and the theme selectors usually break them down into the following two groups.

Bonus Skins

Theme Skins

To manually register these additional themes, execute the Register BonusSkins action of the DefaultLookAndFeel component. If you don't see this action available, then the themes have already been registered. This can happen if you've used DevExpress Project templates that perform the registration automatically.

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

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 all available skin items and allow end-users to switch the application theme at any time.

You can also manually obtain the list of currently available skin styles and then create a custom UI element to switch between styles. To learn more about using built-in selectors and building a custom one, refer to the following topics.

Expanded Adjust Skin Colors

DevExpress Skins allow you to adjust the application's color scheme. For example, although the included Office 2016 Colorful skin is based on Outlook's colors, you can easily adjust it to match the colors of Excel, PowerPoint or other applications from the Office family.

Most demos shipping with DevExpress WinForms controls allow you to apply these changes using the pre-defined Color Mixer dialog, as shown below.

To invoke this dialog in your applications, use the following code.

You can also apply color adjustments at design time or using code: either centrally, using the DefaultLookAndFeel component, or to individual controls. The following API is provided by the object available using 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.

If you need to set the colors in code, you can call the method.

Expanded Skin Editor: Modify and Re-Package Skins

Internally, a skin is a set of bitmaps, fonts, and various alignment settings that determine how control elements are painted in all its possible states: normal, hot-tracked, selected, and so on. DevExpress designers use the Skin Editor application to associate skin attributes with individual controls and that information then gets compiled into the skin assemblies mentioned earlier in this document. You also have access to this application using the DevExpress Menu in Visual Studio, so you can basically accomplish two goals: modify skins so that they better fit the corporate style or re-package skins into more lightweight DLLs to optimize your applications.

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