Edit this page

Numeric Scale

The NumericScale control allows you to display a scale of numeric form. The numeric scales are used for displaying digits. An example for a numerical scale is the digital clock's display.

There is no special container for the numeric scale, as for the radial or linear scales. However you can use any of 9 radial gauge containers as well as RadHorizontalLinearGauge and RadVerticalLinearGauge controls to wrap the NumericScale control. Additionally you can place it in a Grid or another layout control. This topic will explain you the specifics regarding the usage of the NumericScale control.

Here is the list of the NumericScale features:

Max and Min Values

To specify maximum and minimum values for the scale use the Min and Max properties. Here is an example:

XAML

<telerik:NumericScale Min="0" Max="1000">
</telerik:NumericScale>

Multiplier

The Multiplier property of the NumericScale allows you to apply a multiplier to the current value displayed by the scale. Here is an example of a NumericScale which multiplies its value by 10.

XAML

<telerik:NumericScale Min="0"
                      Max="1000"
                      Multiplier="10">
</telerik:NumericScale>

Indicators

The NumericScale typically uses a NumericIndicator control to display its current value. The NumericIndicator is a control that specifies slots for numeric digits. To learn more about it, read the Numeric Indicator topic.

Another indicator that can be used together with the NumericScale control is the StateIndicator.

Here is an example:

XAML

<telerik:RadRadialGauge Width="200" Height="200" telerik:StyleManager.Theme="Windows8">
    <telerik:RadialScale Min="0" Max="100"/>
    <telerik:NumericScale Min="0" Max="1000"
                          Multiplier="10" >
        <telerik:NumericIndicator Value="1" 
                                  telerik:ScaleObject.RelativeX="0.23"
                                  telerik:ScaleObject.RelativeY="0.38">
            <telerik:NumericIndicator.Positions>
                <telerik:FontNumberPosition FontSize="30"/>
                <telerik:FontNumberPosition FontSize="30" />
                <telerik:FontNumberPosition FontSize="30" />
                <telerik:FontNumberPosition FontSize="30" />
                <telerik:FontNumberPosition FontSize="30" />
                <telerik:FontNumberPosition FontSize="30" />
            </telerik:NumericIndicator.Positions>
        </telerik:NumericIndicator>
    </telerik:NumericScale>
</telerik:RadRadialGauge>

Here is a snapshot of the result: