Telerik UI for Windows Phone by Progress

Note

In order to compose a gauge control users need to add references to the following assemblies:

  • Telerik.Windows.Controls.Primitives.dll
  • Telerik.Windows.Controls.DataVisualization.dll

After the references to the dlls are added the XAML namespace has to be declared. It can look like this:

CopyXAML
xmlns:gauges="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"

    Creating a radial gauge

The radial gauge type is represented by the RadialGaugeRange class. Below is an example of a radial gauge. It consists of a scale (ticks and labels) and a few indicators. One of the indicators is a segmented radial indicator which is a part of the scale itself. It has three segments, gray - from 0 to 80, green - from 80 to 110 and red from 110 to 160. There are also two radial bar indicators overlapping each other, one green and one white with the white being on top of the green. Finally there are four marker indicators. These are the gray asterisk at around 140, the two cyan circles at 110 and 160 and the green label at 110. Here is a screenshot of what this looks like:

Gauge-Getting Started-01

CopyXAML
<gauges:RadialGaugeRange MinAngle="-45"
                         MaxAngle="225"
                         MaxValue="180"
                         LabelStep="10"
                         TickStep="10"
                         LabelRadiusScale="1.03"
                         TickRadiusScale="0.85">
</gauges:RadialGaugeRange>

    Creating a linear gauge

The linear gauge type is represented by the LinearGaugeRange class. Here is an example of a linear gauge that has minor, middle and major ticks as well as a marker indicator

at the 35 value:

Gauge-Getting Started-02

CopyXAML
<gauges:LinearGaugeRange MaxValue="40"
                         LabelStep="10"
                         TickStep="2"
                         LabelOffset="1.1">
</gauges:LinearGaugeRange>