Skip to main content
BuyLog In
WinForms Controls
Search in…
Docs > Controls and Libraries > Gauges > Examples > How To: Create a Gauge From Scratch (Runtime)
All docs
V24.1
WinForms Controls
.NET/.NET Core Support
Prerequisites
What's Installed
Build an Application
Controls and Libraries
Forms and User Controls
Messages, Notifications, and Dialogs
Editors and Simple Controls
Ribbon, Bars and Menu
Application UI Manager
Docking Library
Data Grid
Vertical Grid
Property Grid
Pivot Grid
Tree List
Gantt Control
Chart Control
Diagrams
Gauges
Getting Started
Concepts
Design-Time Features
Examples
How to: Add and Customize Gauge Animation
How To: Bind a Gauge Control to a Data Source
How to: Bind a Gauge Control to a Data Source at Runtime
How to: Create a Circular Gauge (Design-time)
How to: Create a Circular Gauge (Runtime)
How To: Create a Digital Gauge (Design-time)
How To: Create a Digital Gauge (Runtime)
How To: Create a Gauge From Scratch (Runtime)
How To: Create a Linear Gauge (Design-time)
How To: Create a Linear Gauge (Runtime)
How To: Create a State Indicator Gauge (Design-time)
How To: Create a State Indicator Gauge (Runtime)
How To: Custom Draw a Gauge Control
How to: Move Value Indicators at Runtime
How To: Use Gauges for In-Place Editing
Product Information
Map Control
Scheduler
Spreadsheet
Rich Text Editor
Spell Checker
Form Layout Managers
Navigation Controls
Printing-Exporting
PDF Viewer
Reporting
Office File API
Snap
TreeMap Control
Sunburst Control
Sankey Diagram Control
Heatmap Control
Common Features
Security Considerations
UI Templates
Desktop & Web App UI Framework (Powered by EF Core)
Get More Help
API Reference
Download CHM

How To: Create a Gauge From Scratch (Runtime)

  • 8 minutes to read

This example demonstrates how to create the following circular gauge in code.

Circular Gauge for WinForms, DevExpress

Drop the Gauge control (gaugeControl1) and two TrackBar controls (trackBar1, trackBar2) onto the Form.

There are two ways to add gauge UI elements.

  1. Use the Add... methods to display the pre-designed UI elements (e.g., CircularGauge.AddNeedle, LinearGauge.AddScale, DigitalGauge.AddBackgroundLayer, etc.). For instance, the AddScale method creates a scale with tick marks formatted to display integer values and displays the scale within the Gauge control.
  2. Create UI elements (ArcScaleComponent, LinearScaleMarkerComponent, DigitalBackgroundLayerComponent, etc.), name them, customize their settings, and add them to the corresponding collections of the Gauge control (e.g., the CircularGauge.Needles).

Note

Whichever approach you choose, wrap the code that sets up gauge UI elements in a pair of BeginUpdate \ EndUpdate methods to avoid excessive visual updates.

using System.Drawing;
using System.Windows.Forms;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Win.Base;
using DevExpress.XtraGauges.Win.Gauges.Circular;

