New to Telerik UI for Xamarin? Download free 30-day trial

Gauges for Xamarin.iOS: Scales

TKGauge component TKGaugeScale provides two types of visual representation:

Radial

TKGaugeRadialScale scale1 = new TKGaugeRadialScale ();
scale1.Range = new TKRange (new NSNumber(34), new NSNumber(40));
scale1.Ticks.Position = TKGaugeTicksPosition.Inner;
this.radialGauge.AddScale(scale1);
  • Blue Segment
TKGaugeSegment blueSegment = new TKGaugeSegment ();
blueSegment.Range = new TKRange (new NSNumber(34), new NSNumber(36));
blueSegment.Location = 0.70f;
blueSegment.Width = 0.08f;
scale1.AddSegment(blueSegment);
  • Red Segment
TKGaugeSegment redSegment = new TKGaugeSegment();
redSegment.Range = new TKRange (new NSNumber(36.05), new NSNumber(40));
redSegment.Location = 0.70f;
redSegment.Width = 0.08f;
redSegment.Fill = new TKSolidFill(UIColor.Red);
scale1.AddSegment(redSegment);
  • Additional customizations for ticks and label:
TKGaugeRadialScale scale2 = new TKGaugeRadialScale ();
scale2.Range = new TKRange (new NSNumber(93.2), new NSNumber(104));
scale2.Ticks.Position = TKGaugeTicksPosition.Outer;
scale2.Ticks.MajorTicksCount = 6;
scale2.Ticks.MinorTicksCount = 20;
scale2.Labels.Offset = 0.15f;
scale2.Labels.Position = TKGaugeLabelsPosition.Outer;
scale2.Labels.LabelFormat = "%.01f";
scale2.Labels.Count = 6;
this.radialGauge.AddScale(scale2);

for(int i = 0; i< this.radialGauge.Scales.Length; i++) {
    TKGaugeRadialScale scale = this.radialGauge.Scales[i] as TKGaugeRadialScale;
    scale.Stroke = new TKStroke(UIColor.Gray, 2);
    scale.Ticks.MajorTicksStroke = new TKStroke(UIColor.Gray, 1);
    scale.Labels.Color = UIColor.Gray;
    scale.Ticks.Offset = 0;
    scale.Radius = i*0.12f + 0.60f;
}

Linear

TKGaugeLinearScale scale1 = new TKGaugeLinearScale ();
scale1.Range = new TKRange (new NSNumber(34), new NSNumber(40));
scale1.Ticks.Position = TKGaugeTicksPosition.Inner;
this.linearGauge.AddScale(scale1);

The scales appereance can be easily customized by adding different segments to it.

  • Red Segment
TKGaugeSegment blueSegment = new TKGaugeSegment ();
blueSegment.Range = new TKRange (new NSNumber(34), new NSNumber(36));
blueSegment.Location = 0.62f;
blueSegment.Width = 0.08f;
blueSegment.Width2 = 0.08f;
scale1.AddSegment(blueSegment);
  • Blue Segment
TKGaugeSegment redSegment = new TKGaugeSegment();
redSegment.Range = new TKRange (new NSNumber(36.05), new NSNumber(40));
redSegment.Location = 0.62f;
redSegment.Width = 0.08f;
redSegment.Width2 = 0.08f;
redSegment.Fill = new TKSolidFill(UIColor.Red);
scale1.AddSegment(redSegment);

TKGauge also allows applying multiple scales on a single gauge.

TKGaugeScale has various properties for customizing its ticks and labels.

So, let's add a second scale and customize both:

TKGaugeLinearScale scale2 = new TKGaugeLinearScale ();
scale2.Range = new TKRange (new NSNumber(93.2), new NSNumber(104));
scale2.Ticks.Position = TKGaugeTicksPosition.Outer;
scale2.Ticks.MajorTicksCount = 6;
scale2.Ticks.MinorTicksCount = 20;
scale2.Labels.Position = TKGaugeLabelsPosition.Outer;
scale2.Labels.LabelFormat = "%.01f";
scale2.Labels.Count = 6;
this.linearGauge.AddScale(scale2);

for(int i = 0; i< this.linearGauge.Scales.Length; i++) {

    TKGaugeLinearScale scale = this.linearGauge.Scales[i] as TKGaugeLinearScale;
    scale.Stroke = new TKStroke(UIColor.Gray, 2);
    scale.Ticks.MajorTicksStroke = new TKStroke(UIColor.Gray, 1);
    scale.Labels.Color = UIColor.Gray;
    scale.Ticks.Offset = 0;
    scale.Offset = i*0.12f + 0.60f;
}

Example

Sample Gauges Scale example with Linear and Radial Gauge can be found in our Native Xamarin.iOS examples.

In this article