How to: Integrate a State Indicator with a Circular Gauge Control

• Jun 07, 2019

The following sample shows how a State Indicator control can be integrated with the Circular Gauge control. This integration forces the State Indicator control to automatically change its state every time a Value Indicator enters a new range on a Circular Gauge.

For this, it is necessary to bind a State Indicator control to any value indicator of the Circular Gauge control (e.g., to a needle element) using the AnalogGaugeControl.ValueIndicator attached property.

You also need to add range elements to the scale of the Circular Gauge and specify states of the State Indicator control that correspond to these elements.

View Example

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <dxga:CircularGaugeControl>
            <dxga:CircularGaugeControl.Scales>
                <dxga:ArcScale EndValue="200">
                    <dxga:ArcScale.Needles>
                        <dxga:ArcScaleNeedle x:Name="needle" Value="40" IsInteractive="True">
                            <dxga:ArcScaleNeedle.Animation>
                                <dxga:IndicatorAnimation />
                            </dxga:ArcScaleNeedle.Animation>
                        </dxga:ArcScaleNeedle>
                    </dxga:ArcScale.Needles>
                    <dxga:ArcScale.Ranges>
                        <dxga:ArcScaleRange EndValue="100" StartValue="0" />
                        <dxga:ArcScaleRange EndValue="140" StartValue="100" />
                        <dxga:ArcScaleRange EndValue="200" StartValue="140" />
                    </dxga:ArcScale.Ranges>
                    <dxga:ArcScale.Layers>
                        <dxga:ArcScaleLayer/>
                    </dxga:ArcScale.Layers>
                </dxga:ArcScale>
            </dxga:CircularGaugeControl.Scales>
            <dxga:CircularGaugeControl.Model>
                <dxga:CircularCleanWhiteModel />
            </dxga:CircularGaugeControl.Model>
        </dxga:CircularGaugeControl>
        <dxga:StateIndicatorControl dxga:AnalogGaugeControl.ValueIndicator="{Binding ElementName=needle}"  
                                    HorizontalAlignment="Left" Margin="228,229,0,0"  
                                    VerticalAlignment="Top" Height="46" >
            <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>
        </dxga:StateIndicatorControl>
    </Grid>
</Window>