WinForms Skin Editor

WinForms Skin Editor

The Skin Editor is a tool for modifying skins included with the DevExpress WinForms installation. Custom skins can be exported to a distributable library and reused in your applications.

Landing Page Image

To launch the Skin Editor, click the "Run Skin Editor..." item in the Visual Studio's DevExpress menu.

  • Workspace

    Learn how to navigate and use the Skin Editor workspace.

  • Create New Skins

    A set of tutorials that guide you through the basics of custom skin development.

  • Export and Apply Custom Skins

    Learn how to distribute your custom skins.

Copyright(c) 1998-2021 Developer Express Inc. All rights reserved.
Send Feedback on this topic to DevExpress.


Workspace

Use this section to learn how to navigate and use the Skin Editor workspace.

  • Projects and Skins
  • Main Window Layout
  • Ribbon Commands
  • Working in Skin Editor
  • Dialogs
  • Tools
  • Shortcuts

Projects and Skins

In the Skin Editor, you need to create a project first, and then populate it with as many skins as you need. A skin is a set of bitmaps that determine how control elements look. A project is a set of skins, distributed as a separate .dll library.

You do not have to create new skins from scratch. Instead, add standard DevExpress skins to your project as templates and modify them.

Main Window Layout

The figure below illustrates the layout of a Skin Editor's main window.

Each Skin Editor tab contains a project skin. The "+" button allows you to add a new skin to a project. If you only want to have tabs for the skins you are currently working on, use the "Loaded Skins" dialog.

Ribbon Commands

Button - Undo Undo

Discards the previously applied change.

Button - Redo Redo

Re-applies the previously discarded modification.

Button - Save Save

Saves the current skin.

Button - Refresh Refresh

Refreshes the Skin Editor preview area.

Button - Allow Touch Allow Touch

Specifies whether or not a selected skin element should be drawn differently on touch-input devices.

Button - Color 1 Button - Color 2 Button - Color None Color Selectors

Allows you to choose whether to colorize a selected element with "Color 1" or "Color 2". You can use the Color Mixer dialog to modify these colors. No custom colorization applies if "None" is selected.

Button - DPI selector DPI Scale Selector

Use this selector to load different element bitmaps for different DPI modes.

Button - Icon Palette Icon SVG Palette

Allows you to change colorization rules for vector icons.

Button - Touch Mode Touch Mode

Allows you to switch the Skin Editor to the tablet mode for a better usability on touch input devices.

Button - Touch Scrolling Touch Scrolling

Allows you to change classic scroll bars to TouchUI scroll bars in the Skin Editor preview.

Button - Find Element Search

Searches for skin elements by their names.

Button - Highlight Highlight Element

Selecting this option highlights an element you select from the skin element list in the Skin Editor preview area.

Button - Settings Skin Settings

Invokes the "Skin Settings" dialog.

Button - Mixer Color Mixer

Allows you to modify the main and accent skin colors.

Button - Magnifier Magnifier

Displays the Magnifier tool. Hover over the desired element and left click it to copy its color to the clipboard.

Button - Workshop SVG Workshop

Provides access to a collection of shapes and icons drawn by DevExpress designers team. Use them to replace background and glyph images in vector skins.

Button - SVG Palette SVG Palette

Allows you to modify the vector skins's color palette.

Button - Preview External Application Preview

Displays a sample form with DevExpress controls where you can preview your skin. See the WindowsFormsSettings.AllowSkinEditorAttach setting to learn more.

Working in Skin Editor

To create a custom skin, modify skin elements. If you Ctrl+click the Preview area, the Skin Editor will tell you what skin elements lie underneath your pointer. You can also press the highlight button in the Ribbon. Then, when you toggle through skin elements, the selected element blinks in the Preview area.

TIP

If you prefer to search for skin elements by their real names (the names control painters use in code), go to "Main Menu | Settings | Skin Elements" and uncheck the "Use Element Aliases" option.

In applications, control painters first draw a framework of an element according to its settings (size, content margins, back color, etc.). You can modify these properties in the Property Grid.

Skin Editor - Property Grid

When an element framework is ready, a background bitmap is painted above it, followed by an icon bitmap. Bitmaps are sliced horizontally into multiple pieces, one piece for each supported element's visual state (normal, hovered, pressed, etc.). The figure below illustrates background and glyph bitmaps for the form's "Close" button, which supports five visual states.

