Scales

3 Sep 202024 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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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.

c#

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);