aspnet-5243-components-gauges-examples-how-to-create-a-state-indicator-gauge.md
This example shows how to create a state indicator gauge in code. The image below shows the result:
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);
}
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