Click an element state to preview it and modify sizing margins. You can also open and modify a bitmap in an external graphics editor.

Sizing margins break a bitmap for this visual state down into nine regions. Corners are drawn above the corners of a UI element as is. Other parts are scaled according to the element's Stretch property. The figure below illustrates the SimpleButton background bitmap. Four pixel margins from each bitmap side ensure that rounded button corners are not distorted regardless of the button's size.

See Also
Dialogs
Tools
Shortcuts


Dialogs

  • Recent Projects
  • Loaded Skins
  • Project Manager
  • Skin Comparer
  • Skin Editor Settings
  • Skin Settings
  • Search Element Dialog

Recent Projects

Displays projects you have recently worked on. Click the pin button to show this project at the top of the dialog, then right-click it and select "Remove from this list" to remove it from this list.

This dialog automatically appears on-screen when the Skin Editor starts and is accessible through the Skin Editor's main menu.

Loaded Skins

Displays all skins included in the project. Skins with check marks open in separate main window tabs and are available for editing. Uncheck skins you are not currently working on to hide their tabs (skins will remain in the project).

To invoke this dialog, click "Loaded Skins..." in the Skin Editor main menu.

Project Manager

Allows you to rename and remove skins included in the selected project.

In the "Export" tab, you can produce a .dll library that contains all the skins included in the project. See this article to learn how to register assemblies and apply custom skins.

To invoke this dialog, click "Project Manager..." in the Skin Editor main menu.

Skin Comparer

In this dialog, you can compare skin element settings of the skins included in your project. Use the "Show values" selector to view all skin elements or only those whose settings differ from each other.

Click "Compare Skins..." in the Skin Editor main menu to view this dialog.

Skin Editor Settings

Provides access to global Skin Editor settings. In the "Common Settings" tab, you can set up the project auto-save intervals and specify an external graphics editor for editing skin element bitmaps.

Skin Editors Settings

Settings available in the "Elements" and "Properties" dialog tabs allow you to customize the skin element's list and property grid.

Skin Editor Settings Page 2-3

This dialog invokes when you click "Settings..." in the Skin Editor main menu.

Skin Settings

Provides access to the current skin's advanced settings.

To view this dialog, press the gear icon ( Button - Settings) within the main window Ribbon.

Search Element Dialog

Skin elements display different names, depending on whether or not element aliases are enabled in Editor settings. The Search Element dialog allows you to search for elements regardless of this setting by real names and aliases.

To invoke this dialog, click the "Search" Ribbon command ( Button - Find Element) or press the Ctrl+F shortcut.


Shortcuts

This document lists all the Skin Editor's shortcuts.

Ribbon and Common Editor Shortcuts

UI - Ribbon

  • F4 - SVG Workshop
  • F5 - refresh
  • Shift+Ctrl+F5 or Shift+Ctrl+Refresh button click - restart the Skin Editor and re-open the project
  • F6 - edit the icon SVG Palette
  • F7 - edit the common SVG Palette
  • F9 - show the preview
  • F12 - Magnifier
  • Ctrl+Shift+W - Color Mixer
  • Ctrl+S - save
  • Ctrl+Z - undo
  • Ctrl+Y or Ctrl+Shift+Z - redo
  • Ctrl+W - close the current tab
  • Ctrl+H - highlight the selected element
  • Ctrl+F - global search
  • Ctrl+N - new project
  • Ctrl+O - open project
  • Ctrl+Shift+O - recent projects
  • Ctrl+Shift+L - loaded skins

Skin Element Selector Shortcuts

UI - Skin Element Selector

  • Double click - edit the element image and glyph
  • Delete - remove the selected item(s)
  • Ctrl+R - rename the element
  • Ctrl+C - copy the selected item
  • Ctrl+V - paste the item to the current skin
  • Ctrl+Shift+V - paste the item to multiple skins (opens the dialog to select target skins)
  • Ctrl+Alt+C - copy the element graphics and style
  • Ctrl+Alt+V - paste the element graphics
  • Ctrl+Alt+Shift+V - paste element graphics to multiple skins
  • Ctrl+Alt+P - paste the element style
  • Ctrl+Alt+Shift+P - paste the element style to multiple skins

Property Grid Shortcuts

UI - Property Grid

  • Ctrl+C - copy the selected property(s)
  • Ctrl+V - paste the property(s) to the current skin
  • Ctrl+Shift+V - paste the property(s) to multiple skins
  • Ctrl+Alt+C - copy the selected property value
  • Ctrl+Alt+V - paste the copied property value to the currently selected property(s)
  • Ctrl+R - rename the selected property

