vcl-405309-expresscrossplatformlibrary-standalone-tools-skin-editor-skin-editor-ui.md
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.
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).
To create a new project, do the following:
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.
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.
FileIncludes all skin load and save options.ProjectLists skin project management options and allows you to build binary skin files (SKINRES).SkinAllows you to manage individual skin elements and color palettes.ViewContains skin preview options and auxiliary commands.HelpAllows you to identify the Skin Editor version and obtain information on command line parameters.
The Skin Editor toolbar displays the following commands, from left to right:
New | Open | SaveAllow you to create a new project, open an existing project, or save the current project.Add Element | Delete ElementCreate 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 SetSwitches 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 v25.2, the Compact option affects only WXI-based skins.
RefreshRedraws the Preview pane.HighlightHighlights the selected skin element in the Preview pane. Alternatively, you can double-click the required skin element in the Product Groups pane.
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.
Each skin tab consists of Product Groups, Preview, Additional Properties , Element Editor , and Element Properties panes:
The Product Groups pane displays all skin elements in groups. The selected skin element is displayed in the Element Editor pane.
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:
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.
The Element Editor pane displays the selected skin element on a pixel grid and allows you to edit skin element settings directly.
MarginsSpin 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 GridSpecifies if the skin element preview displays the pixel grid.StateSwitches between different skin element states: Normal, Hot, Pressed, Disabled, and Active.SectionAllows you to select the required section of the source glyph for the selected skin element state ( State ).Image | GlyphSpecify paths to source image and glyph files.
The Element Properties pane allows you to view and edit properties of the selected skin element.
The Properties tab lists the following general properties of the selected skin element:
AlphaThe skin element opacity that ranges from 0 (transparent) to 255 (opaque).BordersSpecifies skin element boundaries.ColorSpecifies the skin element color.ContentOffsetAllows you to adjust skin element paddings.GlyphStores 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.ImageStores skin element texture (background image) settings.MinSizeSpecifies minimum skin element dimensions.NameSpecifies the skin element name.TextColorSpecifies the skin element font color.
Allows you to preview the changes made in the Properties tab.
Allows you to create additional custom properties for the selected skin element.
The Additional Properties pane lists general settings of the current skin.
ColorsThe Colors tab lists skin element colors.AdditionalThe Additional tab displays skin element dimensions and additional colors.PropertiesThe Properties tab contains miscellaneous optional properties. See Also