Edit this page

Creating Numeric Gauge

One of the gauges you can create with the RadGauge control, is a numeric gauge. It is represented by a container with a numerical scale in it. The numerical scale uses a numerical indicator to display the desired value. This topic will guide you in creating a trivial numeric gauge and will explain the following:

Defining a Numeric Gauge

In order to use the RadGauge control and its components you have to reference the following assemblies:

  • Telerik.Windows.Controls.DataVisualization.dll
  • Telerik.Windows.Controls.dll

There is no special container for the numeric scale, as for the radial or linear scales. However you can use any of the 9 radial gauge and 2 linear gauge controls to wrap the NumericScale control. Additionally you can put NumericScale to the Grid container too.

To use the RadGauge control and its components in XAML you have to declare the following namespace:
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Defining a NumericScale

In order to define a numerical scale inside the Gauge control you have to use the NumericScale control. The Gauge works as an ItemsControl, which takes NumericScale controls as items. This means that you can have more than one scale inside the gauge.

To learn more about the usage of the NumericScale control read the Numeric Scale topic.

Here is an example of a single NumericScale:

<telerik:RadHorizontalLinearGauge Width="200" Height="50" telerik:StyleManager.Theme="Windows8">
    <telerik:NumericScale Min="0" Max="999">
    </telerik:NumericScale>
</telerik:RadHorizontalLinearGauge>

Defining a Numeric Indicator

The NumericScale control allows you to display numeric indicators that represent a value off the scale. To specify an indicator use the Indicators property, which is of type ItemCollection. This means that the Indicators property can hold more than one indicator. Here is an example.

To learn more about the usage of the NumericIndicator control, read the Numeric Indicator topic.

<telerik:RadHorizontalLinearGauge Width="200" Height="50" telerik:StyleManager.Theme="Windows8">
    <telerik:NumericScale Min="0" Max="999">
        <telerik:NumericScale.Indicators>
            <telerik:NumericIndicator telerik:ScaleObject.RelativeX="0.05"
                                telerik:ScaleObject.RelativeY="0.05"
                                telerik:ScaleObject.RelativeHeight="0.9*"
                                telerik:ScaleObject.RelativeWidth="0.9*"
                                FontSize="30">
                <telerik:NumericIndicator.Positions>
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                </telerik:NumericIndicator.Positions>
            </telerik:NumericIndicator>
        </telerik:NumericScale.Indicators>
    </telerik:NumericScale>
</telerik:RadHorizontalLinearGauge>

Here is a snapshot of the result:

Set Indicator's Position

To make the indicator display a certain value off the scale, you have to use the Value property of the indicator. Here is an example.

<telerik:RadHorizontalLinearGauge Width="200" Height="50" telerik:StyleManager.Theme="Windows8">
    <telerik:NumericScale Min="0" Max="999">
        <telerik:NumericScale.Indicators>
            <telerik:NumericIndicator telerik:ScaleObject.RelativeX="0.05"
                                telerik:ScaleObject.RelativeY="0.05"
                                telerik:ScaleObject.RelativeHeight="0.9*"
                                telerik:ScaleObject.RelativeWidth="0.9*"
                                FontSize="30"
                                Value="100">
                <telerik:NumericIndicator.Positions>
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                    <telerik:FontNumberPosition Background="#FFD6D4D4" />
                </telerik:NumericIndicator.Positions>
            </telerik:NumericIndicator>
        </telerik:NumericScale.Indicators>
    </telerik:NumericScale>
</telerik:RadHorizontalLinearGauge>

Here is a snapshot of the result.

Configuring the Gauge

To configure and setup the numeric gauge you can use the various properties of the elements inside of it. In order to get familiar with them read the following topics: