You are viewing help content for pre-release software. This document and the features it describes are subject to change. Switch to the current version.

Palettes

  • 7 minutes to read

Palettes allow you to integrate colors (for example, corporate colors) into your application and customize colors used in themes. You can create a custom palette or use predefined palettes in this instance.

Theme Palettes

The Palette is a list of named colors. Each color has a ColorName value and a Color value. You can use the ColorName to assign a Color to any number of UI elements:

WPF Themes - Palette Mechanism Scheme

WPF Themes - Palette Mechanism Example

The following DevExpress WPF Themes contain palettes:

Theme Family Themes
Windows 10 Dark, Light
Office 2019 Black, Colorful, Dark Gray, White, HighContrast
Visual Studio 2019 Blue, Dark, Light
Office 2016 SE Black, Colorful, Dark Gray, White
Visual Studio 2017 Blue, Dark, Light

Predefined Palettes

Palette Themes include the following predefined palettes:

Supported Themes Predefined Palette
Win10 Win10Palette
Office 2016 SE, Visual Studio 2017, Office 2019, Visual Studio 2019 EnhancedContrast
Office 2016 SE, Visual Studio 2017, Office 2019 Brickwork
Office 2016 SE, Visual Studio 2017, Office 2019 CobaltBlue
Office 2016 SE, Visual Studio 2017, Office 2019 DarkLilac
Office 2016 SE, Visual Studio 2017, Office 2019 RedWine
Office 2016 SE, Visual Studio 2017, Office 2019 SpruceLeaves
Office 2016 SE, Visual Studio 2017, Office 2019 Turquoise
VS2019Blue Latte
VS2019Blue Navy
VS2019Dark BlueberryCake
VS2019Dark DeepSea
VS2019Dark Dimmed
VS2019Dark Sand
VS2019Dark Storm
VS2019Light Berberis
VS2019Light Cornflower
VS2019Light EmeraldSea
VS2019Light LightLilac
VS2019Light Loft

Apply a Palette in Code

Note

The application does not unload the loaded theme assemblies when you switch themes.

  1. Reference the Mono.cecil NuGet package in your project.
  2. Call the Theme.RegisterPredefinedPaletteThemes method to enable predefined palettes.
  3. Set the ApplicationThemeHelper.ApplicationThemeName property to the desired predefined palette name and base theme name combination.

    Theme.RegisterPredefinedPaletteThemes();
    ApplicationThemeHelper.ApplicationThemeName = PredefinedThemePalettes.RedWine.Name + Theme.Office2019White.Name;
    

Tip

You can use the Theme.CachePaletteThemes property to cache the current palette theme assembly. The cache reduces load times in future application runs.

The code sample above enables all available palettes for the current theme. To enable and apply a single palette:

  1. Reference the Mono.cecil NuGet package in your project.
  2. Pass the palette and a base theme to the Theme.CreateTheme method to create a new theme.
  3. Pass the theme to the Theme.RegisterTheme method.
  4. Set the ApplicationThemeHelper.ApplicationThemeName property to the theme name.

    var palettetheme = Theme.CreateTheme(PredefinedThemePalettes.RedWine, Theme.Office2019White); 
    Theme.RegisterTheme(palettetheme); 
    ApplicationThemeHelper.ApplicationThemeName = palettetheme.Name;
    

Apply a Palette to a Touch Theme

  1. Pass a palette and a non-touch version of a theme to the Theme.CreateTheme method.
  2. Append the ;Touch suffix to the application theme name and apply the theme.

The following code sample applies the Office2019BlackTouch with the TouchPalette to an application:

var palette = new ThemePalette("TouchPalette");
var theme = Theme.CreateTheme(palette, Theme.Office2019Black);
Theme.RegisterTheme(theme);
ApplicationThemeHelper.ApplicationThemeName = theme.Name + ";Touch";

You can display predefined palettes in the Ribbon Gallery to allow users to select a palette and apply it to the current theme:

WPF Themes - Palettes in Ribbon Gallery

View Example: How to Implement a Theme Palette Selector Based on a Bar Item

  1. Reference the DevExpress.Mvvm.v21.2.dll assembly.
  2. Call the Theme.RegisterPredefinedPaletteThemes method at application startup to enable these palettes:

    public partial class App : Application {
        protected override void OnStartup(StartupEventArgs e) {
            Theme.RegisterPredefinedPaletteThemes();
            base.OnStartup(e);
        }
    }
    
  3. Attach the RibbonGalleryItemThemePaletteSelectorBehavior to a RibbonGalleryBarItem:

    <dxr:RibbonGalleryBarItem ... >
        <dxmvvm:Interaction.Behaviors>
            <dxr:RibbonGalleryItemThemePaletteSelectorBehavior />
        </dxmvvm:Interaction.Behaviors>
    </dxr:RibbonGalleryBarItem>
    

