[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
    [Collapse]Visual Elements
     [Collapse]Analog Gauges
       Value Indicators
       Labels and Images
       State and State Image Indicators
       Ornamental Elements
     [Expand]Digital Gauges
     [Expand]State Indicator Gauges
    [Expand]Appearance Customization
     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)

State and State Image Indicators

State and state image indicators are elements used to label different gauge states. These can be regarded as a specific type of Value Indicators, isolated from Scales from the end-user's point of view. Both of these indicators can be used for only analog gauges (Circular Gauges and Linear Gauges).

Expanded State Indicators

State indicators display simple vector images of multiple available predefined shapes. To add a state indicator to your analog gauge, invoke the gauge's smart-tag and click the 'Add State Indicator' menu item, as shown below. Depending on the gauge's type, an object of either the ArcScaleStateIndicatorComponent or LinearScaleStateIndicatorComponent class will be created and placed into the gauge's Indicators collection.

As with other gauge visual elements, you can click a state indicator at design-time to modify its properties or invoke its designer (see the following figure).

To arrange the indicator to the desired position, use the StateIndicator.Center, StateIndicator.Size and BaseLeafPrimitive.ZOrder properties. After the state indicator is positioned, you can set the image displayed by it. To do so, add a new item to the indicator's StateIndicator.States collection. This will add a ScaleIndicatorState element that can display a predefined image when a related gauge scale's value reaches the specific value. This image will be displayed as long as the scale value stays within the target interval. This behavior is implemented by using the following properties:

  • StateImageIndicatorComponent.IndicatorScale - a scale associated with this indicator;
  • ScaleIndicatorState.ShapeType - gets or sets one of multiple predefined vector images to be displayed by this ScaleIndicatorState;
  • BaseIndicatorState.StartValue - a value of the associated scale starting from which the ScaleIndicatorState will display the specific image;
  • BaseIndicatorState.IntervalLength - the associated scale's value interval that starts from the StartValue. The indicator will display the ShapeType image for as long as the scale value stays within this interval.

The following animation illustrates an example: a gauge with two scale arcs that has two identical state indicators associated with these scales: the lower indicator relates to the outer scale (ranges from 0 to 100), the upper indicator - to the inner scale (ranges from 0 to 1000). Scale values are modified by using the range bars below the gauge. You will notice that the lower indicator changes its color from green to yellow and then to red when the outer gauge needle surpasses the values of 50 and 80 respectively. Value thresholds for the inner scale in turn, are set to 700 and 900.

The code snipped below illustrates how to do the same programmatically.

Expanded State Image Indicators

State image indicators are represented by the StateImageIndicatorComponent class and are used when pre-defined shapes of simple state indicators are insufficient for your task. These elements combine features of both simple static images and state indicators, giving you the unlimited resource to mark your gauge states in the desired way.

As with any other gauge element, a state image indicator can be added either via the corresponding link within the gauge's smart-tag, or by using the Gauge Designer (see the figure below).

To display a static image, assign this image to the indicator's Image property. Otherwise, if you wish to display multiple images, each for the specific related indicator state (which is the reason to use state image indicators in the first place), put your images into an image collection (e.g., the standard ImageList or the DevExpress ImageCollection object) and assign this collection to the indicator's StateImageIndicatorComponent.StateImages property. There are two options to toggle state images:

Use the first option when you need to mark different scale values by displaying different images. The second approach is useful when your state image indicator has no clear connection to scale values. For example, in the animation below, both radial gauges have two range bars - one for the temperature, the other - for humidity. State image indicators in the gauges' middle display icons of different weather types (sunny, cloudy, rain or snow), which does not strictly depend on either temperature or humidity.

State image indicators, as well as labels, static images and range bars can be colorized using Color Schemes.

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