Version

Configuring the Scale (XamRadialGauge)

Purpose

This topic provides a conceptual overview of the XamRadialGauge™ control’s scale. It describes the properties of the scale and also provides an example of how to implement it.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This section gives you an overview of the XamRadialGauge™ control and its main features.

This topic explains using a code example how to add the XamRadialGauge™ control to a Xamarin.Forms application.

In this topic

This topic contains the following sections:

Scale Overview

Scale overview

Used to represent the values of the gauge visually, a scale defines a range of values in the XamRadialGauge control. The tick marks and ranges are all the elements that can be added to a scale.

Preview

The following image is a preview of the XamRadialGauge control with the scale added.

Configuring the Scale1 1 17 1.png

Scale Properties

Scale properties summary

The following table summarizes the properties of the XamRadialGauge control related to the scale.

Property Name Property Type Description

Double

Specifies the starting position of the scale measured from the center of the gauge. The value of this property should be between 0 and 1.

Setting this property to a value greater than the ScaleEndExtent property will result in the start extent defaulting back to the actual ScaleEndExtent value.

Double

Specifies the end position of the scale measured from the center of the gauge. The value of this property should be between 0 and 1.

Setting this property to a value less than the ScaleStartExtent property will result in the end extent defaulting back to the actual ScaleStartExtent value.

Double

Specifies the start angle for the scale in degrees.

Double

Specifies the end angle for the scale in degrees.

Double

Specifies the amount of extra space (in degrees) the scale sweeps, in both directions, beyond the start and end values. This value must be greater than 0. The default value is 3.

Brush

Specifies the brush used to fill the background of the scale.

SweepDirection

Specifies whether the scale sweeps clockwise or counterclockwise.

Circular - Increases the angle at which the ends of the shape is drawn

Fitted - Increase the angle of the outer and inner arc, but increases the angle of the inner arc more in order to keep the connecting lines of the scale shape parallel with where they would have been if the ScaleOversweep property was set to 0.

Auto - The property’s default setting, Auto – automatically determines the backing shape and sets the ScaleOversweep property accordingly.

If this property is set to Circular and the value of the BackingShape property is set to Fitted a visible gap will appear between the scale and the arc of backing shape. To ensure that the scale aligns correctly with the backing area of the gauge, the ScaleOversweep property and the BackingShape property should be set to the same value.

Configuring the Scale

Example

The screenshot below illustrates how the XamRadialGauge renders with its scale properties configured as follows:

Property Value

0.5

0.4

15

Counterclockwise
Configuring the Scale1 2 17 1.png

Following is the code that implements this example.

In XAML:

<ig:XamRadialGauge x:Name="radialGauge"
         ScaleBrush="LightGray"
         ScaleStartExtent="0.5"
         ScaleEndExtent="0.4"
         ScaleOversweep="15"
         ScaleSweepDirection="Counterclockwise"/>

In C#:

var radialGauge = new XamRadialGauge();
radialGauge.ScaleBrush = new SolidColorBrush(Color.LightGray);
radialGauge.ScaleStartExtent = 0.5;
radialGauge.ScaleEndExtent = 0.4;
radialGauge.ScaleOversweep = 15;
radialGauge.ScaleSweepDirection = SweepDirection.Counterclockwise;

In Visual Basic:

Dim radialGauge As XamRadialGauge = New XamRadialGauge
radialGauge.ScaleBrush = New SolidColorBrush(Color.LightGray)
radialGauge.ScaleStartExtent = 0.5
radialGauge.ScaleEndExtent = 0.4
radialGauge.ScaleOversweep = 15
radialGauge.ScaleSweepDirection = SweepDirection.Counterclockwise

Related Content

The following topics provide additional information related to this topic:

Topic Purpose

This topic explains using a code example how to add the XamRadialGauge™ control to a Xamarin.Forms application.

This topic provides a conceptual overview of the XamRadialGauge™ control’s backing feature. It describes the properties of the backing area and provides an example of its implementation.

This topic provides a conceptual overview of labels with the XamRadialGauge™ control. It describes the properties of the labels and also provides an example of how to configure the labels.

This topic provides a conceptual overview of needles with the XamRadialGauge™ control. It describes the properties of the needles and also provides an example of how to configure them.

This topic provides a conceptual overview of the XamRadialGauge™ control’s ranges. It describes the properties of the ranges and provides an example of how to add ranges to the radial gauge.

This topic provides a conceptual overview of tick marks with the XamRadialGauge™ control. It describes the tick marks’ properties and provides an example of how to implement them.