Skins
- 9 minutes to read
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.
- Basic Skin Set: Themes Inspired by Popular Applications
- Apply Themes to Individual Controls or to the Entire Application
- Form Themes and Best Practices for Achieving a Consistent UI
- Additional Themes
- Vector Themes
- Provide Runtime Skin Selector UI for End-Users
- Color Mixer: Adjust Skin Colors
- Skin Editor: Modify and Re-Package Skins
Related topics:
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.
1. DevExpress Style
2. DevExpress Dark Style
3. Office 2016 Colorful
4. Office 2016 Dark
5. Office 2016 Black
6. Office 2013 White
Skin name: Office 2013
7. Office 2013 Dark Gray
8. Office 2013 Light Gray
9. Office 2010 Blue
10. Office 2010 Black
11. Office 2010 Silver
12. Visual Studio 2013 Blue
13. Visual Studio 2013 Dark
14. Visual Studio 2013 Light
15. Seven Classic
16. Visual Studio 2010
Skin name: VS2010
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.
simpleButton1.LookAndFeel.UseDefaultLookAndFeel = false;
simpleButton1.LookAndFeel.SetSkinStyle("Office 2016 Colorful");
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.
using DevExpress.Skins;
// ...
SkinManager.EnableFormSkins();
SkinManager.EnableMdiFormSkins();
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
1. Black
2. Blue
3. Caramel
4. Coffee
5. Dark Side
6. Darkroom
7. Foggy
8. Glass Oceans
9. High Contrast
10. iMaginary
11. Lilian
12. Liquid Sky
13. London Liquid Sky
14. Metropolis
15. Metropolis Dark
16. Money Twins
17. Office 2007 Black
18. Office 2007 Blue
19. Office 2007 Green
20. Office 2007 Pink
21. Office 2007 Silver
22. Seven
23. Sharp
24. Sharp Plus
25. Stardust
26. The Asphalt World
Theme Skins
1. Pumpkin
2. Springtime
3. Summer
Skin name: Summer 2008
4. Valentine
5. Xmas (Blue)
Skin name: Xmas 2008 Blue
6. McSkin
7. Blueprint
8. Whiteprint
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.
Vector Themes
Vector skins utilize vector images for all UI elements, which improves display quality for high resolution devices.
Currently, there is only one vector skin available - Bezier. Using the updated WinForms Skin Editor, you can quickly repaint this skin and change 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).
using (SvgSkinPaletteSelector svgSkinPaletteSelector = new SvgSkinPaletteSelector(ownerForm)) {
svgSkinPaletteSelector.ShowDialog();
}
The following code illustrates how to modify the default color preset (swatch) and\or create additional ones:
//obtain a vector skin
var commonSkin = CommonSkins.GetSkin(LookAndFeel);
//create a new palette
SvgPalette svgPalette = new SvgPalette();
//set up palette colors
svgPalette.Colors.Add(new SvgColor("Paint", Color.FromArgb(242, 242, 242)));
svgPalette.Colors.Add(new SvgColor("Paint High", Color.FromArgb(255, 255, 255)));
svgPalette.Colors.Add(new SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)));
svgPalette.Colors.Add(new SvgColor("Brush", Color.FromArgb(80, 80, 80)));
svgPalette.Colors.Add(new SvgColor("Brush Light", Color.FromArgb(150, 150, 150)));
svgPalette.Colors.Add(new SvgColor("Brush High", Color.FromArgb(80, 80, 80)));
svgPalette.Colors.Add(new SvgColor("Brush Major", Color.FromArgb(180, 180, 180)));
svgPalette.Colors.Add(new SvgColor("Brush Minor", Color.FromArgb(210, 210, 210)));
svgPalette.Colors.Add(new SvgColor("Accent Paint", Color.FromArgb(23, 107, 209)));
svgPalette.Colors.Add(new SvgColor("Accent Paint Light", Color.FromArgb(191, 224, 255)));
svgPalette.Colors.Add(new SvgColor("Accent Brush", Color.FromArgb(255, 255, 255)));
svgPalette.Colors.Add(new SvgColor("Accent Brush Light", Color.FromArgb(81, 148, 224)));
svgPalette.Colors.Add(new SvgColor("Key Paint", Color.FromArgb(71, 71, 71)));
svgPalette.Colors.Add(new SvgColor("Key Brush", Color.FromArgb(255, 255, 255)));
svgPalette.Colors.Add(new SvgColor("Key Brush Light", Color.FromArgb(150, 150, 150)));
svgPalette.Colors.Add(new SvgColor("Red", Color.FromArgb(226, 54, 66)));
svgPalette.Colors.Add(new SvgColor("Green", Color.FromArgb(60, 146, 92)));
svgPalette.Colors.Add(new SvgColor("Blue", Color.FromArgb(58, 116, 194)));
svgPalette.Colors.Add(new SvgColor("Yellow", Color.FromArgb(252, 169, 10)));
svgPalette.Colors.Add(new SvgColor("Black", Color.FromArgb(122, 122, 122)));
svgPalette.Colors.Add(new SvgColor("Gray", Color.FromArgb(190, 190, 190)));
svgPalette.Colors.Add(new SvgColor("White", Color.FromArgb(255, 255, 255)));
//replace the default color palette with a custom one
commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName].CustomPalette = svgPalette;
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();
//or
//add a new swatch
commonSkin.CustomSvgPalette.Add(new SvgPaletteKey("Name", CustomSvgPalette.Count), svgPalette);
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.
- 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
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.
using DevExpress.XtraEditors.ColorWheel;
//..
ColorWheelForm cwForm = new ColorWheelForm();
cwForm.Show();
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.
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.
