Skin Editor UI
- 6 minutes to read
A skin determines how to display all visual elements in DevExpress VCL controls. The Skin Editor provides the functionality to design custom skins with built-in ExpressSkins.
The editor includes:
The Main Menu;
The Welcome dialog;
The Project Manager dialog;
The Product Groups pane;
The Preview pane;
The Additional Properties pane;
The Element Editor pane;
The Element Properties pane.
Skin Editor is a tool allowing you to both modify existing bitmap and SVG-based skins and derive custom skins from them. This editor displays each skin on a separate tab, thus allowing you to work with multiple skins simultaneously and compare the corresponding elements by switching between tabs. Skin tabs simplify navigation within the Product Groups pane because it shows elements of only a single skin at a time.
Main Menu
Main menu divides all the available commands into the following Skin Editor functionality categories that you can use to:
File — Manage skin projects and import DevExpress WinForms skins;
Project — Add a skin template to a project and build it;
Skin — Manage an individual skin element and define a color scheme for it;
View — Preview the created skin and set the editor UI;
Help —Obtain Skin Editor version and command line parameters information.
Welcome dialog
This dialog is displayed when you launch Skin Editor. It allows you to create a new project or select an existing skin from the recent projects list.
To create a new project you need to execute the following steps:
Specify the project name.
Set the full path to the project file. You are able to specify it manually or click the ellipsis button and select the target folder that contains the project files.
Select one or more skins from the Templates list to use them as the base for your own skins;
Specify the skin name in the “Skin name” field.
To open the previously created project, switch to the “Recent Projects” tab and select the required list item or load the project via the Open dialog that is displayed when clicking the Browse button.
Project Manager dialog
This dialog allows you to manage skins within the currently opened project. You can invoke the “Project Manager” dialog by clicking the corresponding item in the Project drop-down menu or pressing the Ctl+Alt+F11 key combination.
You are able to:
Add new or delete previously created skins from the project;
Switch between skins by double-clicking the required item name or via the Activate button;
Rename existing skins;
Add an optional description to the skin by invoking the “Skin Details” dialog;
Reorder skins by clicking the “Move Up” and “Move Down” buttons.
Product Groups
Use this pane to explore project structure as a tree and select a skin element for further customization. To create a new element for a specific VCL product, right-click and select the “Add Element” menu item.
Preview
Displays all the changes applied to the current skin and allows you to preview its appearance on control’s samples.
Additional Properties
Hosts the general settings of the current skin. The “Additional Properties” pane includes:
The Colors tab that contains skin element colors. You can select a color for each skin element either from the predefined set or using the color picker that you can invoke by clicking the ellipsis button;
The Additional tab that displays skin element dimensions and additional colors;
The Properties tab that shows miscellaneous optional properties.
Element Editor
Displays settings of the current skin skin element element.
“Element Editor” consists of:
The “Margins” editors that allow you to crop the selected element’s associated texture down to the target dimensions. Skin Editor automatically scales the resulting texture to the element’s dimensions. You can adjust bounding box boundaries by using spin editors or by dragging the corresponding red lines within the zoomed image preview area. Each spin editor value is limited by both the opposite boundary position and texture’s linear size.
Zoom factor radio buttons allow you to zoom the currently selected skin element in or out, thus expanding or shrinking the preview area.
The zoomed image preview area displays the selected skin element’s per-pixel view. This area is a visual alternative to the margin editors, allowing you to confine the used portion of the skin element’s texture by dragging the auxiliary red lines. A double-click on the preview area invokes the default image viewer where you can browse the skin element texture. To choose another application, you need to double-click the area while holding the Ctrl key.
The “State” combo box allows you to switch between different versions of the visual element appearance that correspond to all available states of the element.
The “Section” spin editor allows you to select a required glyph section for the currently selected state of the visual element.
Paths to the image and glyph files. You can use the “Image” and “Glyph” fields or the corresponding “Open File” buttons to load source image files for use as the skin element’s background and foreground, respectively.
Element Properties
Displays the skin element default properties. The “Element Properties” pane includes:
Properties tab that hosts the general properties of each element. The table below lists these properties:
| Property | Description |
|---|---|
| Alpha | Use this property to adjust the skin element transparency. You can set a value within the range between 0 (transparent) and 255 (opaque), inclusive. |
| Borders | Use this property to set the skin element boundaries. |
| Color | This property allows you to set the skin element color. You can choose it from the “Palette Colors”, “Custom Colors”, and “Built-in colors” sets. |
| ContentOffset | This property allows you to set the skin element padding. |
| Glyph | Provides access to the skin element’s glyph settings. A skin glyph is an image comprised of multiple individual contiguous images corresponding to all possible states of a particular skin element (such as normal, pressed, disabled, etc.). |
| Image | Provides access to the skin element’s texture settings. The texture is an image used as the visual element’s background. |
| MinSize | Use this property to set the minimum height and width of the skin element. |
| Name | This property allows you to specify the skin element name. |
| TextColor | Use this property to set the skin element text color. |
The Preview tab displays all the changes applied to the skin element.
The Additional tab allows you to add custom properties for the skin element. Additionally, you can adjust and/or add gradient settings for the gradient-enhanced paint mode.