WinForms - Visual Studio Palette Editor (v19.1)

11 April 2019

The introduction of vector skins brought with it a second innovation for our skinning engine: palettes. A palette is basically a skin for a skin. Element settings like border widths, sizes and visibility are stored in a skin, while color themes moved into palettes. This means you can have countless color variations of the same skin.

Currently there are two DevExpress vector skins and each of them has a set of unique color palettes. The Office 2019 Colorful skin ships with 7 palettes, the Bezier skin even has 42.

Default Palettes

Of course there are still reasons why you may want to use your own palette:

  • To reflect your corporate brand
  • To apply small modifications to existing palettes
  • To accommodate palettes completely different from our standard ones, for instance black&white or specific high contrast color schemes

To create a custom palette, you can run our Skin Editor and press F7. A dialog comes up where you can change individual colors for out-of-the-box palettes or create unique new ones.

Skin Editor

When you select a color from the list on the left, the preview highlights UI elements painted with this color. This feature allows you to find out how colors are used by the skin, and to easily see the difference between items, e.g. Brush Light and Brush High. To apply a palette created using the Skin Editor, you need to create an assembly and include it in your project.

A second option is to add or modify palettes from code.

// obtain a vector skin reference
var commonSkin = CommonSkins.GetSkin(LookAndFeel);
// create a new palette
var svgPalette = new SvgPalette();
// set up palette colors
svgPalette.Colors.Add(new SvgColor("Paint", Color.FromArgb(242, 242, 242)));
svgPalette.Colors.Add(new SvgColor("Paint High", Color.FromArgb(255, 255, 255)));
svgPalette.Colors.Add(new SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)));

// replace the default color palette with a custom one
commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName].CustomPalette = svgPalette;
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();

// OR add a new palette
commonSkin.CustomSvgPalettes.Add(new SvgPaletteKey(
  commonSkin.CustomSvgPalettes.Count, "Glacier"), svgPalette);

Using the code-based approach eliminates the requirement to have an extra assembly, but you don’t have visual feedback – only experienced users know exactly what each color does, and how to hard-code color values.

In version v19.1 we are adding the Visual Studio Palette Editor. Open the Project Settings page and click the Edit button next to the palette gallery. A dialog comes up similar to the one in the Skin Editor, including interactive preview and text hints which explain each color.

Visual Studio Palette Editor

You can also start from a standard palette that is close to your requirements, and then change some of the colors as needed.

Starting with a standard palette

The important difference compared to the Skin Editor approach is that the Visual Studio Palette Editor saves your work to the App.config file in the project, in XML format. This makes it easy to maintain and share palette definitions without requiring an extra assembly reference.

Palette settings in App.config

What do you think? Do you use custom palettes yet? Does the new editor make this decision easier for you?

5 comment(s)
Sigurd Decroos _

Is there a way to store those custom palettes in a seperate config file?

11 April, 2019
Gabriel Phaiphai

That will make a lot of sense Sigurd. +1

11 April, 2019
Marcel Boom

Nice!

11 April, 2019
Christopher Jay

I wish this dialog could be accessible by end-users so they can customize their own palettes if desired easily without me having to re-create a similar editor.

11 April, 2019
_Vincent

I agree with Christopher Jay, that would be a nice enduser feature! I'm using the "in code" approach to change one color of an existing pallete to match my product design, but have to make custom files for individual clients.

15 April, 2019

Please login or register to post comments.