State Preview Area Shortcuts

UI - State Preview

  • Double click - edit element image
  • Control+Double click - edit element glyph
  • Delete - remove selected state image
  • Ctrl+Delete - remove selected state glyph
  • Ctrl+R - rename the selected state
  • Ctrl+C - copy the state image
  • Ctrl+V - paste the state image
  • Ctrl+Alt+C - copy the state glyph
  • Ctrl+Alt+ V - paste the state glyph


Tools

  • Magnifier
  • Skin Element Colorization and Color Mixer

Magnifier

Click the magnifier icon ( Button - Magnifier) within the main window Ribbon to invoke the Magnifier tool. You can scroll up or down to zoom a hovered element in or out when the Magnifier is active. Press the left mouse button to copy a color under the Magnifier's crosshair to the clipboard.

Skin Element Colorization and Color Mixer

DevExpress skins apply a specific hue to certain controls based on the skin's main color. In addition to this main color, a skin can also have an accent color used to highlight elements. These colors can be applied differently depending on the current blending mode, which you can change in the Skin Settings dialog. "Color 1", "Color 2" and "None" buttons in the main window Ribbon allow you to either colorize an element using the main color, accent color, or to desaturate this element.

Ribbon - Color Selectors

You can modify main and accent colors of a skin with the help of the "Color Mixer" tool.

Note that the Color Mixer is a tool for previewing different skin color variations and not for creating new ones.


Create New Skins

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

Raster Skins

  • Common Information and Testing Project
  • Modify XtraForm Skin Elements
  • Modify Tab Pane and Recent Item Control Skin Elements

Vector Skins

  • Working with 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 v19.2.12 | 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 light skins" Editor setting is enabled (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.

    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.

    NOTE

    If you created a light skin, along with the assembly that contains your custom skin, you should also add the assembly that contains the base skin to the project. For example, if you create a light skin based on a bonus skin, you should add the DevExpress.BonusSkins.v19.2.dll to the project.

    You can add bonus skins in the DevExpress Project Settings page.

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

  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.


Common Information and Testing Project

The custom skin created in these tutorials makes the dialogs look like the following:

Graphite - Ready Dialog

Testing Application

  1. In Visual Studio, create a new WinForms application using the "Blank Application" template from the DevExpress Template Gallery. This template replaces the standard form with its DevExpress counterpart that supports skinning.
  2. Remove the Minimize, Maximize and Close form buttons by disabling the MinimizeBox, MaximizeBox and XtraForm.CloseBox properties.
  3. Add a Tab Pane control and set its Dock property to Fill.
  4. Set up the NavigationPageBase.PageText property for each NavigationPage owned by the Tab Pane. This property specifies the caption within page headers.
  5. Add a sample content to each page. For example, the "Recent Projects" tab in this example contains the RecentItemControl populated with pin items.
  6. Remove the outer Recent Item Control borders by setting the BaseControl.BorderStyle property to NoBorder and disable the RecentItemControl.ShowSplitter property to hide the splitter that delimits control in the main and content areas.

  7. Launch the application to see your form with the default "DevExpress Style" skin applied.

Next Steps

To begin designing a sample custom skin, follow the steps below.

  • Modify XtraForm Skin Elements
  • Modify Tab Pane and Recent Item Control Skin Elements


