[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
   [Collapse]Getting Started
     Creating a Gauge from Scratch
   [Expand]Design-Time Features
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Creating a Gauge from Scratch

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.

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.

    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 button to add a new scale. After you have added the first gauge element, the 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.

  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.

  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.

  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.

  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.

  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.

Is this topic helpful?​​​​​​​