WinForms — New Winter Joy Vector Skin

WinForms Team Blog
09 December 2021

2021 is slowly coming to an end. We at DevExpress would like to wish you all the very best in the coming year. As a small token of our appreciation, we’ve created a new Winter Joy vector-based skin/theme for our WinForms product line. This new skin includes three built-in palettes: a default palette with subdued colors, a dark palette inspired by the magic of holiday-season evenings, and a palette inspired by snow covered landscapes.



Important Note: This skin will not be included in our primary component distribution. If you wish to incorporate this new skin/theme in your WinForms project, you will need to upgrade to v21.1.7+ or v21.2.4+, then install the NuGet package to add the skin to your project. Run the following command in the Visual Studio's Package Manager Console:

Install-Package DevExpress.Win.WinterJoySkin

You can also download this package from NuGet.org or inspect its source code at GitHub.com.

Once you install the package, simply register the skin library at the application startup.

[STAThread]
static void Main() {
    // Register the Winter Joy skin.
    System.Reflection.Assembly asm = typeof(DevExpress.UserSkins.WinterJoy).Assembly; 
    DevExpress.Skins.SkinManager.Default.RegisterAssembly(asm); 
    // Apply the skin.
    DevExpress.XtraEditors.WindowsFormsSettings.DefaultLookAndFeel.
        SetSkinStyle("Winter Joy");
    //
    Application.Run(...);
}

Once again, we wish all of you the best this holiday season.

Before You Go – We Need Your Feedback for Future Skin/Theme Development

As you can imagine, creating new skins/themes is a time consuming process. One reason we did not include Winter Joy in our core distribution is to help determine usage rate for specialty skins such as this. To help us frame our WinForms skin/theme development strategy in 2022, please take a moment to answer the following survey:

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
AnGa
AnGa
Is it possible to add this skin in the next component distribution like you do with the Xmas skin?
9 December 2021
Customer78699
Lior

there is some error:

9 December 2021
dbSoft
dbSoft
Is it possible to embeded this skin, in skin selector?
9 December 2021
Customer78699
Lior

it breaks themes/skin selections:

9 December 2021
David Krcmarsky
David Krcmarsky
happy xmas ... our customers are going to love it.
9 December 2021
DIP_Michel
DIP_Michel

I do like all of the themes. They provide the user with a little freedom.

 

9 December 2021
Aluron
Aluron

Unfortunately after adding these 2 lines I have error on startup with this StackTrace:

at DevExpress.Skins.SkinCollectionHelper.GetSvgSkinIcon(String name)
at DevExpress.XtraBars.Helpers.SkinPopupControlContainer.InitGalleryItemsAndRemoveUnusedGroups()
at DevExpress.XtraBars.Helpers.SkinPopupControlContainer.InitGalleryControl()
at DevExpress.XtraBars.Helpers.SkinPopupControlContainer.Initialize()
at DevExpress.XtraBars.Helpers.SkinPopupControlContainer..ctor(BarButtonItem ownerButtonItem, Boolean useDefaultEventHandler)
at DevExpress.XtraBars.Helpers.SkinHelper.InitDropDownSkinGallery(BarButtonItem barButtonItem)
at DevExpress.XtraBars.SkinDropDownButtonItem.OnInitialize()
at DevExpress.XtraBars.BarManager.InitializeSkinBarSubItemsIfExists()
at DevExpress.XtraBars.BarManager.OnEndInit()
at DevExpress.XtraEditors.Container.ComponentEditorContainer.EndInit()
at DevExpress.XtraBars.Ribbon.RibbonControl.ForceInitialize(Boolean refreshLinks)
at DevExpress.XtraBars.Ribbon.RibbonControl.ForceInitialize()
at DevExpress.XtraBars.Ribbon.RibbonControl.EndInit()
9 December 2021
Chris Carr 5
Chris
This looks great, please make one for WPF!
9 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Lior, Aluron make sure you've updated the installation to versions mentioned in the post: v21.1.7+ or v21.2.4. See the image posted by @DIP_Michel, with the newest version of DevExpress controls the skin works just fine. We've replaced the title image to highlight this requirement even more.