Modify XtraForm Skin Elements

  1. In the Skin Editor, select the "Form" skin element group. In the property grid, set the Text Color property to #F88E1D and clear the Text Shadow Color setting. Note that depending on the current Skin Editor settings, property names may differ.
  2. Select the "Common" skin element group and change the "Control" color to #F7F7F7.

  3. Locate and click the "FormCaption" skin element that represents the form title bar to see its default settings.

    Form Caption - DX Style

    • This element has a background image for each state (active and inactive).
    • Background image side margins are set to 5 pixels, top and bottom margins are set to 1 pixel.
    • The form caption has no glyph.
    • The form title bar's default height is 10 pixels (the MinSize setting in the element properties).

  4. Hover over the state preview area and click the background image size to open this bitmap in an external graphics editor.

  5. Inspect the background image in the graphics editor. This image stores bitmaps for all element states at once, arranging them in a single column.

  6. Fill the entire rectangle with #3A3A3A color and save the image.

  7. Apply the following modifications to the FormCaption skin element:

    • Left and right margins: 1 px
    • Top margin: 1 px
    • Bottom margin: 0 px
    • Height: 40
    • Forecolor: #F88E1D
    • FontSize: 1
    • Left ContentMargin: 15

    Form Caption Graphite

  8. Remaining form borders are represented by the FormFrameLeft, FormFrameRight, and FormFrameBottom skin elements. In the "DevExpress Style" skin these are 5-pixel borders with dark gray edges.

    Form Borders DX

  9. Edit these bitmaps in a graphics editor as follows.

    • Left and right frame bitmaps: crop images to 1 pixel in width and fill them with the #DFDFDF color.
    • Bottom frame bitmap: crop the image to 2 pixels in height and fill it with the #DFDFDF color.
  10. Set frame element sizes, so that they fit your new bitmaps: left and right frames must be 1-pixel wide ("Size | MinSize | Width" in the property grid), the bottom frame must be 1-pixel high ("Size | MinSize | Height" in the property grid).
  11. Set sizing margins for all three frames to zero.

  12. Refresh the project assembly and run your testing application to see the result.

    Graphite - XtraForm

    XtraForms display shadow effects by default. To turn that off, set the form's XtraForm.FormBorderEffect property to None in Visual Studio. To modify this shadow, customize the four "FormDecoratorFrame..." skin elements in the Skin Editor.

Next Step

Modify Tab Pane and Recent Item Control Skin Elements


Modify Tab Pane and Recent Item Control Skin Elements

  1. Skin elements responsible for the Tab Pane control are grouped in the "Navigation Pane" category. Open this category and select the "TabPaneButtonBackground" element.

    TabPaneButtonBackground - DxStyle

  2. Set all margins of this element to zero, then set its Backcolor setting to #3A3A3A.

  3. Clear the bitmap, so that its gray bottom line is gone. To do so, either erase this line in a graphics editor or right-click the image preview in the Skin Editor and select "Recreate".

    In the dialog that appears, leave all settings as is (100x29 size, 1 state, Horizontal layout, default image type) and click "Create".

  4. Do the same for the "TabPaneButton" skin element to remove the beak that points to a currently selected tab.
  5. Set the ForeColor property of the "TabPanelButton" skin element to #F7F7F7.

  6. Open the background image of the "TabPanelButton" skin element in a graphics editor. Fill areas that correspond to the second and third skin element states (hovered and selected) with the #3A3A3A color, then draw a thin #F88E1D line at the bottom of each area.

    Tab Pane Buttons - Graphite

  7. Re-generate your project assembly and run the testing application.

    Graphite - XtraForm and Tab Pane - Bug

  8. Your side form borders are painted with the light #DFDFDF color, which is in contrast with the tab background's dark #3A3A3A color. This leads to visible 29-pixel dashes on both sides of a dialog (with default font size settings, the height of Tab Pane header area equals 29 pixels).

    Border White Dashes

    To fix this, modify the FormFrameLeft and FormFrameRight skin elements, so that they have a 29-pixel line painted with the #3A3A3A color. The top margins of each element must also be set to 29 pixels.

    Form Borders Fixed

  9. Run the testing application again to make sure the form's side borders display correctly.

    Graphite - XtraForm and Tab Pane

  10. To make Recent Item Control pin items look flat, edit the "GalleryButton" element bitmap.

    Graphite - Ready Dialog


Working with Vector Skins

This article explains how to modify Vector skins. To test Skin Editor features mentioned below, you can create a custom version of the SVG Icon Builder's internal skin.

Skin Editor - Vector Skins Thumb

  • Overview
  • SVG Workshop
  • Change Color Palettes
  • Change Icon Palettes

Overview

The SVG Icon Builder is a tool that allows you to draw SVG icons by combining templates the DevExpress designers team created. This tool uses its own skin from the "%your_source_folder%\Win\DevExpress.SvgIconBuilder\Skin\svgiconbuilder" folder. Select all the files in this folder, then right-click and choose "Properties". Uncheck the "Read-only" option to modify these files in the Skin Editor.

Skin Editor - Skinblob File Properties

SVG Workshop

