Creating WPF Linear Gauge

One of the gauges you can create with the RadGauge control, is a linear gauge. It is represented by a rectangular container with a linear scale in it. Additionally, it can display various indicators that point to a certain value on the scale. This topic will walk you through the creation of a sample application that contains a linear RadGauge.

• Assembly References
• Defining a Linear Gauge with a Linear Scale
• Defining an 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 Linear Gauge with a Linear Scale

The linear gauge type is represented by the HorizontalLinearGauge or VerticalLinearGauge class. You can use either of them to have vertical or horizontal orientated gauges. The linear gauge control is used for wrapping linear scales. You can place one or more LinearScale objects inside of it. In order to define a scale inside the LinearGauge control, you have to use the LinearScale control. The LinearGauge works as an ItemsControl, which takes LinearScale controls as items. This means that you can have more than one scale inside the linear 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 RadVerticalLinearGauge with a VerticalLinearScale

<telerik:RadVerticalLinearGauge Width="100" Height="200"> 
    <telerik:VerticalLinearScale Min="0"  
                    Max="20" 
                    RelativeHeight="1" 
                    RelativeY="0" 
                    MiddleTickRelativeWidth="0.05*" 
                    MiddleTickRelativeHeight="0.003*" 
                    MinorTickRelativeHeight="0.003*" 
                    MajorTickRelativeHeight="0.003*"> 
    </telerik:VerticalLinearScale> 
</telerik:RadVerticalLinearGauge> 

To learn more about the usage of the LinearScale control, read the Linear Scale topic.

Image 1: Result from Example 1

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

Defining an Indicator

The LinearScale control allows you to display different types of indicators that point to 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 shows how you can define a LinearScale that uses a Marker indicator to mark the current value.

Example 2: Adding Indicators

<telerik:RadVerticalLinearGauge Width="100" Height="200"> 
    <telerik:VerticalLinearScale Min="0"  
                         Max="20" 
                         RelativeHeight="1" 
                         RelativeY="0" 
                         MiddleTickRelativeWidth="0.05*" 
                         MiddleTickRelativeHeight="0.003*" 
                         MinorTickRelativeHeight="0.003*" 
                         MajorTickRelativeHeight="0.003*"> 
        <telerik:VerticalLinearScale.Indicators> 
            <telerik:Marker telerik:LinearScale.RotateForVertical="True" 
                            telerik:ScaleObject.RelativeWidth="0.08*" 
                            telerik:ScaleObject.RelativeHeight="0.03*"  
                            telerik:ScaleObject.Location="OverCenter" /> 
        </telerik:VerticalLinearScale.Indicators> 
    </telerik:VerticalLinearScale> 
</telerik:RadVerticalLinearGauge> 

Image 2: Result from Example 2

Set Indicator's Position

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

Example 3: Setting indicator's position

<telerik:RadVerticalLinearGauge Width="100" Height="200"> 
    <telerik:VerticalLinearScale Min="0"  
                         Max="20" 
                         RelativeHeight="1" 
                         RelativeY="0" 
                         MiddleTickRelativeWidth="0.05*" 
                         MiddleTickRelativeHeight="0.003*" 
                         MinorTickRelativeHeight="0.003*" 
                         MajorTickRelativeHeight="0.003*"> 
        <telerik:VerticalLinearScale.Indicators> 
            <telerik:Marker Value="5" 
                            telerik:LinearScale.RotateForVertical="True" 
                            telerik:ScaleObject.RelativeWidth="0.08*" 
                            telerik:ScaleObject.RelativeHeight="0.03*"  
                            telerik:ScaleObject.Location="OverCenter" /> 
        </telerik:VerticalLinearScale.Indicators> 
    </telerik:VerticalLinearScale> 
</telerik:RadVerticalLinearGauge> 

Image 3: 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
• Indicators
• Ticks
• Labels