How to: Create a Digital Gauge

• Jul 26, 2021

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

C#

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

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

private void CreateDigitalGauge() {
    // Create a new instance of the ASPxGaugeControl class
    // with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();
    // Create a new instance of the DigitalGauge class
    // and add it to the gauge control's Gauges collection.
    DigitalGauge digitalGauge = (DigitalGauge)gaugeControl.AddGauge(GaugeType.Digital);
    // Specify the digital gauge's settings.
    digitalGauge.Text = "Digital Gauge";
    digitalGauge.DigitCount = 13;
    digitalGauge.DisplayMode = DigitalGaugeDisplayMode.FourteenSegment;
    DigitalBackgroundLayerComponent bg = digitalGauge.AddBackgroundLayer();
    bg.ShapeType = DigitalBackgroundShapeSetType.Style2;
    digitalGauge.AppearanceOn.ContentBrush = new SolidBrushObject(Color.Orange);
    gaugeControl.Width = 250;
    gaugeControl.Height = 100;
    // Enable the auto-layout feature.
    gaugeControl.AutoLayout = true;
    // Add the gauge control to the page's control collection.
    Page.Form.Controls.Add(gaugeControl);
}