Like raster skins, UI elements in vector skins can have a maximum of three images:

  • a background image (defines the element's shape and borders);
  • a glyph (a built-in image, for example, a cross on the window's "Close" button);
  • an icon (a custom icon developers assign to controls' image-related properties).

The SVG Workshop allows you to replace background and glyph images with the DevExpress designers' counterparts. To do this, drag-and-drop an image onto the state preview area. For example, in the figure below the SimpleButton background is changed to remove button borders.

Skin Editor - Workshop (Drag)

To invoke this tool, press F4 or click the "SVG Workshop" button on the Skin Editor ribbon.

Skin Editor - Workshop Button

Change Color Palettes

To repaint a vector skin, you need to change the common and element palettes.

The common SVG palette stores the colors applied to individual skin element parts. To edit this palette, press F7 in the Skin Editor. Here you can assign new color values to the default palette color names and add your own colors. The Live Preview panel allows you to click elements, borders, and text strings - a color that paints a clicked element will be selected in the list to your left. This feature allows you to quickly identify which colors you need to change.

Skin Editor - Common Palette

You can select which of these palette colors paint specific UI elements, that is, specify element palettes. For example, a default SimpleButton background image contains two shapes: a rectangle and a border. To select what colors fill these shapes, double-click an element to invoke the Edit SVG Palette dialog. You can either choose a color from the skin palette or use a unique RGB value. In the figure below, the button border is painted using the "Brush Light" color.

Skin Editor - Element Palette

To invoke this dialog, go to the Skin Editor settings and check the "Use internal SVG Editor for skin element painting" option, then double-click a button's background image.

Skin Editor - Settings

You can also use these common palette colors to set property values. In the figure below, the "Accent Brush" color is assigned to the SimpleButton's "Text | Color | Normal | SVG Palette Color" property. This lightens the button's text color, which makes it stand out against the dark background.

Skin Editor - Text Color

Instead of going through every palette color and specifying it manually, browse swatches (color presets) first. You can change the colors in these color schemes according to your needs.

Skin Editor - Common Palette Swatches

You can press the "Add" button next to the swatch selector to copy the current swatch under a different name. All these swatches are available for your end-users directly at runtime.

SVG Skin Palette Selector (Swatches)

Change Icon Palettes

DevExpress controls colorize their SVG icons to match the currently applied skin. Colorization rules (icon palettes) are different for each skin, and you need to modify these rules after re-painting the skin. The figures below show a comparison between the default and a custom icon palette.

Skin Editor - Icon Colorization

In the Skin Editor, right-click the "Common" element group and select "Icon Palette | Set" (or press F6) to modify the icon palette.

Skin Editor - Common Icon Palette

Other groups and individual elements inherit colors from this palette by default. The diagram below illustrates this inheritance hierarchy.

Skin Editor - Palette Inheritance

Repeat the same steps above to specify custom icon palettes and override this inheritance for other groups and elements.


Export and Apply Custom Skins

This document explains how to export your custom skins and use them within Visual Studio projects.

  • Export a Project
  • Register an Assembly
  • Apply a Custom Skin

Export a Project

When your skin is ready or when you want to test it in a live application, invoke the main Skin Editor Menu and launch the Project Manager. Switch to the "Export" tab and click "Create Assembly" to generate a .dll file that contains your project with all included skins. This file will be saved to the root folder of the project.

Repeat these steps every time you modify a skin and need to test the modifications in a separate application.

You can also run the "SkinEditor.exe <path_to_skin_project> /build <DLL-version-in-x.x.x.xxxx-format>" shell command to build projects and create skin assemblies. This command line returns 1 if building the project succeeds, and 0 if it fails.

Example: SkinEditor.exe "D:\Work\Skins\Graphite" /build "19.2.4.2123"

Register an Assembly

To utilize skins from a custom library, you first need to register it. To do that, click the "Create Assembly" button and copy the code that is automatically generated by the Project Manager.

Export 2 (with code)

Open the Visual Studio project with which you want to test your skin. In the Solution Explorer window, right-click a "References" folder and click "Add Reference", then select the .dll library created by the Skin Editor.

Paste the code copied from the Project Manager to the "Program.cs" file of the project. The SkinManager.RegisterAssembly method is used to register the custom assembly.

  • C#
  • VB.NET
//Program.cs

using System;
using System.Windows.Forms;
using DevExpress.Skins;
using DevExpress.LookAndFeel;
using System.Reflection;
using System.ComponentModel;
using DevExpress.XtraEditors;

namespace CustomSkinTest {
    static class Program {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        //Recommended code for runtime skin initialization.
        [STAThread]
        static void Main() {

            Assembly asm = typeof(DevExpress.UserSkins.MyCustomSkins).Assembly;
            DevExpress.Skins.SkinManager.Default.RegisterAssembly(asm);
            // Splash screens and wait forms created with the help of the SplashScreenManager component run in a separate thread.
            // Information on custom skins registered in the main thread is not available in the splash screen thread
            // until you call the SplashScreenManager.RegisterUserSkins method.
            // To provide information on custom skins to the splash screen thread, uncomment the following line.
            //SplashScreenManager.RegisterUserSkins(asm);

            Application.Run(new XtraForm());
        }
    }

    // This code adds the "SkinRegistration" component to the Visual Studio toolbox
    // Drop this component onto the main application form to be able to change skins at design time
    public class SkinRegistration : Component {
        public SkinRegistration() {
            DevExpress.Skins.SkinManager.Default.RegisterAssembly(typeof(DevExpress.UserSkins.CustomSkin).Assembly);
        }
    }
}

'Program.cs

Imports System
Imports System.Windows.Forms
Imports DevExpress.Skins
Imports DevExpress.LookAndFeel
Imports System.Reflection
Imports System.ComponentModel
Imports DevExpress.XtraEditors

Namespace CustomSkinTest
    Friend NotInheritable Class Program

        Private Sub New()
        End Sub

        ''' <summary>
        ''' The main entry point for the application.
        ''' </summary>
        'Recommended code for runtime skin initialization.
        <STAThread>
        Shared Sub Main()
            Dim asm As System.Reflection.Assembly = GetType(DevExpress.UserSkins.CustomSkin).Assembly
            DevExpress.Skins.SkinManager.Default.RegisterAssembly(asm)
            ' Splash screens and wait forms created with the help of the SplashScreenManager component run in a separate thread.
            ' Information on custom skins registered in the main thread is not available in the splash screen thread
            ' until you call the SplashScreenManager.RegisterUserSkins method.
            ' To provide information on custom skins to the splash screen thread, uncomment the following line.
            'SplashScreenManager.RegisterUserSkins(asm)

            Application.Run(New XtraForm())
        End Sub

        ' Recommended code for design-time skin initialization.
        ' In Visual Studio 2012 and higher, add the following code to your project
        ' to ensure that your custom skin assembly is loaded and that the custom skin is registered at design time.
        Public Class SkinRegistration
            Inherits Component

            Public Sub New()
                DevExpress.Skins.SkinManager.Default.RegisterAssembly(GetType(DevExpress.UserSkins.CustomSkin).Assembly)
            End Sub
        End Class
    End Class
End Namespace

Rebuild the project.

Apply a Custom Skin

After the custom skin is registered, you can apply it similarly to standard DevExpress skins. To apply a skin in code, add the following line to the same "Program" file that contains registration code.

  • C#
  • VB.NET
UserLookAndFeel.Default.SkinName = "Frost Blue";

UserLookAndFeel.Default.SkinName = "Frost Blue"


BLOB Skins

You can save custom skins as BLOB files (.blob and .xml pairs) and then load them in your projects.

Export Skins

In the Project Manager dialog, switch to the "Export" tab and click "Create Resources" to save the current skins.

Each skin is saved as a pair of .blob and .xml files.

Use BLOB Skins

In Visual Studio's Solution Explorer window, add the newly generated skin files (.xml and .blob) to your project.

BLOB Skins - Add existing skins in Project Explorer

Change Build Action for the recently added files to "Embedded Resource".

BLOB Skins - Change Build Action

On application startup, register the custom skins as follows.

  • C#
  • VB.NET
ApplicationSettingsHelper.LoadSettings(() => {
    var skinCreator = new SkinBlobXmlCreator(
        "my devexpress style", //Skin name.
        "MyApp1.CustomSkins",  //Relative path to .blob and .xml files.
        typeof(Program).Assembly, null);
    SkinManager.Default.RegisterSkin(skinCreator);
});
DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle("my devexpress style");
Application.Run(new Form1());

DevExpress.LookAndFeel.Design.ApplicationSettingsHelper.LoadSettings(
    Sub()
        Dim skinCreator = New DevExpress.Skins.Info.SkinBlobXmlCreator(
            "my devexpress style", 'Skin name
            "MyApp1",
            GetType(Form1).Assembly, Nothing
        )
        DevExpress.Skins.SkinManager.Default.RegisterSkin(skinCreator)
    End Sub)
DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle("my devexpress style")

Application.Run(New Form1)