@dbSoft all skins that are not a part of the "default" skin set are added to the skin selector after you register them, and available under the "Custom Skins" group. 

@AnGa we're looking for the best option at the moment. Leave this skin as additional downloadable content, or include it in the installation, maybe replace the older raster "X-Mas" skin with it... 

9 December 2021
Hichem BENLAGHA
HichemB
please add in delphi
9 December 2021
Aluron
Aluron

After upgrade to 21.2.4 everything is working OK.
Skin is great!

9 December 2021
Alvis Kums
Alvis Kums

Looks really cool! :) Thx!


10 December 2021
Dmitry Melnikov 1
Dmitry Melnikov
where to get the dark blue theme?
I only see light blue
10 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Dmitry dark and white skin variations are skin palettes. Add a palette selector to your Ribbon or Toolbar, and you'll be able to select them.
10 December 2021
Christopher Jay
Christopher Jay
I will include this in a future update but there is definitely not enough time to release a new version to our users before the end of the year.  It looks really nice and I will include it in a future version though.
10 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Christopher glad you liked it :)
10 December 2021
Eaton Z.
Eaton Zveare

@Dmitry Can you provide code for applying the 3 different palettes at runtime? It's not immediately obvious what needs to be done, and I do not want to use a UI skin/palette selector. Thanks!

10 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Eaton You should add the palette name to the "SetSkinStyle" method, next to the skin name:

// Default palette
UserLookAndFeel.Default.SetSkinStyle("Winter Joy", "DefaultSkinPalette");
// Dark palette
UserLookAndFeel.Default.SetSkinStyle("Winter Joy", "Winter Night");
// White palette
UserLookAndFeel.Default.SetSkinStyle("Winter Joy", "White Snow");

"Winter Night" and "White Snow" are palettes stored in the Skin.CustomSvgPalettes collection. You can quickly get the name of a current palette by reading this property value:

string paletteName = UserLookAndFeel.Default.ActiveSvgPaletteName;
10 December 2021
Dave Hesketh (Llamachant Technology)
Dave Hesketh (Llamachant Technology) / DX MVP

I hope you're working on a new Valentine's Day skin too :)

Some users think these theme based skins are ridiculous but some just absolutely love them.

10 December 2021
Franco M.
Marco F.
please, please make this for WPF too!
11 December 2021
Patrick Miller
Patrick Miller

Love this theme, thank you for creating and giving us an early Christmas gift.

11 December 2021
renejdm
renejdm
Love this theme. Please provide other seasonal ones too, like Spring, Summer, and Fall.  :)
11 December 2021
Dirk Maes
Dirk Maes

Love it. Only the BarCheckItems look a bit off, because the radiobutton is positioned too low next to the caption.

13 December 2021
Lluis Franco
Lluis Franco

Hi,

TIP: Ensure you update to v21.2.4 before adding the NuGet package, because Project Converter fails when detect there are NuGet packages and doesn't upgrade to 21.2.4 and remains in the last version. In my case, showed a warning and doesn't update to the last version.

My solution was uninstalling the skin NuGet package, then update my solution (+100 projects) manually via project converter to 21.2.4 and finally reinstall the NuGet package ;)

13 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Dirk thanks for reporting this issue, we'll fix that in the nearest future.

@Lluis good point, I'll move the line about upgrading to the latest version before the NuGet is mentioned.

13 December 2021
Joachim Thiele
Joachim Thiele

i like the theme very much. I would be happy if there were more in the future.
But my trees are cut :-)

13 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Joachim normally this happens only when your RibbonControl is hosted inside an XtraForm or ToolbarForm. Can you please confirm that's not the case and you're using the RibbonForm?
13 December 2021
Joachim Thiele
Joachim Thiele