Use Windows Accent Color and App Mode

You can use the Win10Palette predefined palette with the Windows10Dark and Windows10Light themes.

The Win10Palette allows you to get the following Windows 10 theme settings and listen their changes in your application:

  • Accent color
  • App Mode (Dark/Light)

Refer to the following Microsoft help topic for more information: Change colors in Windows

WPF Themes - Palettes in Ribbon Gallery

The code sample below performs the following actions:

  1. Creates a theme based on Win10Dark/Win10Light theme depending on the Windows 10 app mode.
  2. Applies the Windows 10 accent color to the palette.
  3. Applies the theme on the application startup.
protected override void OnStartup(StartupEventArgs e)
{
    var palette = new Win10Palette();
    var customtheme = Theme.CreateTheme(palette, null);
    Theme.RegisterTheme(customtheme);
    ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;
    base.OnStartup(e);
}

Note

The Win10Palette works with the Windows 10 only. If the Win10Palette does not find the Windows accent color, the application accent color is set to #FF0078D7.

Listen Windows Accent Color and App Mode Changes

The Win10Palette constructor has the following parameters:

  • accentColor
  • listenAccentColorChanges
  • appMode
  • listenAppModeChanges
Accent Color

When the listenAccentColorChanges constructor parameter is true, the Win10Palette performs the following actions:

  • Gets a Windows 10 accent color when a user changes it.
  • Creates a new theme.
  • Applies the theme to an application.

Set the listenAccentColorChanges constructor parameter to false to stop getting a new accent color when a user changes it in Windows 10.

App Mode

When the listenAppModeChanges constructor parameter is true, the Win10Palette performs the following actions:

  • Get Windows 10 app mode when a user changes it.
  • Creates a theme based on Win10Dark or Win10Light theme to an application depending on the selected Windows app mode.

Set the listenAppModeChanges constructor parameter to false to stop switching between Win10Dark/Win10Light themes a user changes Windows 10 app mode.

Custom Palettes

For more information on how to create a custom theme palette, refer to the following WPF Theme Designer help topic: Edit Palette Colors.

You can export your palette in the following ways:

Edit Palettes in Code

Note

The application does not unload the loaded theme assemblies when you switch themes.

Refer to the following help topic to get the full list of available palette colors: Palette Color List.

To apply a custom palette to an application:

  1. Reference the Mono.cecil NuGet package in your project.
  2. Create a new ThemePalette instance:

    var custompalette = new ThemePalette("CustomPalette");
    

    … or create a new ThemePalette instance based on a predefined palette. In this case, the new palette inherits a predefined palette’s colors:

    var custompalette = new ThemePalette("CustomPalette", PredefinedThemePalettes.RedWine);    
    
  3. Use the ThemePalette.SetColor method to specify new colors:

    custompalette.SetColor("Foreground", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
    custompalette.SetColor("Backstage.Focused", Colors.White);    
    
  1. Pass the palette and a theme with palette support to the Theme.CreateTheme method to create a new theme:

    var customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE);    
    
  2. Pass the theme to the Theme.RegisterTheme method and set the ApplicationThemeHelper.ApplicationThemeName to the theme’s name to apply the theme to an application:

    Theme.RegisterTheme(customtheme);
    ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;
    

The full code sample:

var custompalette = new ThemePalette("CustomPalette");
custompalette.SetColor("Foreground", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
custompalette.SetColor("Backstage.Focused", Colors.White);
var customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE);
Theme.RegisterTheme(customtheme);
ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;

View Example: Create a Custom Palette and Display it in the Ribbon Gallery

Limitation

Change a Theme at Runtime in a .NET 5 Application with Single File Deployment

DevExpress WPF theme assemblies must be extracted to a disk. When you publish a .NET 5 application (PublishSingleFile is true), set the IncludeAllContentForSelfExtract option to true in the project file. This will allow users to apply a palette at runtime.

<PropertyGroup>
  <OutputType>WinExe</OutputType>
  <TargetFramework>net5.0-windows</TargetFramework>
  <UseWPF>true</UseWPF>
  <Nullable>enable</Nullable>
  <PublishSingleFile>true</PublishSingleFile>
  <IncludeAllContentForSelfExtract>true</IncludeAllContentForSelfExtract>
</PropertyGroup>

Refer to the following MSDN article for more information on the issue: Single file deployment and executable.

See Also