Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
   [Expand]Product Information
   [Expand]Getting Started
     Introduction to Gauges
     Coordinate System
   [Expand]Visual Elements
   [Expand]Design-time Features
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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 Gauge (Visual Elements).

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