Skip to main content
BuyLog In
WinForms Controls
Search in…
Docs > Controls and Libraries > Gauges > Getting Started > Creating a Gauge from Scratch
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
Creating a Gauge from Scratch
Concepts
Design-Time Features
Examples
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

Creating a Gauge from Scratch

  • 7 minutes to read

In the previous lesson, you created a modern-looking gauge based on a ready-to-go gauge preset with very few customizations. In this lesson, you will create a more complex gauge without using any built-in presets. All gauge elements will be created and customized manually.

The DevExpress WinForms Gauge Control demo contains the following gauge.

XtraGauges - GS2 Example

Create a WinForms gauge that will look just the same.

  1. Start with dropping the new GaugeControl onto your form. As you do so, the Preset Manager will be automatically shown. Since you do not need any of its presets, close the manager.

  2. Invoke the control’s smart-tag and click the ‘Customize Gauge Control’ link.

    XtraGauges - GS2 Step1 Designer

    This action will invoke the Visual Gauge Control Designer where you can add a new gauge. Select the ‘Circular Gauges’ item, then click ‘Add’ to create a gauge of the selected type. Click ‘OK’ to exit the designer.

    image

  3. Now invoke the newly created gauge’s smart-tag and open the Gauge Designer by clicking the related menu item.

    image

  4. In the Gauge Designer, switch to the Scales section and click the DesignerPlusButton button to add a new scale. After you have added the first gauge element, the DesignerPlusButton button disappears. If you need more elements of this type - clone the first one by clicking the ‘Clone’ button. Another way to add more elements is clicking the required ‘Add…’ menu item in the gauge’s smart-tag.

    XtraGauges - Adding New Elements Via Smarttag

  5. For this sample gauge, you will need three scales of different sizes. All three of them look quite similar, so you can create and customize the first scale and then clone it twice. Alternatively, you can create all three scales at once and then customize each of them separately. In either case, you will need the following properties:

    To learn more about each of these settings, refer to the Scales and Appearance Customization topics. Below is the code snippet for customizing all three scales and the figure, illustrating the final result.

    image

    // arcScaleComponent1
arcScaleComponent1.RadiusX = 30F;
arcScaleComponent1.RadiusY = 30F;
arcScaleComponent1.MaxValue = 40F;
arcScaleComponent1.MinValue = -40F;
arcScaleComponent1.MajorTickCount = 9;
arcScaleComponent1.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 0.9F);
arcScaleComponent1.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
arcScaleComponent1.MajorTickmark.TextOffset = 15F;
arcScaleComponent1.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.LeftToRight;
arcScaleComponent1.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
arcScaleComponent1.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:Gray");
arcScaleComponent1.MinorTickCount = 4;
arcScaleComponent1.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 0.4F);
arcScaleComponent1.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;
// arcScaleComponent2
arcScaleComponent2.RadiusX = 80F;
arcScaleComponent2.RadiusY = 80F;
arcScaleComponent2.MinValue = 720F;
arcScaleComponent2.MaxValue = 780F;
arcScaleComponent2.MajorTickCount = 7;
arcScaleComponent2.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 1F);
arcScaleComponent2.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
arcScaleComponent2.MajorTickmark.TextOffset = 15F;
arcScaleComponent2.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.Tangent;
arcScaleComponent2.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
arcScaleComponent2.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:Gray");
arcScaleComponent2.MinorTickCount = 4;
arcScaleComponent2.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(1.1F, 0.5F);
arcScaleComponent2.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;
// arcScaleComponent3
arcScaleComponent3.RadiusX = 110F;
arcScaleComponent3.RadiusY = 110F;
arcScaleComponent3.MinValue = 960F;
arcScaleComponent3.MaxValue = 1040F;
arcScaleComponent3.MajorTickCount = 9;
arcScaleComponent3.MajorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.7F, 1F);
arcScaleComponent3.MajorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_4;
arcScaleComponent3.MajorTickmark.TextOffset = 15F;
arcScaleComponent3.MajorTickmark.TextOrientation = DevExpress.XtraGauges.Core.Model.LabelOrientation.Tangent;
arcScaleComponent3.AppearanceTickmarkText.Font = new System.Drawing.Font("Tahoma", 8F);
arcScaleComponent3.AppearanceTickmarkText.TextBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:Gray");
arcScaleComponent3.MinorTickCount = 4;
arcScaleComponent3.MinorTickmark.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(1.1F, 0.5F);
arcScaleComponent3.MinorTickmark.ShapeType = DevExpress.XtraGauges.Core.Model.TickmarkShapeType.Circular_Style10_2;

  6. Create Value Indicators that will point to current scale values. Add a needle for the inner scale and a marker for the outer scale. To associate an indicator with a scale, use the ArcScale property. Modifying the ShapeType, ShapeScale, ShapeOffset and Shader properties, you can set the desired appearance and alignment for your indicators. The code and resulting figure are listed below.

    image

    // arcScaleNeedleComponent1
