Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [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]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Gauges
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Expand]Concepts
   [Expand]Visual Elements
   [Collapse]Design-time Features
     Designer
     Preset Manager
     Manipulate Gauges
   [Expand]Examples
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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

Manipulate Gauges

This topic describes how you can manipulate a Gauge Control at design time.

Expanded Add/Remove Gauges to/from Gauge Control

When a Gauge Control is added to a web form, the Preset Manager is automatically invoked, allowing you to create gauges from presets. Loading a preset creates a gauge contained in this preset within ASPxGaugeControl. If the preset contains multiple gauges, they will be created in the Gauge Control.

To display multiple gauges within the web form, you can use one of the following approaches.

  • Add multiple ASPxGaugeControl controls to the web form, each of which will display a specific gauge. You benefit from this approach by having the capability to load a preset via the Preset Manager into each GaugeControl.

  • Manually add multiple gauges into a single GaugeControl and then customize their paint styles according to your needs. The Preset Manager doesn't allow a preset to be loaded into a specific gauge. It only allows you to load a preset into a GaugeControl, overriding all existing gauges.

To manually add a gauge into a gauge control, use the control's smart tag on the web form and select Customize Gauge Control... as shown below.

In the invoked Visual Gauge Control Designer, select the gauge you would like to add to the gauge control on the right side of the designer, and click the Add button.

The following image demonstrates the process of adding circular, linear and digital gauges into the gauge control.

To remove a gauge, select it in the Visual Gauge Control Designer, press the Remove button and then OK (see the image above).

Expanded Add/Remove Elements to/from Gauges

If a gauge is created manually, you need to manually add elements (scales, markers, needles, etc.) to it. A gauge, created from a preset, already contains all the elements that are present in the preset. However, it's still possible to add new elements and delete existing ones via the Gauge Designer.

If a gauge is empty, you can add default elements to it by clicking the gauge's smart tag and selecting Add Default Elements in the Visual Gauge Control Designer.

This command adds common elements to a gauge according to the gauge type. For instance, for a circular gauge, a scale, background layer, needle and spindle cap are created.

To manually add any supported element to a gauge, you can use other commands provided by the gauge's smart tag menu.

Note

The main element of circular and linear gauges is a scale. Other elements are aligned relative to scales. So, if there is no scale in a gauge, some commands in the smart tag menu are not accessible.

To remove gauge elements, select them and press Remove in the Visual Gauge Control Designer. Gauge elements can also be removed via the gauge's Designer.

Expanded Resize and Move Gauges

Gauges can be freely resized and moved within the Visual Gauge Control Designer by dragging their borders. This allows you to increase the space between gauges, or set custom sizes for them. Note that manual resizing and movement of gauges disables the auto-layout feature. In an auto-layout mode, gauges are consistently arranged next to each other without overlapping, and they are proportionally resized when GaugeControl is resized. When the auto-layout feature is disabled, gauges keep their sizes when GaugeControl is resized.

See Layout Customization to learn more about the auto-layout feature.

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