Best Practices
- 5 minutes to read
Considerations Before You Create a Custom Skin
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.
Appearance Customization That Does Not Require the Skin Editor
Customize Appearance Settings of DevExpress Controls
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.
Customize Appearance of Rows and Cells Based on a Condition
Grid-based controls introduce events that allow you to customize the appearance of data rows and cells based on a specific condition:
Custom Paint UI Elements of DevExpress Controls
Most DevExpress controls implement CustomDraw~ events. Handle these events to paint specific UI elements.
Read the following topic for additional information: Custom Painting.
Change the Default Font and Customize the Color Palette
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:
- DevExpress Project Settings
- How To: Create or Modify Color Palettes of DevExpress Skins
- How To: Customize the Appearance of DevExpress Controls in the Application
Create HTML & CSS Templates
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.
When to Use the Skin Editor
Customize Appearance of Controls of the Same Type in the Application
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.
Upgrade a Custom Skin to a New DevExpress Version
Use the Skin Editor to upgrade/convert a custom skin to a new DevExpress version:
- Run the Skin Editor (the new version).
- Load the custom skin. The Skin Editor automatically updates the custom skin.
- Export and register the updated custom skin.
- Update references to the custom skin in your WinForms project.
When Not to Use the Skin Editor
Do Not Create a Custom Skin from Scratch
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 Over-Customize 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:
- Visual inconsistencies across different controls or form elements (for example, controls may overlap, stretch incorrectly, or become misaligned).
- Maintenance challenges when you need to modify the skin.
- Compatibility issues with new versions of DevExpress controls.
Do Not Modify a Specific Setting for All Controls
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).