Edit this page

Creating 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 off the scale. This topic will guide you in creating a trivial linear gauge and will explain the following:

Defining a Linear 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

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. Here is an example of an instance of the LinearGauge control with dimensions 100x300.

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 LinearScale

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 learn more about the usage of the LinearScale control read the Linear Scale topic.

Here is an example of a single LinearScale:

<telerik:RadVerticalLinearGauge Width="100" Height="200" telerik:StyleManager.Theme="Windows8">
    <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>

Here is a snapshot of the result:

Defining an Indicator

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

<telerik:RadVerticalLinearGauge Width="100" Height="200" telerik:StyleManager.Theme="Windows8">
    <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>

Here is a snapshot of the result.

Set Indicator's Position

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

<telerik:RadVerticalLinearGauge Width="100" Height="200" telerik:StyleManager.Theme="Windows8">
    <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>

Here is a snapshot of the result.

Configuring the Gauge

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