Numeric Indicator

The Numeric Indicator is used for displaying numeric values as digits. It does not inherit the IndicatorBase class as the other indicators do, but provides functionality similar to theirs. Here is a list of the features of the Numeric Indicator:

As appearance it is similar to the display of the digital clock. It can be used with any of the scales provided by the gauge control.

Number Positions

By default the Numeric Indicator won't display its values. You have to define the number positions to display the value's digits. This can be done by adding a number position objects to the Positions collection of the NumericIndicator. You can use the following types of number position:

  • SevenSegsNumberPosition - the digit get displayed via 7 rectangular segments.

  • HexagonalNumberPosition - the digit get displayed via 7 hexagonal segments.

  • FontNumberPosition - the digit is displayed as characters. In this case the values of the various font properties, like FontFamily, FontSize, FontWeight etc., get applied. The font properties can be set to the indicator itself. In this case they will get applied to all of the FontNumberPosition controls in it. You can apply it directly to the FontNumberPosition control as well, in order to have different appearance for each position. The number position objects derive from the ContentControl and expose one additional property:

    • CornerRadius - specifies the radius of the corners of the control. Also you can use the ScaleObject.RelativeWidth to specify the width of the control relatively to the scale which contains the numeric indicator.

Using the BorderBrush and the BorderThickness properties of the NumberPosition control you can outline the positions.

For example, if you want to display three digit number with two additional fractional digits, you have to define six number positions. Note that one of the position will be used by the decimal point.

<Grid x:Name="LayoutRoot" Width="150" Height="50"> 
    <telerik:NumericScale Min="0" Max="999" telerik:StyleManager.Theme="Windows8"> 
        <telerik:NumericScale.Indicators> 
            <telerik:NumericIndicator Value="217.39" 
                                      telerik:ScaleObject.RelativeY="0.05" 
                                      telerik:ScaleObject.RelativeX="0.025" 
                                      telerik:ScaleObject.RelativeWidth="0.95" 
                                      telerik:ScaleObject.RelativeHeight="0.9" 
                                      FontSize="28" 
                                      BorderThickness="0"> 
                <telerik:NumericIndicator.Positions> 
                    <telerik:FontNumberPosition CornerRadius="10,0,0,10" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="2,2,1,2" 
                                                Padding="0"/> 
                    <telerik:FontNumberPosition CornerRadius="0" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="1,2" 
                                                Padding="0"/> 
                    <telerik:FontNumberPosition CornerRadius="0" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="1,2" 
                                                Padding="0"/> 
                    <telerik:FontNumberPosition CornerRadius="0" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="1,2" 
                                                Padding="0"/> 
                    <telerik:FontNumberPosition CornerRadius="0" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="1,2" 
                                                Padding="0"/> 
                    <telerik:FontNumberPosition CornerRadius="0,10,10,0" 
                                                Background="Transparent" 
                                                BorderBrush="Orange" 
                                                BorderThickness="1,2,2,2" 
                                                Padding="0"/> 
                </telerik:NumericIndicator.Positions> 
            </telerik:NumericIndicator> 
        </telerik:NumericScale.Indicators> 
    </telerik:NumericScale> 
</Grid> 

Here is a snapshot of the result:

Silverlight RadGauge Numeric Scale

Size

To manipulate the indicator's size, simply use the ScaleObject.RelativeHeight and ScaleObject.RelativeWidth attachable properties. As the names suggest, their value are relative to the cell size of the scale. The cell size of the scale is determined by the size of the container it is placed in. For the radial scales it is equal to the radius of the container. However, when placed inside a LinearScale or inside a NumericScale, then the ScaleObject.RelativeHeight value is relative to the height and the ScaleObject.RelativeWidth to the width of the scale's container.

To learn more about the cell size term, read the Relative Measurements topic.

Here is an example:

<Grid Background="#EEEEEE" Width="150" Height="50"> 
    <telerik:NumericScale Min="0" Max="999" telerik:StyleManager.Theme="Windows8"> 
        <telerik:NumericScale.Indicators> 
            <telerik:NumericIndicator Value="217.39" 
                                      telerik:ScaleObject.RelativeY="0.05" 
                                      telerik:ScaleObject.RelativeX="0.025" 
                                      telerik:ScaleObject.RelativeWidth="0.5" 
                                      telerik:ScaleObject.RelativeHeight="0.5"> 
                <telerik:NumericIndicator.Positions> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                    Background="Transparent"/> 
                </telerik:NumericIndicator.Positions> 
            </telerik:NumericIndicator> 
        </telerik:NumericScale.Indicators> 
    </telerik:NumericScale> 
