Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Collapse]Gauges
   [Expand]Getting Started
   [Collapse]Concepts
    [Expand]Gauge Types
    [Expand]Visual Elements
    [Collapse]Appearance Customization
      Color Schemes
      Custom Draw
      Shaping Gauge Elements
      Animation
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

Important

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.

How would you rate this topic?​​​​​​​