arcScaleNeedleComponent1.ArcScale = this.arcScaleComponent1;
arcScaleNeedleComponent1.StartOffset = 18F;
arcScaleNeedleComponent1.EndOffset = 5F;
arcScaleNeedleComponent1.ShapeType = DevExpress.XtraGauges.Core.Model.NeedleShapeType.CircularHalf_Style23;
arcScaleNeedleComponent1.ZOrder = -50;
// arcScaleMarkerComponent1
arcScaleMarkerComponent1.ArcScale = this.arcScaleComponent3;
arcScaleMarkerComponent1.ShapeOffset = 27F;
arcScaleMarkerComponent1.Shader = new DevExpress.XtraGauges.Core.Drawing.StyleShader("Colors[Style1:SlateGray;Style2:CornflowerBlue]");
arcScaleMarkerComponent1.ShapeScale = new DevExpress.XtraGauges.Core.Base.FactorF2D(0.8F, 1F);
arcScaleMarkerComponent1.ZOrder = -100;

  7. Colored arcs that mark certain scale intervals are called ranges. You will need two ranges for the temperature scale and three ranges for the pressure. Scale ranges are stored within the ArcScale.Ranges collection. For each range, you will need to set its start and end values (the BaseRange.StartValue and BaseRange.EndValue properties), offsets (the BaseRange.ShapeOffset property), thickness (the BaseRange.StartThickness and BaseRange.EndThickness properties) and forecolor (the BaseShapeAppearance.ContentBrush property). The resulting figure and the code snippet for customizing ranges are listed below.

    image

    //Outer scale ranges
arcScaleRange1.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:SeaGreen");
arcScaleRange1.StartThickness = 4F;
arcScaleRange1.EndThickness = 4F;
arcScaleRange1.StartValue = 970F;
arcScaleRange1.EndValue = 991F;
arcScaleRange1.ShapeOffset = 33F;
arcScaleRange2.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:Khaki");
arcScaleRange2.StartThickness = 4F;
arcScaleRange2.EndThickness = 4F;
arcScaleRange2.StartValue = 991F;
arcScaleRange2.EndValue = 1009F;
arcScaleRange2.ShapeOffset = 33F;
arcScaleRange3.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:LightCoral");
arcScaleRange3.StartValue = 1009F;
arcScaleRange3.EndValue = 1030F;
arcScaleRange3.StartThickness = 4F;
arcScaleRange3.EndThickness = 4F;
arcScaleRange3.ShapeOffset = 33F;
//Inner scale ranges
arcScaleRange4.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:CornflowerBlue");
arcScaleRange4.StartValue = -40F;
arcScaleRange4.EndValue = 0F;
arcScaleRange4.StartThickness = 4F;
arcScaleRange4.EndThickness = 4F;
arcScaleRange4.ShapeOffset = 0F;
arcScaleRange5.AppearanceRange.ContentBrush = new DevExpress.XtraGauges.Core.Drawing.SolidBrushObject("Color:Khaki");
arcScaleRange5.StartValue = 0F;
arcScaleRange5.EndValue = 40F;
arcScaleRange5.StartThickness = 4F;
arcScaleRange5.EndThickness = 4F;
arcScaleRange5.ShapeOffset = 0F;

  8. In Gauge Designer add a background layer, set the desired ArcScaleBackgroundLayer.ShapeType and specify the layer size by setting the ArcScaleBackgroundLayer.Size property.

    image

    Tip

    The background image for the ‘Modern’ shape in the figure above (CircularFull_Style23) is already drawn with glare effect imitation. If you need additional effects, you may want to add an extra effect layer.

    arcScaleBackgroundLayerComponent1.ShapeType = DevExpress.XtraGauges.Core.Model.BackgroundLayerShapeType.CircularFull_Style23;
 arcScaleBackgroundLayerComponent1.Size = new System.Drawing.SizeF(354F, 354F);
 arcScaleBackgroundLayerComponent1.ZOrder = 1000;

  9. At the final step, add a state image indicator and three custom labels. Set their appearances and locations as needed. The figure below illustrates the final result.

    image

Your real-life application gauges may be even more complex. See the Visual Elements topic for the complete list of available gauge elements.