[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]Gantt Control
  [Expand]Chart Control
   [Expand]Getting Started
    [Expand]Gauge Types
    [Collapse]Visual Elements
     [Collapse]Analog Gauges
       Value Indicators
       Labels and Images
       State and State Image Indicators
       Ornamental Elements
     [Expand]Digital Gauges
     [Expand]State Indicator Gauges
    [Expand]Appearance Customization
     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)

Ornamental Elements

Ornamental elements are optional elements used to decorate a gauge. This group includes spindle caps, background layers and effect layers.

Expanded Spindle Cap

A Spindle Cap is a fixed element that is located at the center of a circular gauge and is used to cover the needles' base.

A spindle cap is represented by the ArcScaleSpindleCap class. Like many other gauge elements, spindle caps have multiple pre-defined shapes. To select the required shape, use the ArcScaleSpindleCap.ShapeType property.

To arrange a spindle cap above or below certain gauge elements, use the BaseLeafPrimitive.ZOrder property. The ArcScaleSpindleCap.Size property allows you to enlarge or shrink the spindle cap.

Expanded Background Layer

Background layers are images of the certain shape and style that are used as the underlying layer for all base gauge elements. Each background layer has the BaseLeafPrimitive.ZOrder property set to 1000, which arranges it behind all the other elements. If you want to bring this layer in front of other gauge elements (or paint it above other layers, if there are any), you need to set the ZOrder property to a lower value.

For example, the following picture illustrates a circular gauge's background layer that is overlapped by the scale, whose ZOrder is set to 0 by default.

Depending on the gauge type, background layers can be represented by instances of the ArcScaleBackgroundLayerComponent or LinearScaleBackgroundLayerComponent classes.


Digital gauges also have background layers, represented by the DigitalBackgroundLayerComponent class. The Ornamental Elements topic to learn more.

To pick the required image displayed by the background layer, use the ArcScaleBackgroundLayer.ShapeType (LinearScaleBackgroundLayer.ShapeType) property.

To move a background layer within a circular gauge, use the ArcScaleBackgroundLayer.ScaleCenterPos property. The size of each background layer can be set explicitly by using the ArcScaleBackgroundLayer.Size property.

Background layers for linear gauges do not have the Size property. Instead, you need to set the LinearScaleBackgroundLayer.ScaleStartPos and LinearScaleBackgroundLayer.ScaleEndPos properties to shift, rotate or zoom the layer relative to its corresponding LinearScaleBackgroundLayer.LinearScale.

Expanded Effect Layer

Effect layers add a style effect (e.g., a glare effect) to your gauge. Opposite to background layers, effect layers are by default arranged above all the rest of the gauge elements, having the BaseLeafPrimitive.ZOrder property set to -1000. The figure below illustrates an example.

Effect layers are represented by instances of the ArcScaleEffectLayerComponent or LinearScaleEffectLayerComponent classes depending on the gauge type.


Digital gauges can also use effect layers based on the DigitalEffectLayerComponent class objects. See the Ornamental Elements topic to learn more.

Effect layers are arranged and customized identically to background layers (ScaleCenterPos and Size property for circular gauges, ScaleStartPos and ScaleEndPos for linear gauges).

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