Skip to main content
BuyLog In
WPF Theme Editor
Search in…
Docs > WPF Theme Editor (Legacy) > UI Elements > Theme Wheel
All docs
V18.2
WPF Theme Editor (Legacy)
Main Features
Getting Started
Concepts
UI Elements
Color Scheme Browser
Log Viewer
Main Menu
Product Browser
Template Hierarchy
Theme Navigator
Theme Wheel
Visual Tree Browser
XAML Editor
Download CHM

Theme Wheel

  • 4 minutes to read

Note

The WPF Theme Editor does not support the DevExpress WPF Controls 18.2 or later. Use the WPF Theme Designer tool instead.

Use the Theme Wheel window to recolor themes. This window allows you to easily edit theme colors using a color wheel. A Theme Wheel can also organize colors by hue or RGB distance into the specified number of groups, so that you can customize color parameters for these entire groups instead of doing this for multiple individual colors.

Note

The Theme Wheel works with colors defined within the current color scheme. To use the Theme Wheel, you should open a color scheme file. For more information, see Color Schemes.

Overview

To invoke the Theme Wheel window, click Theme Wheel in a toolbar displayed within the Color Scheme Browser.

UI_ColorSchemeBrowser_Toolbar_ThemeWheel

The following image shows the Theme Wheel window.

UI_ThemeWheel_Scheme

This window consists of the following sections and elements.

  • Color Wheel - illustrates the relationship between theme colors and allows you to change these colors via dragging. To learn more, see Color Wheel.

  • Color Relationship Rule - specifies the relationship between colors in a theme (monochromatic, triad, compound, etc.). If Locked is selected, the relationship between colors is defined by the current theme. If None is selected, all colors are independent. Otherwise, a standard method (compound, monochromatic, etc.) is used.

    Note

    A color relationship rule restricts your capabilities to customize theme colors. To learn more, see Color Wheel.

  • Selected Color Settings - use to specify the lightness, saturation and hue of a color selected within the color wheel.
  • Color Grouping Settings - allow you to group colors and then separately customize color settings for each group. To learn more, see Color Grouping.
  • Selected Group Settings - use to customize brightness, contrast and saturation of all colors in the selected group.
  • Harmonics - allow you to replace color groups created according to the RGB or hue distance between colors with groups created according to harmony rules.

Color Wheel

A color wheel shows color hues arranged around a circle to illustrate chromatic relationships between colors.

UI_ThemeWheel_ColorWheel_Scheme

Theme colors or color groups (if grouping is enabled) are represented by circles displayed within the color wheel. The base color is shown as a large circle.

To adjust a color, drag the corresponding circle around the color wheel or select it on the wheel, and use sliders in the Selected Color section to customize particular parameters.

Note

When you adjust the base color, all other colors are changed accordingly as they are bound to the base color.

The capabilities to adjust colors are limited by the currently specified color relationship rule in the following way.

  • None - you can adjust each color separately. In this instance, the base color is not assigned.
  • Locked - you can adjust the base color without limitations. For other colors, you can only adjust their hue (i.e., drag circles around the color wheel center). Note that this changes the hue of all colors in the Locked mode.
  • Other (standard relationship rules) - you can change each color separately as far as its value does not break the selected rule.

To customize color wheel settings, use icons at the bottom right.

UI_ColorWheel_UpdateButton

Specifies whether to update the Theme Navigator on every color change or only when the Theme Editor is idle.

UI_ColorWheel_ShowHue

Specifies whether to vary saturation or brightness along the wheel radius. The other characteristic will be reflected with the background color of circles.

Color Grouping

Use color grouping to synchronously customize similar colors. You can group colors by the RGB or hue distance, and then adjust parameters for all colors in a particular group at once.

To enable color grouping, specify the required number of groups within the Count field in the Colors section.

This section also includes a gallery that shows color groups and lists colors related to each group.

DXThemeWheel_ColorGroups

Color groups are represented by squares in the first row of the gallery. When you select a group by clicking a square, the colors it contains are displayed below.

To adjust color parameters, use options in the Common Characteristics section.

You can also specify the Criterion that defines how colors are grouped, and the Colorize method that defines the relationship between colors within each group.

See Also