Creating WPF 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 walk you through the creation of a sample application that contains a numeric RadGauge.

• Assembly References
• Defining a Numeric Gauge with a NumericScale
• Defining a Numeric Indicator
• Set Indicator's Position

Assembly References

In order to use the RadGauge control in your projects, you have to add references to the following assemblies:

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

Adding Telerik Assemblies Using NuGet

To use RadGauge when working with NuGet packages, install the Telerik.Windows.Controls.DataVisualization.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Defining a Numeric Gauge with a NumericScale

Unlike the radial and linear scales, the numeric scale doesn't require a special container. However you can use any of the 9 radial gauge and 2 linear gauge controls to wrap the NumericScale control. Additionally, you can put a NumericScale in a Grid container too. 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 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"

Example 1: Creating RadHorizontalLinearGauge with a NumericScale

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

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

Defining a Numeric Indicator

The NumericScale control allows you to display numeric indicators that represent a value on 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.

Example 2: Adding Indicators

<telerik:RadHorizontalLinearGauge Width="200" Height="50"> 
    <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> 

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

Image 1: Result from Example 2

The examples in this article are styled with the Windows8 theme.

Set Indicator's Position

To make the indicator display a certain value on the scale, you have to use the Value property of the indicator.

Example 3: Setting indicator's position

<telerik:RadHorizontalLinearGauge Width="200" Height="50"> 
    <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> 

Image 2: Result from Example 3

Telerik UI for WPF Learning Resources

• Telerik UI for WPF Gauge Component
• Getting Started with Telerik UI for WPF Components
• Telerik UI for WPF Installation
• Telerik UI for WPF and WinForms Integration
• Telerik UI for WPF Visual Studio Templates
• Setting a Theme with Telerik UI for WPF
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement

See Also

• Ranges
• Numeric Indicator
• State Indicator