Ranges
18 Nov 2018 / 19 minutes to read
Range is a visual element, which begins and ends at specified values within a scale.
Setting start and end values for range
Start and end values of ranges are set by using the StartValue and EndValue properties.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
SFCircularRange range = new SFCircularRange();
range.StartValue = 0;
range.EndValue = 50;
scale.Ranges.Add(range);
circularGauge.Scales.Add(scale);
this.View.AddSubview(circularGauge);
Range customization
An UI of a range is customized by using the Color and Width properties. First, you should set the Offset property for range, then increase the width of the range.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
scale.RimWidth = 10;
scale.RimColor = UIColor.FromRGB(224,224,224);
scale.LabelColor = UIColor.FromRGB(66, 66, 66);
scale.MajorTickSettings.Width = 3;
scale.LabelOffset = 0.9f;
scale.MinorTickSettings.Size = 5;
scale.MajorTickSettings.Size = 10;
scale.MajorTickSettings.Offset = 0.8f;
scale.MinorTickSettings.Offset = 0.8f;
scale.MinorTicksPerInterval = 3;
SFCircularRange range = new SFCircularRange();
range.StartValue = 0;
range.EndValue = 50;
range.Width = 70;
range.Offset = 0.8f;
range.Color = UIColor.FromRGB(255,192,203);
scale.Ranges.Add(range);
circularGauge.Scales.Add(scale);
this.View.AddSubview(circularGauge);
Setting position for range
The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways:
1.The Offset property with the Width property.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
SFCircularRange range = new SFCircularRange();
range.StartValue = 0;
range.EndValue = 100;
range.Offset = 0.5f;
range.Width = 20;
scale.Ranges.Add(range);
circularGauge.Scales.Add(scale);
this.View.AddSubview(circularGauge);
2.The InnerStartOffset, InnerEndOffset, OuterStartOffset, and OuterEndOffset properties.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
SFCircularRange range = new SFCircularRange();
range.StartValue = 10;
range.EndValue = 80;
range.InnerStartOffset = 0.83f;
range.InnerEndOffset = 0.6f;
range.OuterStartOffset = 0.85f;
range.OuterEndOffset = 0.8f;
scale.Ranges.Add(range);
circularGauge.Scales.Add(scale);
this.View.AddSubview(circularGauge);
Setting multiple ranges
In addition to the default range, you can add n number of ranges to a scale by using the Ranges property.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
scale.StartAngle = 90;
scale.SweepAngle = 270;
scale.Interval = 10;
scale.ShowLabels = false;
scale.ShowTicks = false;
scale.ShowRim = false;
scale.RimWidth = 40;
scale.RadiusFactor = 0.9f;
scale.RimColor = UIColor.FromRGB(224, 224, 224);
SFGaugeHeader header1 = new SFGaugeHeader();
header1.Text = (Foundation.NSString) "Poor";
header1.Position = new CoreGraphics.CGPoint((float)0.1, (float)0.55);
header1.TextColor = UIColor.FromRGB(240, 62, 62);
header1.TextStyle = UIFont.FromName("Helvetica", 20f);
circularGauge.Headers.Add(header1);
SFGaugeHeader header2 = new SFGaugeHeader();
header2.Text = (Foundation.NSString)"Good";
header2.Position = new CoreGraphics.CGPoint((float)0.87, (float)0.55);
header2.TextColor = UIColor.FromRGB(39, 122, 190);
header2.TextStyle = UIFont.FromName("Helvetica", 20f);
circularGauge.Headers.Add(header2);
//Poor
SFCircularRange range = new SFCircularRange();
range.StartValue = 0;
range.EndValue = 35;
range.Offset = 0.9f;
range.Width = 40;
range.Color = UIColor.FromRGB(240, 62, 62);
scale.Ranges.Add(range);
//Average
SFCircularRange range1 = new SFCircularRange();
range1.StartValue = 35;
range1.EndValue = 75;
range1.Offset = 0.9f;
range1.Width = 40;
range1.Color = UIColor.FromRGB(255, 221, 0);
scale.Ranges.Add(range1);
//Good
SFCircularRange range2 = new SFCircularRange();
range2.StartValue = 75;
range2.EndValue = 100;
range2.Offset = 0.9f;
range2.Width = 40;
range2.Color = UIColor.FromRGB(39, 122, 190);
scale.Ranges.Add(range2);
SFNeedlePointer pointer = new SFNeedlePointer();
pointer.Width = 10;
pointer.LengthFactor = 0.66f;
pointer.Color = UIColor.FromRGB(255,69,0);
pointer.KnobColor = UIColor.White;
pointer.PointerType = SFCiruclarGaugePointerType.SFCiruclarGaugePointerTypeTriangle;
pointer.KnobRadius = 0;
pointer.Value = 70;
pointer.KnobStrokeColor = UIColor.FromRGB(6, 130, 246);
pointer.KnobStrokeWidth = 6;
scale.Pointers.Add(pointer);
scales.Add(scale);
circularGauge.Scales = scales;
this.View.AddSubview(circularGauge);
Setting gradient color for range
You can give smooth color transition to range by specifying the different colors based on range value.
SFCircularGauge circularGauge = new SFCircularGauge();
ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
SFCircularScale scale = new SFCircularScale();
scale.StartValue = 0;
scale.EndValue = 100;
scale.Interval = 10;
scale.LabelFont = UIFont.FromName("Helvetica", 16f);
scale.LabelOffset = 0.95f;
scale.RimWidth = 28;
scale.ShowRim = false;
scale.MinorTicksPerInterval = 4;
SFTickSettings major = new SFTickSettings();
major.Width = 1;
major.EndOffset = 0.83f;
major.StartOffset = 0.75f;
major.Size = 8;
scale.MajorTickSettings = major;
SFTickSettings minor = new SFTickSettings();
minor.Width = 0.7f;
minor.EndOffset = 0.79f;
minor.StartOffset = 0.75f;
scale.MinorTickSettings = minor;
scales.Add(scale);
circularGauge.Scales = scales;
SFCircularRange range = new SFCircularRange();
range.Offset = 0.6f;
range.Width = 30;
range.StartValue = 0;
range.EndValue = 100;
scale.Ranges.Add(range);
ObservableCollection<GaugeGradientStop> gradientColor1 = new ObservableCollection<GaugeGradientStop>();
GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
gaugeGradientStop.Value = 0;
gaugeGradientStop.Color = UIColor.FromRGB(48, 179, 45);
gradientColor1.Add(gaugeGradientStop);
GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
gaugeGradientStop1.Value = 50;
gaugeGradientStop1.Color = UIColor.FromRGB(255, 221, 0);
gradientColor1.Add(gaugeGradientStop1);
GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop();
gaugeGradientStop2.Value = 80;
gaugeGradientStop2.Color = UIColor.FromRGB(240, 62, 62);
gradientColor1.Add(gaugeGradientStop2);
range.GradientStops = gradientColor1;
circularGauge.Scales = scales;
this.View.AddSubview(circularGauge);
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