</Grid> 

Here is a snapshot of the result:

Silverlight RadGauge Numeric Indicator Custom Size

Placement

The ScaleObject.RelativeX and ScaleObject.RelativeY attachable properties allow you to position the NumericIndicator towards the scale's container. The values of these two properties are relative to the height and respectively to the width of the scale's container.

Here is an example:

<Grid Background="#EEEEEE" Width="150" Height="50"> 
    <telerik:NumericScale Min="0" Max="999" telerik:StyleManager.Theme="Windows8"> 
        <telerik:NumericScale.Indicators> 
            <telerik:NumericIndicator Value="217.39" 
                                      telerik:ScaleObject.RelativeY="0.45" 
                                      telerik:ScaleObject.RelativeX="0.48" 
                                      telerik:ScaleObject.RelativeWidth="0.5" 
                                      telerik:ScaleObject.RelativeHeight="0.5"> 
                <telerik:NumericIndicator.Positions> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" Background="Transparent"/> 
                </telerik:NumericIndicator.Positions> 
            </telerik:NumericIndicator> 
        </telerik:NumericScale.Indicators> 
    </telerik:NumericScale> 
</Grid> 

Here is a snapshot of the result:

Silverlight RadGauge Numeric Indicator Custom Placement

Corner Radius

The CornerRadius property allows you to specify the radius of the indicator's corners. Here is an example:

<Grid x:Name="LayoutRoot" Width="150" Height="50"> 
    <telerik:NumericScale Min="0" Max="999" telerik:StyleManager.Theme="Windows8"> 
        <telerik:NumericScale.Indicators> 
            <telerik:NumericIndicator Value="217.39" 
                                      CornerRadius="10" 
                                      telerik:ScaleObject.RelativeY="0.45" 
                                      telerik:ScaleObject.RelativeX="0.48" 
                                      telerik:ScaleObject.RelativeWidth="0.5" 
                                      telerik:ScaleObject.RelativeHeight="0.5"> 
                <telerik:NumericIndicator.Background> 
                    <SolidColorBrush Color="#EEEEEE"/> 
                </telerik:NumericIndicator.Background> 
                <telerik:NumericIndicator.Positions> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" FontSize="15" 
                                                                    Background="Transparent"/> 
                </telerik:NumericIndicator.Positions> 
            </telerik:NumericIndicator> 
        </telerik:NumericScale.Indicators> 
    </telerik:NumericScale> 
</Grid> 

Here is a snapshot of the result:

Silverlight RadGauge Numeric Indicator Corner Radius

Display Value Format

The Format property allows you to specify a format string for the indicator's value. When formatting you might have to add or remove some number positions.

Defining format strings in XAML can be done in the following way - {}:{0:__your format string__}. To learn more about formatting visit the Formatting Overview chapter in MSDN.

Here is an example:

<Grid Background="#EEEEEE" Width="175" Height="60"> 
    <telerik:NumericScale Min="0" Max="999" telerik:StyleManager.Theme="Windows8"> 
        <telerik:NumericScale.Indicators> 
            <telerik:NumericIndicator Value="217.39" 
                                      Format="{}{0:F0}" 
                                      telerik:ScaleObject.RelativeY="0.025" 
                                      telerik:ScaleObject.RelativeX="0.05" 
                                      telerik:ScaleObject.RelativeWidth="0.9" 
                                      telerik:ScaleObject.RelativeHeight="0.9" 
                                      FontSize="28"> 
                <telerik:NumericIndicator.Positions> 
                    <telerik:FontNumberPosition CornerRadius="0" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" Background="Transparent"/> 
                    <telerik:FontNumberPosition CornerRadius="0" Background="Transparent"/> 
                </telerik:NumericIndicator.Positions> 
            </telerik:NumericIndicator> 
        </telerik:NumericScale.Indicators> 
    </telerik:NumericScale> 
</Grid> 

Here is a snapshot of the result:

Silverlight RadGauge Numeric Indicator Display Value Format

Value

The indicators have a Value property, which speicifies the value off the scale they should point to. You can set this property to a desired value, whenever you need to reposition the indicator.

In this article