How to: Create a State Indicator Gauge

• Jul 26, 2021
• 2 minutes to read

This example shows how to create a state indicator gauge in code. The image below shows the result:

C#

using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Core.Base;
using DevExpress.Web.ASPxGauges.Gauges.State;
using DevExpress.XtraGauges.Base;

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack)
        CreateStateIndicatorGauge();
}

private void CreateStateIndicatorGauge() {
    // Creates a new instance of the ASPxGaugeControl class
    // with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();
    // Create a new instance of the StateIndicatorGauge class
    // and add it to the gauge control's Gauges collection.
    StateIndicatorGauge siGauge =
              (StateIndicatorGauge)gaugeControl.AddGauge(GaugeType.StateIndicator);
    StateIndicatorComponent stateIndicator = siGauge.AddIndicator();
    // Add states.
    StateIndicatorShapeType[] shapes = new StateIndicatorShapeType[] {
                    StateIndicatorShapeType.TrafficLight1,
                    StateIndicatorShapeType.TrafficLight2,
                    StateIndicatorShapeType.TrafficLight3,
                    StateIndicatorShapeType.TrafficLight4 };
    stateIndicator.States.Clear();
    foreach (StateIndicatorShapeType shape in shapes) {
        IndicatorStateWeb state = new IndicatorStateWeb();
        state.ShapeType = shape;
        stateIndicator.States.Add(state);
    }
    // Set the current state.
    stateIndicator.StateIndex = 1;
    // Set the indicator's size.
    stateIndicator.Size = new SizeF(100, 200);
    // Add the gauge control to the Page.
    gaugeControl.Width = 250;
    gaugeControl.Height = 250;
    gaugeControl.AutoLayout = true;
    Page.Form.Controls.Add(gaugeControl);
}

VB.NET

Imports DevExpress.Web.ASPxGauges
Imports DevExpress.Web.ASPxGauges.Base
Imports DevExpress.XtraGauges.Core.Model
Imports DevExpress.XtraGauges.Core.Base
Imports DevExpress.Web.ASPxGauges.Gauges.State
Imports DevExpress.XtraGauges.Base

Class SurroundingClass
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then CreateStateIndicatorGauge()
    End Sub

    Private Sub CreateStateIndicatorGauge()
        Dim gaugeControl As ASPxGaugeControl = New ASPxGaugeControl()
        Dim siGauge As StateIndicatorGauge = CType(gaugeControl.AddGauge(GaugeType.StateIndicator), StateIndicatorGauge)
        Dim stateIndicator As StateIndicatorComponent = siGauge.AddIndicator()
        Dim shapes As StateIndicatorShapeType() = New StateIndicatorShapeType() {StateIndicatorShapeType.TrafficLight1, StateIndicatorShapeType.TrafficLight2, StateIndicatorShapeType.TrafficLight3, StateIndicatorShapeType.TrafficLight4}
        stateIndicator.States.Clear()

        For Each shape As StateIndicatorShapeType In shapes
            Dim state As IndicatorStateWeb = New IndicatorStateWeb()
            state.ShapeType = shape
            stateIndicator.States.Add(state)
        Next

        stateIndicator.StateIndex = 1
        stateIndicator.Size = New SizeF(100, 200)
        gaugeControl.Width = 250
        gaugeControl.Height = 250
        gaugeControl.AutoLayout = True
        Page.Form.Controls.Add(gaugeControl)
    End Sub
End Class