WinForms — Skin Patches

WinForms Team Blog
08 April 2021

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

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
Nate Laff
Nate Laff
Great addition!!!!
8 April 2021
Richard Judge
Richard Judge
Nice tweaking tool.....
8 April 2021
Stephen J White
Stephen J White
This is really cool. I haven't had a chance to dive back into WinForms for the past couple of DX versions, but the skins are one of your best features. Having this is an amazing benefit, despite how small it seems. Thank you!
8 April 2021
thehill
thehill
seems like opportune timing, i was searching the knowledgebase last night for how to modify the font size of an xtraform title/caption.

would this change give a fairly easy way  to do this for a single particular form
9 April 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@thehill No, the idea of patches is to give you the ability to silently edit DevExpress skins without having to add extra custom skins to your project. And since you you edit an entire skin, these changes will applied to all controls in the app.

If you need to edit title font settings for one single form, you can override this form's painter. See this Support Center ticket for the sample code: Q237259.

9 April 2021
Heiko Mueller
Heiko Mueller
A very good addition to the skin framework! I would still like to have the possibility to load a skin twice and then apply a patch to each instance. This way I could load e.g. 'The Bezier' additionally as 'The Bezier Dark' and use different color palettes in the two skins.
11 April 2021
Kenneth Hov
Kenneth Hov

I started to use the skin editor to make a new palette for the light and dark visual studio palett in the bezier skin. After a while defining new palette and tweaking some settings on the controls, I felt i lost control of what was changed and not. Then I instead just load the bezier skin with the dark or light vs palette, and then in code I change the palette and other controls settings. This gives me much more control.

if (themeTone == ThemeTone.Dark)            
{
    svgPalette.Colors.FirstOrDefault(x => x.Name == "Paint").Value = SkinColors.DarkPaletteDarkNavy;
    svgPalette.Colors.FirstOrDefault(x => x.Name == "Paint High").Value = SkinColors.DarkPaletteUltraDarkNavy;
.
.
.
// SkinAdjustments 
{
                var buttonSize = new Size(15, 15);

                var tabSkin = TabSkins.GetSkin(UserLookAndFeel.Default);
                var tabPageButton = tabSkin[TabSkins.SkinTabPageButton];
                tabPageButton.Glyph.SvgImageSize = buttonSize;

                var formSkin = FormSkins.GetSkin(UserLookAndFeel.Default);
                var tabFormCloseButton = formSkin[FormSkins.SkinTabFormCloseButton];
                tabFormCloseButton.Glyph.SvgImageSize = buttonSize;

                var tabFormActivePageCloseButton = formSkin[FormSkins.SkinTabFormActivePageCloseButton];
                tabFormActivePageCloseButton.Glyph.SvgImageSize = buttonSize;

                LookAndFeelHelper.ForceDefaultLookAndFeelChanged();
}
13 April 2021
Mojo
Mojo

Great!

Was hoping for a crossplatform skin-editor ... so a single skin-editor file could be used in both WinForm, DevExtreme etc.

13 April 2021
Christopher Jay
Christopher Jay
Awesome!  Thanks!
16 April 2021

Please login or register to post comments.