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
   [Collapse]Concepts
    [Expand]Gauge Types
    [Expand]Gauge Elements
    [Collapse]Appearance
      Gauge Styles
      Appearance Customization
      Custom Draw
     Data Binding
     Layout Customization
   [Expand]Visual Elements
   [Expand]Design-time Features
   [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

Gauge Styles

A Gauge control ships with numerous styles that can be applied to most gauge elements (scales, needles, background and effect layers, level bars, etc.).

This document gives the definition of a gauge style, lists its existing types, as well as explains how you can assign style to a gauge element at design time.

Expanded Built-In Styles

Gauge styles are predefined images that are stored internally in a vector format, so they can be easily zoomed or stretched without loss in quality. The gauge styles define the size, proportions and appearance settings of the elements.

For example, the image below shows some styles that you can use to paint the background of circular gauges.

The alternative way to change gauge appearance is to use ready-to-use gauge presets with applied styles.

You can see a full list of gauge presets in the Preset Manager shown below.

For more information on how to use this manager, see the Preset Manager topic.

Expanded Style Change

A gauge control provides a Style Chooser that is used to quickly change gauge appearance.

To access this editor, you need to run style manager.

To do this, locate the gauge's smart tag and select Run Style Manager... as shown below.

Then, select the Gauges Style tab and click the Change Style... button.

In the invoked Style Chooser, select the required preset (e.g., Disco) and click OK.

The Web panel should then look like the following.

In some cases, you may need to change the style of a particular gauge element. This can be done by changing the ShapeType property of the required element.

The following image shows style changes of the background layer element via its designer.

See the Designer topic to learn more.

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