Range | Xamarin.Forms | ComponentOne

Range

In This Topic

You can add multiple ranges to a single Gauge. Each range denotes a region or a state which can help the user identify the state of the Gauge's value. Every range has its Min and Max properties that specify the range's position on the Gauge, as well as other properties to define the range's appearance.

The following code examples demonstrate how to add ranges to a Gauge and set their properties in C# and XAML.

In Code

Create new instances of type GaugeRange, set their properties and add the newly created ranges to the LinearGauge (or RadialGauge/BulletGraph).

C#	Copy Code
//Create Ranges GaugeRange low = new GaugeRange(); GaugeRange med = new GaugeRange(); GaugeRange high = new GaugeRange(); //Customize Ranges low.Color = Color.Red; low.Min = 0; low.Max = 40; med.Color = Color.Yellow; med.Min = 40; med.Max = 80; high.Color = Color.Green; high.Min = 80; high.Max = 100; //Add Ranges to Gauge gauge.Ranges.Add(low); gauge.Ranges.Add(med); gauge.Ranges.Add(high);

Copy Code

//Create Ranges
GaugeRange low = new GaugeRange();
GaugeRange med = new GaugeRange();
GaugeRange high = new GaugeRange();

//Customize Ranges
low.Color = Color.Red;
low.Min = 0;
low.Max = 40;
med.Color = Color.Yellow;
med.Min = 40;
med.Max = 80;
high.Color = Color.Green;
high.Min = 80;
high.Max = 100;

//Add Ranges to Gauge
gauge.Ranges.Add(low);
gauge.Ranges.Add(med);
gauge.Ranges.Add(high);

In XAML

Add the markup for ranges between the opening and closing tags of the control to create new ranges and add them to the LinearGauge (or RadialGauge/BulletGraph).

C#	Copy Code
<c1:C1LinearGauge Value="35" Min="0" Max="100" Thickness="0.1"> <c1:C1LinearGauge.Ranges> <c1:GaugeRange Min="0" Max="40" Color="Red"/> <c1:GaugeRange Min="40" Max="80" Color="Yellow"/> <c1:GaugeRange Min="80" Max="100" Color="Green"/> </c1:C1LinearGauge.Ranges> </c1:C1LinearGauge>

Copy Code

<c1:C1LinearGauge Value="35" Min="0" Max="100" Thickness="0.1">
      <c1:C1LinearGauge.Ranges>
        <c1:GaugeRange Min="0" Max="40" Color="Red"/>
        <c1:GaugeRange Min="40" Max="80" Color="Yellow"/>
        <c1:GaugeRange Min="80" Max="100" Color="Green"/>
      </c1:C1LinearGauge.Ranges>
    </c1:C1LinearGauge>