Gauge Styles

  • 2 minutes to read

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.

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.

Appearance_BackgroundShapes

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.

LinearGaugePresets

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

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.

ASPxGauges - Run Style Manager

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

Change Style

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

StyleChooser

The Web panel should then look like the following.

New Style

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.

ChangeBackgroundStyle

See the Designer topic to learn more.