WPF Circular Gauge – Display a State Indicator Based on Value Ranges

This example connects a StateIndicatorControl to a circular gauge needle and changes its visual state when the needle exceeds predefined value ranges.

Use the StateIndicatorControl when you need to:

• Change status colors (for example: green, yellow, red) based on the current value.
• Visualize thresholds or alerts.
• Synchronize a state indicator with a circular gauge.

Implementation Details

Configure Circular Gauge

The circular gauge defines a scale with three ranges:

<dxga:ArcScale.Ranges>
    <dxga:ArcScaleRange StartValue="0" EndValue="100" />
    <dxga:ArcScaleRange StartValue="100" EndValue="140" />
    <dxga:ArcScaleRange StartValue="140" EndValue="200" />
</dxga:ArcScale.Ranges>

A needle is placed on the gauge and set to an initial value:

<dxga:ArcScaleNeedle x:Name="needle" Value="40" IsInteractive="True" />

Bind State Indicator

The StateIndicatorControl is bound to the needle through the AnalogGaugeControl.ValueIndicator attached property:

<dxga:StateIndicatorControl
    dxga:AnalogGaugeControl.ValueIndicator="{Binding ElementName=needle}" />

The control defines multiple states for different value ranges:

<dxga:StateIndicatorControl.AdditionalStates>
    <dxga:State>
        <dxga:State.Presentation>
            <dxga:LampGreenStatePresentation />
        </dxga:State.Presentation>
    </dxga:State>
    <dxga:State>
        <dxga:State.Presentation>
            <dxga:LampYellowStatePresentation />
        </dxga:State.Presentation>
    </dxga:State>
    <dxga:State>
        <dxga:State.Presentation>
            <dxga:LampRedStatePresentation />
        </dxga:State.Presentation>
    </dxga:State>
</dxga:StateIndicatorControl.AdditionalStates>

As the needle moves across the scale range, the state indicator updates its appearance to reflect the current state.

Files to Review

• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)

Documentation

• Gauge Controls
• Circular Gauge
• AnalogGaugeControl.ValueIndicator
• StateIndicatorControl
• CircularGaugeControl
• Circular Gauge - Needle

More Examples

• WPF Gauges Getting Started – Lesson 3 – Create a Digital Gauge
• WPF Gauges – Set Width and Height of Symbols in Digital Gauge
• WPF Gauge – Create a Digital Gauge
• WPF Linear Gauge – Display Custom UI Elements
• Reporting for WPF – Advanced Gauge Customization
• WPF Gauges – Create a Volume Knob

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)