WinForms Skins - New Office-Style Color Swatches (v18.1)

The unspoken rule is: when Microsoft releases a new Office suite, our DevExpress designers draw a new set of skins to emulate the fresh Office appearance. We promised in our 2018 roadmap that we would deliver a vector-based Office inspired skin, to follow on from The Bezier, the latest skin we released.

However, things turned out to be more complicated than that, since the newest Office 2019 versions are still in active development at this time. This means we can’t deliver on our promise for our v18.1 release, though of course we will try for v18.2.

Meanwhile, we wanted to have something to offer to those of you who need an Office-inspired vector skin. We considered porting the existing raster skins to SVG, but that seemed a daunting amount of work with limited future perspective. In the end we decided to create four color swatches on the basis of The Bezier to emulate the appearance of Office 2016: Office Colorful, Office Black, Office Dark Gray and Office White. From a designer’s perspective, there are differences between the swatches and a complete skin, but they certainly are difficult to find! The palette colors and the general mood of the swatches mirrors the Office appearance quite precisely, so that most end users will probably not notice any difference.

Colorful swatch

Black swatch

Those of you who wish to migrate to sleek, light-weight and high-DPI-friendly vector skins can do that now and benefit from a refreshed Office-like appearance. On our end, we are looking forward to the upcoming Office 2019 release and we will celebrate it with a truly new vector skin as soon as possible!

Please let us know your thoughts when you try the new color swatches!

8 comment(s)

Great improvements as always, winforms addons are always excelent news.

21 May, 2018

Nice!  Will these swatches appear in the Bezier's swatch selector dialog?

21 May, 2018

Cool! I love Office Dark Gray. So easy on eyes. Only on Hamburger menu hard to see CheckBoxes. Would prefer that one also same darkness (color) as Ribbon control.

21 May, 2018


Yes, they will.

21 May, 2018

Is there an easy way to reduce the spacing between large icons in the Ribbon and their captions? For example, in your screenshot, the button with a red "X" icon and its "Delete" caption has a lot of vertical spacing in between. It seems (in my opinion) the Bezier has increased this spacing a bit too much and makes the Ribbon less visually appealing. Especially with the new Office palette - it doesn't represent the spacing Office 365/2019 uses between the same elements. It would be nice if the Bezier skin had a way to enable a more compact spacing between those elements.

21 May, 2018

Justin - at this time, it would be necessary to create a custom skin based on Bezier and make modifications. Of course, the specific appearance of certain items may not be exactly the same as in Office, since the skin itself is different - that is something that will only be resolved when final Office skins are available, as opposed to the color swatches we have now.

Meanwhile, if you think we are objectively rendering something "wrong", or you'd like some more help with the customization process, please feel free to open a support ticket and we'll do our best to help you!

21 May, 2018

is this available in XAF by default?

23 May, 2018

Mohamed - the skin switcher we use in XAF at this time supports The Bezier, but not the swatches. We are looking to improve the out-of-the-box functionality in the future, meanwhile you can make swatches available manually along the lines of the examples here:

23 May, 2018

Please login or register to post comments.