WinForms — Skin Patches

As you may know, a few years ago we overhauled our WinForms Skin Editor. This new tool – what we now call "Skin Editor v2" - is superior to its predecessor in every possible way: it includes a more discoverable skin element hierarchy, customizable labels, a collection of extremely useful features (for example, you can Ctrl+Click any element in the Preview panel to obtain a list of skin parts responsible for a given element's appearance), support for vector skins and palettes, etc.

The enhancements introduced in our updated Skin Editor had one shortcoming... If your goal was to make slight modifications to a standard DevExpress skin, you were forced to create a duplicate skin. This meant that you would have to import and register the custom skin. In addition, this process would produce a nearly identical skin – the original and your custom skin - within our skin selector. To eliminate the duplicate, you would have to modify these selectors as well (for instance, hide the standard "Bezier" skin and replace it with "My Bezier" created in the Skin Editor).

To eliminate these issues, our WinForms Skin Editor (v21.1) will ship with skin patch support. A skin patch is a list of visual changes applied directly to a standard DevExpress Skin. Skin patches eliminate the need to generate/import custom skins for your project(s).

How It Works

Here's a great example of a skin patch use case: dock panel captions in our vector Office 2019 skins.

If you're among those who find panel caption fonts too large, you can add the BarAndDockingController and manually set up fonts in the "Docking" section. But doing so means your hard-coded panel fonts will be active regardless of the active skin.

Instead of hard coding or creating a new skin, you can now patch skins. Start the Skin Editor and select the "New Skin Patch" tab. Enter the patch name, local storage folder to save output, and a target DevExpress skin.

Locate elements you'd like to modify, click "Activate" and edit the desired/appropriate settings. In this example we need to reduce the text size delta for a few elements under the "Docking" category.

A patch is saved as a single .skinpatch file. Once saved, import it in your Visual Studio project from a local storage, stream or assembly via the SkinManager.Default.RegisterSkinPatch method.

namespace MyApp{
    static class Program {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main() {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            SkinManager.Default.RegisterSkinPatch(Application.StartupPath +
                "\\patches\\O2019C-Fonts.skinpatch");
            //uncomment the following line to undo the skin patch
            //SkinManager.Default.ResetSkin(SkinStyle.Office2019Colorful);
            Application.Run(new MainForm());
        }
    }
}

The image below illustrates the standard "Office 2019 Colorful" skin with a patch that reduces text size delta from 6 to 2.

If you're happy with the result - you're all set. Or you can go further and change more elements in your patch. For example, modify the "Docking > Dock Panels > Caption Buttons" element to reduce button paddings and sizes. This will narrow panel headers to better suite your new caption fonts.

Tell Us What You Think

Please complete the following survey to help us better understand the current demand for custom skin editing (and whether patches address your requirements in this regard).