Skip to main content
BuyLog In
WPF Theme Designer
Search in…
Docs > WPF Theme Designer > Edit Palette Colors
A newer version of this page is available. .
All docs
V18.2
WPF Theme Designer
Prerequisites
Get Started
Workspace
Build and Export New Themes
Edit a Theme in XAML
Edit Palette Colors
Upgrade Themes
Import Themes
Resolve Merge Conflicts
Download CHM

Edit Palette Colors

  • 3 minutes to read

What is a Palette

The latest DevExpress Themes contain a palette. In the palette themes, you should edit less than 50 colors to change a theme appearance. In the non-palette themes, you should update hundreds of colors to achieve the same goal. Every palette color has a name and a color value.

When you create a new theme in Theme Designer, palette themes (Color Themes) are located in the Color Themes group:

Color Themes in Backstage View

Note

Themes you have imported from the Theme Editor do not contain a palette.

Edit Palettes

In the Palette window you can do the following operations:

  • add new palette colors
  • edit any palette color’s value
  • rename and delete palette theme specific colors.

When you add a color, this color appears in the Theme Specific group:

Theme Specific Palette Group

You can open the list of available operations in any of the following ways:

  • right-click any palette color in the Palette window
  • focus the Palette window and select the ribbon context Palette tab.

palette-operations

Use any of the following approaches to change a palette color:

The Palette window contains the search bar where you can search for a color name or color value.

palette-search-bar

Bind a Palette Color to an Element

XAML file contains palette bindings to elements. Theme Designer uses the $ symbol to mark palette colors (for example, the $Backstage.Delimeter value indicates the Backstage.Delimeter palette color).

Follow the steps below to bind a palette color to an element in the Individual Colors window:

  • find the element in the Individual Colors Grid
  • click the color’s value in the Color field
  • type a new color value or open the drop-down list and select a color from the list.

The following animation demonstrates how to bind a palette color to an element in the Individual Colors window:

binding palette color in the individual colors window

Follow the steps below to bind a color to an element in the XAML file using the CodeView window:

  • Find the element in the Code View. You can use the View in XAML tool or right-click an item in the Individual Colors Window and select Navigate the Code.
  • Type the $ symbol in the color value.
  • Input the color name or use the Ctrl+Space key combination and choose a color from the palette colors list.
  • Save the file to apply new colors to a theme and see changes in the Preview window.

Note

The palette color name is underlined with this color’s value.

Palette Color Underlining Codeview

You can group items by color in the Individual Colors window. To change the color of all items in a group, right-click the group and enter a color name/value.