Configuring Ranges (XamRadialGauge)

Purpose

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.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
XamRadialGauge	This section gives you an overview of the XamRadialGauge™ control and its main features.
Adding XamRadialGauge	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:

Ranges Overview
Preview
Range Properties
Configuring the Range
Related Content

Ranges Overview

Ranges overview

A range highlights a set of continuous values bound by a specified minimum and maximum value on a gauge scale. You can add multiple ranges to a scale, specifying different brushes, along with starting and ending values. To add a range to the XamRadialGauge control, create a RadialGaugeRange object and add it to the Ranges collection.

Preview

The following image is a preview of the XamRadialGauge control with the three ranges added to it (0-3; 3-7 and 7-10).

Range Properties

Range properties summary

The following table summarizes the properties of the RadialGaugeRange.

Property Name	Property Type	Description
Brush	`Brush`	The color assigned to the range
StartValue	`Double`	The starting value at which to begin the range
EndValue	`Double`	The ending value at which to end the range
InnerStartExtent	`Double`	The distance from the center of the gauge (typically from 0 to 1) at which to start rendering the inner sweep of the range. Use values further from 0 than 1 to make the range extend beyond the normal radius of the gauge.
InnerEndExtent	`Double`	The distance from the center of the gauge (typically from 0 to 1) at which to end rendering the inner sweep of the range. Use values further from 0 than 1 to make the range extend further than the normal radius of the gauge.
OuterStartExtent	`Double`	The distance from the center of the gauge (from 0 to 1) at which to start rendering the outer sweep of the range. Use values further from 0 than 1 to make this extend further than the normal radius of the gauge.
OuterEndExtent	`Double`	The distance from the center of the gauge (from 0 to 1) at which to end rendering the outer sweep of the range. Use values further from 0 than 1 to make this extend further than the normal radius of the gauge.

Configuring the Range

Example

The following screenshot demonstrates how the XamRadialGauge control renders using this RadialGaugeRange configuration:

Property	Value
Brush	Blue
StartValue	0
EndValue	20
OuterStartExtent	0.5
OuterEndExtent	0.4

Following is the code that implements this example

In XAML:

<ig:XamRadialGauge x:Name="radialGauge" >
   <ig:XamRadialGauge.Ranges>
      <ig:RadialGaugeRange
         Brush="Blue"
         StartValue="0"
         EndValue="20"
         OuterStartExtent=".5"
         OuterEndExtent=".4"/>
   </ig:XamRadialGauge.Ranges>
</ig:XamRadialGauge>

In C#:

var radialGauge = new XamRadialGauge();

var range1 = new RadialGaugeRange
range1.Brush = new SolidColorBrush(Colors.Blue);
range1.StartValue = 0;
range1.EndValue = 20;
range1.OuterStartExtent = 0.5;
range1.OuterEndExtent = 0.4;
radialGauge.Ranges.Add(range1);

Related Content

The following topics provide additional information related to this topic:

Topic	Purpose
Adding XamRadialGauge	This topic explains using a code example how to add the XamRadialGauge™ control to a Xamarin.Forms application.
Configuring the Background (XamRadialGauge)	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.
Configuring Labels (XamRadialGauge)	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.
Configuring Needles (XamRadialGauge)	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.
Configuring the Scale (XamRadialGauge)	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.
Configuring the Tick Marks (XamRadialGauge)	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.

Xamarin | Help Topics