[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
   [Expand]Getting Started
    [Expand]Gauge Types
    [Expand]Visual Elements
    [Collapse]Appearance Customization
      Color Schemes
      Custom Draw
      Shaping Gauge Elements
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [Expand]Design-Time Features
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Color Schemes

Color scheme is a feature that provides the quick and handy way to set a unified appearance for all range bars, state image indicators, images and labels within a GaugeControl. Although all these elements are common elements for any analog (circular or linear) gauge, applying color schemes to gauges with Ignis and Haze styles is the best idea. Gauges of these styles have no elements that cannot be colorized (needles, spindle caps, tickmarks etc) so the a color scheme will have the most impact on these. The figure below illustrates an example of four GaugeControl with different color schemes applied.


For best visual results use monochrome images on a transparent background for all image elements that will be colorized via a color scheme.

To set a color scheme you need to specify only two settings, accessed via the GaugeControlBase.ColorScheme property:

  • ColorScheme.TargetElements - allows you to specify which gauge elements will be affected by this color scheme. It does not matter whether or not you currently have this or that element within your gauge (a range bar, for instance) - the TargetElements property enumerates gauge element types, not specific elements.
  • ColorScheme.Color - gets or sets the color that will be used to paint selected TargetElements.

When both properties are set, your color scheme is ready to go. You can turn it off for individual elements by doing one of the following:

  • painting the desired element with a SolidBrushObject or BaseGradientBrushObject object. Color scheme is only applied to elements painted with an empty brush object. Use this method to set a custom color for the element.

  • Set the element's UseColorScheme property to false. This approach is used to leave default skin colors for the target element.

You can modify color scheme colors depending on an external factor. For instance, the following animation illustrates one of the DevExpress gauge demos, where the state image indicator, the range bar and one of the labels are painted in different colors depending on the current temperature.

Expanded Example

The following example lists a code that applies the same color scheme to the set of gauge controls as the figure below illustrates.

Each gauge control has a single gauge with the Ignis style applied. The default arc scale and range bar are duplicated via the Gauge Designer and arranged inside the outer scale. The outer scale ranges from 0 to 100 and displays the movie metascore. This value affects the color of the color scheme applied to the following elements: the outer range bar, the star image and two labels for IMDb and Metacritics movie scores. The inner range bar that displays the movie budget, as well the label related to this range bar, ignore the color scheme settings and are customarily painted in gray.

Is this topic helpful?​​​​​​​