When you download v17.2 and run our WinForms demos, you'll notice a new skin style in the Ribbon gallery...one that's unlike any other skin we introduced before. As you may have already discerned from the title of this blog post, this new skin renders its elements using vector graphics. Let me quickly outline what this means - starting with the most obvious benefit first:

The first thing I normally do to announce a new theme is show a screenshot. Not this time though. With "The Bezier", I can only show a default style, or a few styles out of many. You'll get glimpses of those styles in the videos below. But I urge you to run the demos and experience "The Bezier" for yourself, because this time it's not the looks that define the skin, it's the features I describe in the following sections.

Dozens of Color Schemes

When you browse the demos, switch the theme to "The Bezier" and then click Color Swatches next to the skin gallery. Here's a short video of what you'll see - the new slick Swatch Picker UI we've implemented in this release:

[Your browser does not support the video tag.]

Unlike bitmaps in previously available skins, vector elements simply define shapes and can easily be colored into the exact colors you need. This lets you create custom color schemes by setting just about a dozen of colors. When working on this UI, our designer was going to come up with about five new styles to illustrate the idea, but ended up making 27. He then went on to make an even 30. Now they're all yours, and you can add even more.

To try this next step, launch our updated Skin Editor application. We made it really easy to substitute skin element shapes by using a vast library of ready-to-use stencils shipping with the Skin Editor. Simply drag an element onto the the shape you want changed. Or, if you have your own SVG files handy, apply them instead.

The quick video below shows how to use the Skin Editor to accomplish the following tasks:

Changing a check box to enable rounded corners

Switching the check mark symbol to one of the pre-defined shapes

Importing custom SVG graphics to indicate checked states

[Your browser does not support the video tag.]

Change Color of Individual Skin Elements

The same mechanism that enables color scheme functionality also allows you to manually specify colors for elements. Once again, this is easily done using the updated Skin Editor. Here's another short video to demonstrate:

[Your browser does not support the video tag.]

Download v17.2 Today

All this new functionality is shipping with v17.2, available today. Give it a try and should you have any questions, post to the comments section below.

The same question: how to easily set up color swatches in XAF? By default, we have only one, default color scheme.

19 November, 2017

Dmitry Babich (DevExpress)

@Santiago @Yauhen

Yes, you can use all SVG skin features in XAF - the required code is the same as for a regular WinForms application. We've prepared a KB article that describes how to enable the SVG skin in your application:

Are there plans to add more SVG skins besides Bezier in upcoming releases?

We are considering migrating to the Bezier skin, but would like to know what the roadmap is for SVG skins before introducing a significant UI change. Thank you.

10 July, 2018

Vladimir Abadzhev (DevExpress)

Hi

There's one new style in our immediate plans. We are going to add an Office 2019 SVG skin in v18.2, but we will first need to conduct a thorough review of the visual changes that Microsoft is introducing to its applications.

Speaking of our roadmap in general, I must first note that we will only create SVG themes going forward. So if a new style appears, it will be a vector skin.

The Bezier skin already allows you to easily change an application's color scheme and has about three dozen styles built-in. If previously we could create three different raster skins for Microsoft Office 2010 styles (Blue, Black, and Silver), that is no longer necessary. In other words, we will not create new skins that simply introduce new colors.

If you have a need for a specific app style, please let us know. That kind of feedback will help us shape our plans.

You also use the word "migrate", which seems to imply a one-way conversion of your applications. You can actually use SVG skins side-by-side with our raster skins, as shown in our demos. If you can elaborate on the cost of that migration for you, that would help us understand your requirements a bit better.