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"

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.

Free DevExpress Products - Get Your Copy Today