[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
   [Expand]Getting Started
    [Expand]Gauge Types
    [Expand]Visual Elements
    [Collapse]Appearance Customization
      Color Schemes
      Custom Draw
      Shaping Gauge Elements
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [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)

Shaping Gauge Elements

Each gauge element comes with a set of embedded shapes that specify this element's contour (form). Gauge elements change their shapes when you apply different gauge styles and presets, or modify the ShapeType property. If an element does not provide a shape that fits your requirements, you can create a custom shape for this element.

There are multiple gauge shapes included in the Gauges library, all derived from the base DevExpress.XtraGauges.Core.Drawing.BaseShape class as shown below.

All these shapes can be combined by their level of complexity into two groups.

  • Compound shapes. Shapes with no form that serve as containers for simple shapes. From all gauge shapes, only the ComplexShape is compound.
  • Simple shapes. These are simple shapes drawn according to a specific algorithm - arcs, ellipses, sectors, etc. Multiple simple shapes can be packed into a compound shape, the more simple shapes you combine - the more intricate and fancy your gauge elements will look. All BaseShape class descendants except for the ComlexShape are simple shapes.

Refer to this KB article for a description on each shape and an illustrated example of how to apply this or that shape to a gauge needle. Make a note that there are no special shapes for needles, shapes for background layers, shapes for spindle caps, etc.; you can apply them to any gauge element that exposes the Shape property.

Shaping any gauge element takes four steps.

  1. Access the required element's Shape property and cast it to the ComplexShape class. Even if your custom shape will be based on one simple shape, you have to place it within a compound shape first.

  2. Clear your compound shape by calling the .Collection.Clear() method.

  3. Create one or multiple simple shapes from which your ComplexShape will consist of.

  4. Now add all simple shapes to the ComplexShape object.

    Your gauge element (a needle in this example) will now take a unique form based on these custom shapes you have created. The following figure illustrates a result.


Modifying the ShapeType property for a gauge element will break all shape customizations made to this element and apply one of the standard embedded shapes.

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