Skin Editor UI

• Dec 11, 2024
• 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) to 255 (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.