Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

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

<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>