WPF - Theme Palettes (v19.1)

WPF Team Blog
15 May 2019

We developed a new mechanism that allows you to create multiple palettes for our themes and switch between them easily, even at runtime. This means that we can provide additional color options for built-in themes, and integrating corporate colors into your application is straight-forward.

Predefined Palettes

The Office2016SE, VS2017, and Office2019 themes now ship with a choice of six palettes:

Predefined Palettes

For each palette, our theme mechanism can generate a dynamic theme with palette colors. These dynamic themes will show up in the list of themes and can then be used as regular themes in your application, triggering theme change events and affecting any code that checks the currently applied theme name.

Dynamic Themes

Since not every application needs dynamic themes, they are turned off by default. You can register them by calling the method RegisterPredefinedPaletteThemes in code:

Theme.RegisterPredefinedPaletteThemes();

Once this registration has taken place, the dynamic themes appear in the built-in Ribbon gallery:

Ribbon Gallery

It is also possible to switch palettes in code:

Theme.RegisterPredefinedPaletteThemes();

ApplicationThemeHelper.ApplicationThemeName =
  PredefinedThemePalettes.RedWine.Name + Theme.Office2019Colorful.Name;

If you don’t need all the palettes, create themes for specific palettes manually:

var theme = Theme.CreateTheme(
  PredefinedThemePalettes.RedWine, Theme.Office2019Colorful);

Theme.RegisterTheme(theme);

ApplicationThemeHelper.ApplicationThemeName = theme.Name;

Introducing Corporate Colors

A crucial part of the Theme Palette mechanism is customization. You can create a custom palette based on any of the predefined palettes, modify its colors, and create a new dynamic theme:

var palette = new ThemePalette("WhiteWine", PredefinedThemePalettes.RedWine);

palette.SetColor("Backstage.Window.Background", Colors.Beige);

var theme = Theme.CreateTheme(palette, Theme.Office2019Colorful);

The Theme Designer application now allows you to import colors from predefined palettes into your custom theme.

Theme Designer

In addition, Theme Palettes can help you introduce corporate colors even if you don’t plan on maintaining a custom theme. You can edit default theme colors or colors from one of the predefined palettes in the Theme Designer to match your corporate theme and export the result into a .cs file:

public class Office2019CorporateThemePalette : ThemePalette {
  public Office2019CorporateThemePalette() : base("Office2019Corporate") {
    SetColor("Backstage.SelectionBackground",
      (Color) ColorConverter.ConvertFromString("#FF004B1C"));
    SetColor("Backstage.Window.Background",
      (Color) ColorConverter.ConvertFromString("#FF217346"));
    SetColor("Focused",
      (Color) ColorConverter.ConvertFromString("#FF217346"));
    ...
  }
}

Using the code from the exported .cs file, you can apply your unique colors to standard DevExpress themes:

var palette = new Office2019CorporateThemePalette();

var theme = Theme.CreateTheme(palette, Theme.Office2019Colorful);

Theme.RegisterTheme(theme);

ApplicationThemeHelper.ApplicationThemeName = theme.Name;

This approach allows you to create a unique appearance for your application without the need for a custom theme and does not require any extra work when you migrate from one DevExpress version to another.

We Are Looking Forward To Your Feedback

Which predefined palettes would you like to see us introduce in the future? Are you going to create custom palettes in the Theme Designer? Please let us know in the comments below or send your feedback to wpfteam@devexpress.com.

8 comment(s)
Cyber Sinh
Cyber Sinh

Awesome! Thanks.

15 May, 2019
Andrew Tinkler
Andrew Tinkler

Ditto!

15 May, 2019
Rustamer
Rustamer

IMHO these skins and colors under the desktop has already become too much. Much more necessary different themes under the Web. And it is desirable that they differ not only on the principle of color differentiation of pants (Ku!). Also would love to have new icons (desktop). Now your SVG parser can do more, respectively, and you can create more beautiful icons in new styles. I still can not afford to go to the vector version of the icons, because the design does not like the users.

16 May, 2019
ima_aa
ima_aa

looks nie. does this exist for winforms too?

16 May, 2019
Flavio71
Flavio71

Awesome feature!

16 May, 2019
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

@ima_aa:

Yes, our vector skins in WinForms support palettes:

documentation.devexpress.com/.../Skins

Thanks,

Alex

17 May, 2019
Chris Nucci
Chris Nucci

Is there a step missing? Once I try this code in an application already working with the Office2019Colorful theme, the application fails to start, throwing a FileNotFoundException for Mono.Cecil.

21 May, 2019
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

Chris,

Dynamic themes require the Mono.Cecil package to function properly:

www.nuget.org/.../Mono.Cecil

This requirement is mentioned in our documentation, but we will also create more detailed articles/examples on how to use Theme Palettes.

Thanks,

Alex

21 May, 2019

Please login or register to post comments.