The Bezier Skin: Re-imagining WinForms Themes with Vector Graphics (Available in v17.2)

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:

  • Resolution independence and sharp rendering on Hi-DPI displays.
  • New easy-to-use Skin Editor features: vector element library and straightforward color management.
  • Dozens of application-wide color schemes.

Meet our new vector graphics-based skin:  "The Bezier"

WinForms Vector Graphics Skin: The Bezier

Experience it today...

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:

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.

 

Easily Alter Shapes Using a Pre-defined Element Library or Custom SVG Files

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

 

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:

 

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.

 

Download The Besizer WinForms Skin with v17.2

 

 

8 comment(s)
Santiago Moscoso

Nice, looks pretty awesome, makes WinForms look modern.

Is it supported on XAF?

18 November, 2017
Yauhen Kuchynski

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:

www.devexpress.com/.../T578454

As always, feel free to contact our support team if you have additional questions. 

20 November, 2017
Eaton Z.

Not really a fan of the loading animated gif that displays on wait forms. Hope you'll consider changing it to something that actually indicates loading, and not just the skin's logo.

26 November, 2017
Dennis (DevExpress Support)

@XAFers: Please check out this KB article: www.devexpress.com/kb=T579152

27 November, 2017
Joseph Kellerer 2

I once tried to make my own theme with the old skin editor.

But it was way too complicated.

But this new approach is very very good!

Themes look great and I can define my own colors very fast.

20 December, 2017
Estimate

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.

11 July, 2018

Please login or register to post comments.