WinForms - Visual Studio Palette Editor (v19.1)

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.

Of course there are still reasons why you may want to ues 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.

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.

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

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.

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