Edit this page

Creating Radial Gauge

One of the gauges you can create with the RadGauge control, is a radial gauge. It is represented by a circle container with a 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 radial gauge and will explain the following:

Defining a RadialGauge

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 radial gauge type is represented by the RadRadialGauge class. The RadRadialGauge control is used for wrapping radial scales. You can place one or more RadialScale objects inside of it. Here is an example of an instance of the RadRadialGauge control with dimensions 300x300.

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 RadialScale

In order to define a scale inside the RadialGauge control you have to use the RadialScale control. The RadialGauge works as an ItemsControl, which takes RadialScale controls as items. This means that you can have more than one scale inside the radial gauge.

To learn more about the usage of the RadialScale control read the Radial Scale topic.

Here is an example of a single RadialScale:

XAML

<telerik:RadRadialGauge x:Name="radialGauge"
                        Width="300"
                        Height="300"
                        telerik:StyleManager.Theme="Windows8">
    <telerik:RadialScale Min="1"
                         Max="12">
    </telerik:RadialScale>
</telerik:RadRadialGauge>

Here is a snapshot of the result.

Defining an Indicator

The RadialScale 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 UIElementCollection. This means that the Indicators property can hold more than one indicator. Here is an example of RadialScale that uses a Needle indicator to mark the current value as well as Pinpoint to mark the center of the Gauge.

XAML

 <telerik:RadRadialGauge x:Name="radialGauge"
                        Width="300"
                        Height="300"
                        telerik:StyleManager.Theme="Windows8">
    <telerik:RadialScale Min="1"
                         Max="12">
        <telerik:RadialScale.Indicators>
            <telerik:Needle />
            <telerik:Pinpoint/>
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

Here is a snapshot of the result.

Set Indicator's Position

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

XAML

<telerik:RadRadialGauge Name="radialGauge"
                    Width="300"
                    Height="300"
                    telerik:StyleManager.Theme="Windows8">
    <telerik:RadialScale Name="scale"
                    Min="1"
                    Max="11">
        <telerik:RadialScale.Indicators>
            <telerik:Needle Name="needle" Value="6" />
            <telerik:Pinpoint />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

Here is a snapshot of the result.

Configuring the Gauge

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