Skin Editor UI
- 6 minutes to read
The Skin Editor allows you to create custom skins based on any skin shipped with DevExpress VCL components. You can import one or more DevExpress skins into your skin project and use multiple built-in tools that help you find, edit, and preview your changes in individual vector or raster skin elements.
Welcome Dialog and Project Creation
The Welcome dialog appears every time you launch the Skin Editor and prompts you to create a new project or open an existing skin project (SKINPROJ).
Create a New Project
To create a new project, do the following:
- Specify the required project name or accept the automatically generated name based on selected templates in the New Project tab.
- Select the project location.
- Check all built-in DevExpress skins you need to use as the base for custom skins (the Templates list).
- Click the Ok button.
The resulting project includes all source skins selected as templates. The Skin Editor displays each skin in a separate tab. You can click the Add button to create an additional skin in an existing project.
Refer to the following section for detailed information on panes and tools available in skin tabs: Skin Tab Layout.
Open an Existing Project
To open an existing SKINPROJ file, click the Recent Project tab in the Welcome dialog and select the required skin project in the list or click the Browse… button to select a skin project in the file system.
General-Purpose Commands and UI Elements
Main Menu
- File
- Includes all skin load and save options.
- Project
- Lists skin project management options and allows you to build binary skin files (SKINRES).
- Skin
- Allows you to manage individual skin elements and color palettes.
- View
- Contains skin preview options and auxiliary commands.
- Help
- Allows you to identify the Skin Editor version and obtain information on command line parameters.
Toolbar
The Skin Editor toolbar displays the following commands, from left to right:
- New | Open | Save
- Allow you to create a new project, open an existing project, or save the current project.
- Add Element | Delete Element
- Create or delete custom skin elements.
- Palette Selection | Color Palettes
This toolbar group allows you to switch between available color palettes for the active vector skin and open the Color Palettes dialog. You can use this dialog to create custom palettes for vector skins.
Note
Palette selection buttons are hidden for a raster skin because raster skins do not support palettes.
- Use Original/Alternate Image Set
- Switches between basic and gradient-enhanced image draw modes.
- Compact
Switches between base and compact versions of the same skin.
This option affects only those skins that have two versions with different skin element sizes and paddings. In v24.2, the Compact option affects only
WXI-based skins.- Refresh
- Redraws the Preview pane.
- Highlight
- Highlights the selected skin element in the Preview pane. Alternatively, you can double-click the required skin element in the Product Groups pane.
Project Manager Dialog
The Project Manager dialog allows you to manage skins in the current project. To open this dialog, click the Project | Project Manager option in the main menu or press the Ctrl+Alt+F11 key combination.
Skin Tab Layout
Each skin tab consists of Product Groups, Preview, Additional Properties, Element Editor, and Element Properties panes:
Product Groups
The Product Groups pane displays all skin elements in groups. The selected skin element is displayed in the Element Editor pane.
Available Operations
- You can browse the tree-like structure of the current skin and use the search box to narrow down the available selection.
- A double-click on a skin element highlights it in the [Preview] pane if the element is visible.
- The context menu allows you to add new skin elements, hide or display unused skin elements, and highlight the selected skin element in the Preview pane.
Preview
The Preview pane displays the current state of skin elements as corresponding UI elements in the selected product group. You can interact with UI elements in the Preview pane – click buttons, display drop-down windows, etc.
The Preview pane highlights the double-clicked skin element in the Product Groups pane. Alternatively, you can click the Highlight button in the Skin Editor toolbar to highlight the selected skin element.
If the Skin Editor is unable to highlight the double-clicked skin element for any reason, the following notification appears:
Target Element Dialog
Ctrl-click a UI element in the Preview pane to display the modal Target Element dialog populated with skin elements used in the target control/UI element group:
A click on a skin element displays it in the Element Editor pane. If you Ctrl-click a skin element in the Target Element dialog, the Preview pane highlights this skin element in all UI elements currently visible in the Preview pane.
Element Editor
The Element Editor pane displays the selected skin element on a pixel grid and allows you to edit skin element settings directly.
- Margins
- Spin editors used to crop the skin element glyph to fit target dimensions.
- Zoom Factor
- x2, x4, x8, and x10 radio buttons allow you to zoom the skin element preview.
- Show Grid
- Specifies if the skin element preview displays the pixel grid.
- State
- Switches between different skin element states: Normal, Hot, Pressed, Disabled, and Active.
- Section
- Allows you to select the required section of the source glyph for the selected skin element state (State).
- Image | Glyph
- Specify paths to source image and glyph files.
Element Properties
The Element Properties pane allows you to view and edit properties of the selected skin element.
Properties Tab
The Properties tab lists the following general properties of the selected skin element:
- Alpha
- The skin element opacity that ranges from
0(transparent) to255(opaque). - Borders
- Specifies skin element boundaries.
- Color
- Specifies the skin element color.
- ContentOffset
- Allows you to adjust skin element paddings.
- Glyph
- Stores skin element glyph settings. A skin glyph can consist of multiple images that correspond to all possible skin element states: Normal, Hot, Pressed, Disabled, and Active.
- Image
- Stores skin element texture (background image) settings.
- MinSize
- Specifies minimum skin element dimensions.
- Name
- Specifies the skin element name.
- TextColor
- Specifies the skin element font color.
Preview Tab
Allows you to preview the changes made in the Properties tab.
Additional Tab
Allows you to create additional custom properties for the selected skin element.
Additional Properties
The Additional Properties pane lists general settings of the current skin.
- Colors
- The Colors tab lists skin element colors.
- Additional
- The Additional tab displays skin element dimensions and additional colors.
- Properties
- The Properties tab contains miscellaneous optional properties.