How to: Create a Linear Gauge

• Jul 26, 2021
• 2 minutes to read

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

C#

using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Drawing;
using DevExpress.Web.ASPxGauges.Gauges.Linear;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Core.Base;
using DevExpress.XtraGauges.Base;

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

private void CreateLinearGauge() {
    // Create a new instance of the ASPxGaugeControl class
    // with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();
    // Create a new instance of the LinearGauge class
    // and add it to the gauge control's Gauges collection.
    LinearGauge linearGauge = (LinearGauge)gaugeControl.AddGauge(GaugeType.Linear);
    linearGauge.AddDefaultElements();
    LinearScaleBackgroundLayer bg = linearGauge.BackgroundLayers[0];
    // Change the background layer's paint style.
    bg.ShapeType = BackgroundLayerShapeType.Linear_Style2;
    LinearScaleComponent scale = linearGauge.Scales[0];
    // Customize the scale's settings.
    scale.MinValue = 0;
    scale.MaxValue = 100;
    scale.Value = 50;
    scale.MajorTickCount = 6;
    scale.MajorTickmark.FormatString = "{0:F0}";
    scale.MajorTickmark.ShapeType = TickmarkShapeType.Linear_Style6_3;
    scale.MinorTickCount = 3;
    scale.MinorTickmark.ShapeType = TickmarkShapeType.Linear_Style5_2;
    // Shift tick marks to the right.
    scale.MajorTickmark.ShapeOffset = 5f;
    scale.MinorTickmark.ShapeOffset = 5f;
    scale.AppearanceTickmarkText.TextBrush = new SolidBrushObject(Color.White);
    // Change the levelBar's paint style.
    LinearScaleLevelComponent levelBar = linearGauge.Levels[0];
    levelBar.ShapeType = LevelShapeSetType.Style4;
    // Shift the background layer up and to the left.
    bg.ScaleStartPos = new PointF2D(bg.ScaleStartPos.X - 0.005f,
        bg.ScaleStartPos.Y - 0.015f);
    bg.ScaleEndPos = new PointF2D(bg.ScaleEndPos.X - 0.005f, bg.ScaleEndPos.Y);
    // Add the gauge control to the form.
    gaugeControl.Width = 250;
    gaugeControl.Height = 300;
    Page.Form.Controls.Add(gaugeControl);
}