Creating Silverlight 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

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

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

RadVerticalLinearGauge with a VerticalLinearScale

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

RadVerticalLinearGauge with Indicator

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

RadVerticalLinearGauge with Indicator position

See Also

In this article