The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create New Skins

The following tutorials guide you through the basics of creating custom skins in the DevExpress Skin Editor.

Raster Skins

Vector Skins

Before you begin working on your first custom skin, read the sections below.

Create and Set Up a Skin Editor Project

  1. In Visual Studio, click "DevExpress | WinForms Controls v18.2.2 | Run Skin Editor..." to invoke the Editor.

    Run Skin Editor

  2. Click "New Project" and check one or multiple DevExpress skins to serve as templates for your custom skin. Enter the project name and click "Create Project".

    Skin Editor - New Project

  3. If the "Create full skins" Editor setting is disabled (default state), newly created skins contain no skin elements and their settings are automatically copied from template skins. To be able to modify an inactive element, you first need to click "Activate" to add this element to the skin.

    Activate Element

    This technique allows you to dramatically reduce the skin size, and is helpful for light skin modifications. Otherwise, if you need to heavily modify a skin, enable the "Create full skins" setting. In this case, new skins include all skin elements hard-copied from parent skins.

  4. Each selected skin opens in a separate tab where you can start applying changes right away. You might also want to have the same skins available in their original state in separate tabs so you can restore elements quickly should anything go wrong with customization. To do that, click "+" in the tab panel and select the required skin(s).

    Add Skin

  5. Drawing custom skins requires you to modify bitmaps associated with skin elements using an external graphics editor. Click "Settings..." in the Skin Editor's main menu and specify a path to the graphics editor's .exe file to edit a bitmap in it.

    Skin Editors Settings

Restore Skin Elements

To restore a skin element bitmap, switch to a backup tab and locate this element on a list to the left side of the Skin Editor. Right-click the element and select "Graphics | Copy..." to copy an element background image, icon, or both.

Graphics - Copy Image

Go back to a tab with your custom skin, right-click the same element and select "Graphics | Paste" to restore element bitmaps.

In the same manner, you can also copy and paste element properties (size settings, colors, content margins, etc.) by right-clicking elements and selecting "Style | Copy".

Apply a Skin to the Sample Application

To be able to test your custom skin, create an assembly and register it in your sample application as written in this article. After you have set everything up, click "Create Assembly" and re-start your sample application each time you need to test a modified skin.

The Skin Editor can also run any Visual Studio project and paint it with your custom skin. This allows you to preview a skin in a real-life application without the necessity to export the Skin project into a library and reference it from that application. See the WindowsFormsSettings.AllowSkinEditorAttach property to learn more.