Scales

18 Nov 2018 / 12 minutes to read

CircularScales contain a collection of SFCircularScale elements, which integrates labels, tick marks, and a rim to customize the basic look and feel of the circular gauge.

Scale

SFCircularScale contains the sub elements such as rim, ticks, labels, ranges, and pointers. It defines the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. It will have multiple ranges.

A range is a visual element, which begins and ends at specified values within a SFCircularScale. It will have one or more pointers to point out the values in scale.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting start and end values for scale

The StartValue and EndValue properties allow you to set the start and end values for scale.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = -30;
            scale.EndValue = 50;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting start and sweep angles for scale

The StartAngle and SweepAngle properties allow you to set the start and end angles for scale.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scale.StartAngle = 125;
            scale.SweepAngle = 350;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting interval for scale

The Interval property allows you to set the interval for scale.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 500;
            scale.Interval = 100;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting auto interval for scale

By default, the interval value is calculated by 10. By using the EnableAutoInterval property, you can set auto interval based on the start and end values.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 500;
            scale.EnableAutoInterval = true;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting scale direction for scale

The Direction property allows you to render the gauge scale in either clockwise or counterclockwise direction.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scale.Direction = SFCircularScaleDirection.AntiClockwise;
            scales.Add(scale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);

Setting multiple scales for scale

It helps you to add multiple scales to the same circular gauge. You can customize all the scales in a Scales collection.

c#

SFCircularGauge circularGauge = new SFCircularGauge();
            ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
            SFCircularScale scale = new SFCircularScale();
            scale.StartValue = 0;
            scale.EndValue = 240;
            scale.Interval = 20;
            scale.MinorTicksPerInterval = 1;
            scale.RimColor = UIColor.FromRGB(198, 46, 10);
            scale.LabelOffset = 0.88f;
            scale.LabelColor = UIColor.FromRGB(198, 46, 10);
            scale.ScaleStartOffset = 0.7f;
            scale.ScaleEndOffSet = 0.69f;

            SFTickSettings majorTicks = new SFTickSettings();
            majorTicks.StartOffset = 0.7f;
            majorTicks.EndOffset = 0.77f;
            majorTicks.Width = 2;
            majorTicks.Color = UIColor.FromRGB(198, 46, 10);
            scale.MajorTickSettings = majorTicks;

            SFTickSettings minorTicks = new SFTickSettings();
            minorTicks.StartOffset = 0.7f;
            minorTicks.EndOffset = 0.75f;
            minorTicks.Width = 2;
            minorTicks.Color = UIColor.FromRGB(198, 46, 10);
            scale.MinorTickSettings = minorTicks;
            scales.Add(scale);

            SFCircularScale circularScale = new SFCircularScale();
            circularScale.StartValue = 0;
            circularScale.EndValue = 160;
            circularScale.Interval = 40;
            circularScale.MinorTicksPerInterval = 1;
            circularScale.RimColor = UIColor.FromRGB(51, 51, 51);
            circularScale.LabelOffset = 0.45f;
            circularScale.LabelColor = UIColor.FromRGB(51, 51, 51);
            circularScale.ScaleStartOffset = 0.65f;
            circularScale.ScaleEndOffSet = 0.64f;

            SFTickSettings majorTick = new SFTickSettings();
            majorTick.StartOffset = 0.64f;
            majorTick.EndOffset = 0.57f;
            majorTick.Width = 2;
            majorTick.Color = UIColor.FromRGB(51, 51, 51);
            circularScale.MajorTickSettings = majorTick;

            SFTickSettings minorTick = new SFTickSettings();
            minorTick.StartOffset = 0.64f;
            minorTick.EndOffset = 0.59f;
            minorTick.Width = 2;
            minorTick.Color = UIColor.FromRGB(51, 51, 51);
            circularScale.MinorTickSettings = minorTick;

            scales.Add(circularScale);
            circularGauge.Scales = scales;
            this.View.AddSubview(circularGauge);