@Dmitry
It's an Ribbon Form. i think it's something with UHD and Scaling.

14 December 2021
Eric Zimmerman_
Eric Zimmerman_
holy cow, less of this skin thing and more important things, like supporting datetimeoffset like you do datetime in grids please!
14 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Joachim This should not be happening... We've double-checked the skin in Windows 11 with high DPI monitors, and never seen this weird effect. If the issue is still present, please send us the sample project via a Support Center, we'll get to the bottom of this.


@Eric Our themes and skins are created by designers, these tasks do not consume any developer manpower. Our appearance-related additions never come at a cost of valuable "internal" control features. As for DateTimeOffset data, we ship the DateTimeOffsetEdit editor with v20.2 and newer installations (see the release announcement). Similar to the DateTime editor, you can use this new editor for in-place editing in data-aware controls like Data Grid.

15 December 2021
Joachim Thiele
Joachim Thiele

@Dmitry

i have opened a ticket and i have figured it out. Try this:

      WindowsFormsSettings.FormThickBorder = True

      WindowsFormsSettings.ThickBorderWidth = 1

15 December 2021
CRM-a0b98c66-1005-4f5a-b2b2-ac4246b7c452
David Christian
I have applied this to 3 applications now, thanks! I notice in 2 of my apps that there is "snow" around the outside edge of my main form when not maximized, but on 1 of my apps I do not see that affect. What setting affects this and how can I turn it on in my 3rd app?
15 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@David Snowflakes around your form borders are the modified "form shadow" skin element. Most likely, your 3rd app has the FormBorderEffect property set to "None".
16 December 2021
CRM-a0b98c66-1005-4f5a-b2b2-ac4246b7c452
David Christian
Turns out my main form was Form and not XtraForm. A quick change of the base class and now it works. Thanks!
17 December 2021
Garry Lowther
Garry Lowther

I have the skin working, however only the light Winter Joy skin appears. How can I get the dark version?

I use your own built in skin managers:

DevExpress.XtraBars.Helpers.SkinHelper.InitSkinPopupMenu(pmAppearance)

DevExpress.XtraBars.Helpers.SkinHelper.InitSkinGalleryDropDown(gddSkins)


Can the dark theme simply not be an option here?


21 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Garry Those "Init..." methods allow you to create custom skin galleries, but unless you need some unique functionality, we recommend that you stick to our standard skin\palette selectors for Bars or Ribbon. Add a DevExpress palette selector and you'll be able to switch between Holiday Season palettes when this skin is active.
21 December 2021
Jacobo Amselem
Jacobo Amselem

Hi

The new skin is awesome!
However I noticed this : the ProgressPanel won't appear skinned when used through the SplashScreenManager.
(The ProgressPanel shows correctly when used itself , and the SplashScreenManager also shows correctly the ProgressPanel with any other skins)


21 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Jacobo Skins registered in your app are not accessible by the SplashScreenManager, it keeps using the default theme set. You have to call the SplashScreenManager.RegisterUserSkins method in addition to SkinManager.Default.RegisterAssembly that you have.

We discussed this internally and came to the conclusion that it's not the optimal user experience. When you call "RegisterUserSkins", you probably expect these skins to be available for the entire project. In the next minor v21.2 update, we'll implement the WindowsFormsSettings.RegisterSkins(skinAssembly) method that will eliminate the need to call separate methods.

22 December 2021
Jacobo Amselem
Jacobo Amselem

Thank you @Dmitry, that code did the trick with the SplashScreenManager!

Please bring us more updated skins (spring, summer....) !

22 December 2021
Christopher Hamel
Christopher Hamel

I am noticing that radio button groups don't render the same way with winter joy.  Any idea for a workaround for this?

21 January 2022
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Christopher: this is an active bug, we'll try to fix it ASAP. If you require an urgent workaround, you may try to tweak radio button properties in Skin Editor (most likely, decrease size and\or padding values) and save your edits as a skin patch.
22 January 2022

Please login or register to post comments.