skineditor-404941-best-practices.md
The Skin Editor is a tool within the DevExpress WinForms UI Library designed to create personalized skins based on pre-built DevExpress skins. With the Skin Editor, you can customize the appearance of specific UI elements to suit your design requirements and preferences. For example, you can modify paddings, change background and foreground colors of buttons, save modifications as a new custom skin, and seamlessly integrate the custom skin into your WinForms application.
More complex customization that affects various appearance and layout settings of different DevExpress controls requires advanced expertise. Complex customization can also introduce potential issues that may affect the application’s functionality, layout, and user experience.
This topic outlines customization options introduced by DevExpress controls as an alternative to custom skin creation. With built-in functionality, you can achieve a high level of customization and help maintain compatibility with future updates of DevExpress controls. First, try using the following customization options as they are supported by most DevExpress controls. We only recommend creating a custom skin if the built-in functionality of the DevExpress control does not allow you to achieve the desired result.
DevExpress controls introduce comprehensive APIs that include dozens of appearance, display, and behavior properties. Do not create a custom skin if you can achieve the desired customization by setting corresponding properties of DevExpress controls.
Read the following topic for additional information: Appearance Settings of DevExpress Controls.
Grid-based controls introduce events that allow you to customize the appearance of data rows and cells based on a specific condition:
Most DevExpress controls implement CustomDraw~ events. Handle these events to paint specific UI elements.
Read the following topic for additional information: Custom Painting.
The DevExpress Project Settings page in Visual Studio allows you to create/modify color palettes of skins and instantly apply global settings across an entire project. Use DefaultFont and DefaultMenuFont properties to change the default font for all controls and menus.
Read the following topics for additional information:
Use HTML & CSS templates to create custom UI elements for DevExpress HTML/CSS-aware controls (and eliminate manual painting within CustomDraw~event handlers). With the WinForms HTML/CSS engine, you can customize ListBox and Combobox items, Cards within the Grid’s TileView/ItemsView/WinExplorerView, Scheduler appointments, message boxes, tooltips, etc. You can retrieve values from data fields for data-aware controls, implement bindings based on a condition, and use DevExpress skin colors.
Read the following blog post for additional information: WinForms HTML & CSS Support: Best Practices.
Watch Video: WinForms HTML CSS: Create Your First Template
Use the Skin Editor to customize appearance settings (for example, the border, paddings, background and foreground colors) of DevExpress controls of the same type in the application, rather than an individual (single) control. For example, you can modify the appearance of Form headers or check boxes.
Note
UI elements of the same type can be used in various DevExpress controls. Modifying such an element will result in changes wherever that element is used. For example, if you change the height of a group panel’s header this may also affect the height of headers in the Layout Control.
Use the Skin Editor to upgrade/convert a custom skin to a new DevExpress version:
The Skin Editor is not intended to create skins from scratch. Use the Skin Editor to create skins and color palettes based on pre-built DevExpress skins.
Do not create very complex skins. Excessive customization (for example, when you modify fonts, colors, and paddings in most of our controls) can introduce potential issues that may affect the application’s functionality:
Do not use the Skin Editor to modify a specific setting (such as the default font size) in all DevExpress controls. Use WindowsFormsSettings to change the appearance and behavior of DevExpress controls in your application (for example, the default font, menu font, form border style, form shadow).