[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
    [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)

Coordinate System

This document provides information on how gauges are measured within a Gauge Control, what the gauge Z Order is, as well as detailing how to specify angles of gauge specific elements.

Expanded Measuring Along the X and Y Axes

A Gauge Control can display multiple gauges of different types at the same time. Each gauge is drawn within a specific painting area - cell, which has its own relative coordinate system. In most cases, the origin of the coordinate system is the left-top corner of the painting cell, with the X axis pointing to the right and the Y axis pointing down.

Painting cells have real bounds within the gauge control. However, gauges within cells are not aware of these real sizes and coordinates.

The coordinate system within each cell is relative. The origin of the coordinate system is the point with the coordinates of (0,0), which is in most cases positioned at the left-top corner of the cell. For most gauge types, a cell's relative width and height are fixed, and these values are dependant upon the gauge type. Note that these values do not depend upon the real bounds of the cell.

For circular gauges, a cell has a relative width and height equal to 250:

For linear gauges, a cell's dimension along the X axis is 125, and the dimension along the Y axis is 250:



Note that for linear gauges oriented horizontally, the coordinate system is rotated 90 degrees clock-wise. The top-right corner has an x,y coordinate of (0,0), and the X axis points down and the Y axis points to the left:

For digital gauges, a cell's relative height is equal to 100, and the width is calculated automatically to keep its proportions:

For state indicator gauges, the coordinate system is like the one for circular gauges. A cell has a relative width and height equal to 250:

Expanded Z Order

Although a gauge is two-dimensional, it's composed of overlapping layers displaying various gauge elements (the background layer, one or more scales, needles, etc). All of these layers are positioned above each other and their positions along the Z axis are determined by the ZOrder.

Layers with higher ZOrders are positioned below layers with lower ZOrders. For instance, needles within circular gauges have negative ZOrders, and so they are displayed above all other layers.

Expanded Measuring Angles

Circular gauges allow you to customize angles of specific elements (for instance, the starting and ending angles of a scale). Angles are measured in degrees, starting from the X axis clockwise. The following image shows how angles are specified in circular gauges:

For more information on circular gauge elements, see Circular Gauges

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