[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
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
   [Expand]Product Information
   [Expand]Getting Started
    [Expand]Gauge Types
    [Expand]Gauge Elements
      Gauge Styles
      Appearance Customization
      Custom Draw
     Data Binding
     Layout Customization
   [Expand]Visual Elements
   [Expand]Design-time Features
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[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.

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