Log In
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Collapse]Tools and Utilities
 [Expand]Project Converter
  Assembly Deployment Tool
 [Expand]ASP.NET Theme Builder
 [Expand]ASP.NET Theme Deployer
 [Collapse]WinForms Skin Editor
  [Collapse]Create New Skins
    Common Information and Testing Project
    Modify XtraForm Skin Elements
    Modify Tab Pane and Recent Item Control Skin Elements
  [Expand]Export and Use Custom Skins
 [Expand]WPF Theme Editor
 [Expand]WPF Theme Designer
 [Expand]XPO Profiler
 [Expand]Coded UI Test Extension
  Localization Service
 End-User Documentation

Create New Skins

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

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

Expanded Create and Set Up a Skin Editor Project

  1. In Visual Studio, click "DevExpress | WinForms Controls v17.1.7 | Run Skin Editor..." to invoke the 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".

  3. 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).

  4. Drawing custom skins require 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.

Expanded Restore Skin Elements

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

Go back to a tab with your custom skin, right-click an 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 an element and selecting "Style | Copy".

Expanded Apply a Skin to the Sample Application

To be able to test your custom skin quickly, 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.

How would you rate this topic?​​​​​​​