Skip to main content

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.


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


  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.


    // 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.


    // 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.


    //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.



    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.


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