namespace GaugeFromSratch {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
            gaugeControl1.Gauges.Add(CreateCircularGauge());
        }

        CircularGauge CreateCircularGauge() {
            CircularGauge gauge = new CircularGauge();
            gauge.BeginUpdate();
            var scales = CreateScales(gauge);
            var smallScale = scales[0];
            var largeScale = scales[2];
            CreateValueIndicators(gauge, smallScale, largeScale);
            CreateScaleRanges(gauge, smallScale, largeScale);
            CreateOrnamentalElements(gauge, largeScale);
            trackBar1.Maximum = 40;
            trackBar2.Maximum = 1040;
            trackBar2.Minimum = 960;
            trackBar1.ValueChanged += (s, e) => smallScale.Value = trackBar1.Value;
            trackBar2.ValueChanged += (s, e) => largeScale.Value = trackBar2.Value;
            gauge.EndUpdate();
            return gauge;
        }

        ArcScaleComponent[] CreateScales(CircularGauge gauge) {
            // Small Scale 
            var smallScale = new ArcScaleComponent();
            smallScale.BeginUpdate();
            smallScale.Name = "smallScale";
            smallScale.StartAngle = -240f;
            smallScale.EndAngle = 60f;
            smallScale.Center = new DevExpress.XtraGauges.Core.Base.PointF2D(125, 125);
            smallScale.RadiusX = 30F;
            smallScale.RadiusY = 30F;
            smallScale.MaxValue = 40F;
            smallScale.MinValue = -40F;
            smallScale.Value = trackBar1.Value;
            smallScale.MajorTickCount = 9;
            smallScale.MajorTickmark.FormatString = "{0:F0}";
            smallScale.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 0.9F);
            smallScale.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
            smallScale.MajorTickmark.TextOffset = 15F;
            smallScale.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.LeftToRight;
            smallScale.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
            smallScale.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Gray);
            smallScale.MinorTickCount = 4;
            smallScale.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 0.4F);
            smallScale.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;
            smallScale.EndUpdate();
            // Medium Scale 
            var mediumScale = new ArcScaleComponent();
            mediumScale.BeginUpdate();
            mediumScale.Name = "mediumScale";
            mediumScale.StartAngle = -240f;
            mediumScale.EndAngle = 60f;
            mediumScale.Center = new DevExpress.XtraGauges.Core.Base.PointF2D(125, 125);
            mediumScale.RadiusX = 80F;
            mediumScale.RadiusY = 80F;
            mediumScale.MinValue = 720F;
            mediumScale.MaxValue = 780F;
            mediumScale.MajorTickCount = 7;
            mediumScale.MajorTickmark.FormatString = "{0:F0}";
            mediumScale.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 1F);
            mediumScale.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
            mediumScale.MajorTickmark.TextOffset = 15F;
            mediumScale.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.Tangent;
            mediumScale.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
            mediumScale.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Gray);
            mediumScale.MinorTickCount = 4;
            mediumScale.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(1.1F, 0.5F);
            mediumScale.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;
            mediumScale.EndUpdate();
            // Large Scale 
            var largeScale = new ArcScaleComponent();
            largeScale.BeginUpdate();
            largeScale.Name = "largeScale";
            largeScale.Center = new DevExpress.XtraGauges.Core.Base.PointF2D(125, 125);
            largeScale.RadiusX = 110F;
            largeScale.StartAngle = -240f;
            largeScale.EndAngle = 60f;
            largeScale.RadiusY = 110F;
            largeScale.MinValue = 960F;
            largeScale.MaxValue = 1040F;
            largeScale.Value = trackBar2.Value;
            largeScale.MajorTickCount = 9;
            largeScale.MajorTickmark.FormatString = "{0:F0}";
            largeScale.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 1F);
            largeScale.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
            largeScale.MajorTickmark.TextOffset = 15F;
            largeScale.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.Tangent;
            largeScale.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
            largeScale.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Gray);
            largeScale.MinorTickCount = 4;
            largeScale.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(1.1F, 0.5F);
            largeScale.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;
            largeScale.EndUpdate();
            var scales = new ArcScaleComponent[] { smallScale, mediumScale, largeScale };
            gauge.Scales.AddRange(scales);
            return scales;
        }

        void CreateValueIndicators(CircularGauge gauge, ArcScaleComponent smallScale, ArcScaleComponent largeScale) {
            // A value indicator related to the inner scale
            var needle = new ArcScaleNeedleComponent();
            needle.BeginUpdate();
            needle.Name = "needle";
            needle.ArcScale = smallScale;
            needle.StartOffset = 18F;
            needle.EndOffset = 5F;
            needle.ShapeType = DevExpress.XtraGauges.Core.Model.NeedleShapeType.CircularHalf_Style23;
            needle.ZOrder = -50;
            needle.EndUpdate();
            // A value indicator related to the outer scale
            var marker = new ArcScaleMarkerComponent();
            marker.BeginUpdate();
            marker.Name = "marker";
            marker.ArcScale = largeScale;
            marker.ShapeOffset = 27F;
            marker.Shader = new DevExpress.XtraGauges.Core.Drawing.StyleShader() { StyleColor1 = Color.SlateBlue, StyleColor2 = Color.CornflowerBlue };
            marker.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.8F, 1F);
            marker.ZOrder = -100;
            marker.EndUpdate();

            gauge.Needles.Add(needle);
            gauge.Markers.Add(marker);
        }

        void CreateScaleRanges(CircularGauge gauge, ArcScaleComponent smallScale, ArcScaleComponent largeScale) {
            // Outer Green Range
            ArcScaleRange outerGreenRange = new ArcScaleRange();
            outerGreenRange.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.SeaGreen);
            outerGreenRange.StartThickness = 4F;
            outerGreenRange.EndThickness = 4F;
            outerGreenRange.StartValue = 970F;
            outerGreenRange.EndValue = 991F;
            outerGreenRange.ShapeOffset = 33F;
            // Outer Yellow Range
            ArcScaleRange outerYellowRange = new ArcScaleRange();
            outerYellowRange.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Khaki);
            outerYellowRange.StartThickness = 4F;
            outerYellowRange.EndThickness = 4F;
            outerYellowRange.StartValue = 991F;
            outerYellowRange.EndValue = 1009F;
            outerYellowRange.ShapeOffset = 33F;
            // Outer Red Range
            ArcScaleRange outerRedRange = new ArcScaleRange();
            outerRedRange.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.LightCoral);
            outerRedRange.StartValue = 1009F;
            outerRedRange.EndValue = 1030F;
            outerRedRange.StartThickness = 4F;
            outerRedRange.EndThickness = 4F;
            outerRedRange.ShapeOffset = 33F;
            // Inner Blue Range
            ArcScaleRange innerBlueRange = new ArcScaleRange();
            innerBlueRange.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.CornflowerBlue);
            innerBlueRange.StartValue = -40F;
            innerBlueRange.EndValue = 0F;
            innerBlueRange.StartThickness = 4F;
            innerBlueRange.EndThickness = 4F;
            innerBlueRange.ShapeOffset = 0F;
            // Inner Yellow Range
            ArcScaleRange innerYellowRange = new ArcScaleRange();
            innerYellowRange.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Khaki);
            innerYellowRange.StartValue = 0F;
            innerYellowRange.EndValue = 40F;
            innerYellowRange.StartThickness = 4F;
            innerYellowRange.EndThickness = 4F;
            innerYellowRange.ShapeOffset = 0F;
            // Adds the ranges to the scales
            smallScale.Ranges.AddRange(new ArcScaleRange[] { innerBlueRange, innerYellowRange });
            largeScale.Ranges.AddRange(new ArcScaleRange[] { outerGreenRange, outerYellowRange, outerRedRange });
        }

        void CreateOrnamentalElements(CircularGauge gauge, ArcScaleComponent largeScale) {
            ArcScaleBackgroundLayerComponent backgroundLayer = new ArcScaleBackgroundLayerComponent();
            backgroundLayer.BeginUpdate();
            backgroundLayer.Name = "backgroundLayer";
            backgroundLayer.ShapeType = DevExpress.XtraGauges.Core.Model.BackgroundLayerShapeType.CircularFull_Style23;
            backgroundLayer.ArcScale = largeScale;
            backgroundLayer.Size = new SizeF(350F, 350F);
            backgroundLayer.ZOrder = 1000;
            backgroundLayer.EndUpdate();
            // Custom labels
            LabelComponent mmLabel = new LabelComponent();
            mmLabel.BeginUpdate();
            mmLabel.Name = "mmLabel";
            mmLabel.Text = "mm";
            mmLabel.Position = new DevExpress.XtraGauges.Core.Base.PointF2D(128, 210);
            mmLabel.AppearanceText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Gray);
            mmLabel.EndUpdate();
            LabelComponent mbLabel = new LabelComponent();
            mbLabel.BeginUpdate();
            mbLabel.Name = "mbLabel";
            mbLabel.Text = "millibars";
            mbLabel.Position = new DevExpress.XtraGauges.Core.Base.PointF2D(128, 238);
            mbLabel.AppearanceText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject(Color.Gray);
            mbLabel.EndUpdate();
            // Adds the background and labels to the Gauge control
            gauge.BackgroundLayers.Add(backgroundLayer);
            gauge.Labels.AddRange(new LabelComponent[] { mmLabel, mbLabel });
        }
    }
}
See Also