Scales
3 Sep 2020 / 24 minutes to read
Scales is a collection of SFLinearScale, which integrates labels, tick marks, ranges, and pointers to customize the basic look and feel of the SFLinearGauge.
Linear scale
SFLinearScale contains sub elements such as ticks, labels, Ranges, and Pointers.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 3;
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting minimum and maximum values for scale
To change minimum and maximum values of linear scale, use the Minimum and Maximum properties as shown in the following code snippet.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 3;
linearScale.Minimum = 20;
linearScale.Maximum = 200;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting interval for scale
The Interval property allows you to set the intervals for scale. The default Interval property of scale is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 3;
linearScale.Minimum = 0;
linearScale.Maximum = 500;
linearScale.Interval = 100;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting maximum labels
The MaximumLabels property defines the count of the scale labels in the 100 pixels. By default, the maximum labels for 100 pixels is 3.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 3;
linearScale.MinorTicksPerInterval = 1;
linearScale.MaximumLabels = 4;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Scale customization
You can customize the color, length, size, and position of the SFLinearScale by using the ScaleBarColor, ScaleBarLength, ScaleBarSize, and Offset properties, respectively.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 3;
linearScale.LabelOffset = -5;
linearScale.Offset = 10;
linearScale.ScaleBarLength = 300;
linearScale.ScaleBarSize = 5;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting opposite position
To place the scale at opposite to its original position, set the OpposedPosition property to true in the scale.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 1;
linearScale.OpposedPosition = true;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting scale direction
You can set the scale position to its forward and backward using the ScalePosition property.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 1;
linearScale.ScalePosition = SFLinearGaugeScalePosition.SFLinearGaugeScalePositionBackward;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Setting corner radius type for scale
Corners of the SFLinearScale can be customized by setting the value to the CornerRadiusType property. All corners of linear scale can be customized using the Start, End, Both, and None options.
CornerRadius property used to reduce the radius of the corners.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.CornerRadiusType = CornerRadiusType.Start;
linearScale.CornerRadius = 10;
linearGauge.Scales.Add(linearScale);
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Multiple scales
It helps you to add multiple scales to the same linear gauge and customize all the scales in a Scales collection.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.Orientation = SFLinearGaugeOrientation.SFLinearGaugeOrientationVertical;
linearGauge.BackgroundColor = UIColor.White;
SFLinearScale linearScale = new SFLinearScale();
linearScale.ScaleBarLength = 500;
linearScale.Minimum = 0;
linearScale.Interval = 10;
linearScale.Maximum = 100;
linearScale.Offset = 9;
linearScale.ScaleBarColor = UIColor.Gray;
linearScale.ScaleBarSize = 5;
linearScale.MajorTickSettings.Color = UIColor.Gray;
linearScale.MinorTickSettings.Color = UIColor.Gray;
linearScale.MajorTickSettings.Thickness = 1;
linearScale.LabelColor = UIColor.Gray;
linearScale.MinorTicksPerInterval = 1;
linearScale.LabelPostfix =(Foundation.NSString) "°F";
linearScale.LabelOffset = -6;
linearScale.ScalePosition = SFLinearGaugeScalePosition.SFLinearGaugeScalePositionBackward;
linearGauge.Scales.Add(linearScale);
SFLinearScale scale = new SFLinearScale();
scale.Minimum = 0;
scale.ScaleBarLength = 500;
scale.Interval = 10;
scale.Maximum = 100;
scale.ShowTicks = false;
scale.ShowScaleLabel = false;
scale.ScaleBarSize = 5;
scale.ScaleBarColor = UIColor.FromRGB(255,255,255);
scale.CornerRadiusType = CornerRadiusType.Both;
scale.MajorTickSettings.Color = UIColor.Black;
scale.MinorTickSettings.Color = UIColor.Black;
scale.LabelColor = UIColor.Black;
scale.ScalePosition = SFLinearGaugeScalePosition.SFLinearGaugeScalePositionBackward;
SFBarPointer barPointer = new SFBarPointer();
barPointer.Value = 45;
barPointer.Thickness = 7;
barPointer.CornerRadiusType = CornerRadiusType.End;
barPointer.CornerRadius = 3;
barPointer.Color = UIColor.FromRGB(249, 92, 133);
scale.Pointers.Add(barPointer);
linearGauge.Scales.Add(scale);
SFLinearScale linearScale1 = new SFLinearScale();
linearScale1.Minimum = 0;
linearScale1.ScaleBarLength = 500;
linearScale1.MinorTicksPerInterval = 1;
linearScale1.Maximum = 38;
linearScale1.Interval = 2;
linearScale1.ScaleBarColor = UIColor.Gray;
linearScale1.ScaleBarSize = 5;
linearScale1.MajorTickSettings.Color = UIColor.Gray;
linearScale1.MinorTickSettings.Color = UIColor.Gray;
linearScale1.LabelColor = UIColor.Gray;
linearScale1.OpposedPosition = true;
linearScale1.Offset = -9;
linearScale1.MajorTickSettings.Thickness = 1;
linearScale1.LabelOffset = -5;
linearScale1.ScalePosition = SFLinearGaugeScalePosition.SFLinearGaugeScalePositionBackward;
linearScale1.LabelPostfix = (Foundation.NSString)"°C";
linearGauge.Scales.Add(linearScale1);
this.View.AddSubview(linearGauge);
Setting gradient color for scale
You can give smooth color transition to scale to specifying the different colors based on scale value by using GradientStops property.
SFLinearGauge linearGauge = new SFLinearGauge();
linearGauge.BackgroundColor = UIColor.White;
linearGauge.Header = new SFLinearLabel();
SFLinearScale linearScale = new SFLinearScale();
GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
gaugeGradientStop.Value = 10;
gaugeGradientStop.Color = UIColor.FromRGB(81, 201, 225);
linearScale.GradientStops.Add(gaugeGradientStop);
GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
gaugeGradientStop1.Value = 40;
gaugeGradientStop1.Color = UIColor.FromRGB(147, 233, 225);
linearScale.GradientStops.Add(gaugeGradientStop1);
GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop();
gaugeGradientStop2.Value = 50;
gaugeGradientStop2.Color = UIColor.FromRGB(197, 230, 146);
linearScale.GradientStops.Add(gaugeGradientStop2);
GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop();
gaugeGradientStop3.Value = 60;
gaugeGradientStop3.Color = UIColor.FromRGB(254, 221, 43);
linearScale.GradientStops.Add(gaugeGradientStop3);
GaugeGradientStop gaugeGradientStop4 = new GaugeGradientStop();
gaugeGradientStop4.Value = 100;
gaugeGradientStop4.Color = UIColor.FromRGB(232, 120, 19);
linearScale.GradientStops.Add(gaugeGradientStop4);
linearScale.ScaleBarSize = 15;
linearScale.MajorTickSettings.Color = UIColor.Black;
linearScale.MinorTickSettings.Color = UIColor.Black;
linearScale.MajorTickSettings.Length = 12;
linearScale.MinorTickSettings.Length = 5;
linearScale.MinorTicksPerInterval = 1;
linearScale.LabelColor = UIColor.Black;
linearGauge.Scales.Add(linearScale);
this.View.AddSubview(linearGauge);
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page