Getting Started with SfLinearGauge

1 Mar 20226 minutes to read

This section explains the steps required to configure a SFLinearGauge control in a real-time scenario and also provides a walk-through on some of the customization features available in SFLinearGauge control.

Adding namespace for the added assemblies

C#

using Com.Syncfusion.Gauges.SfLinearGauge;

Initialize gauge

You can initialize the SFLinearGauge control with a required optimal name by using the included namespace.

C#

public override void ViewDidLoad()
		{
			base.ViewDidLoad();    
                        SFLinearGauge linearGauge = new SFLinearGauge();
                        this.View.AddSubview(linearGauge);
		}

Initialize linear gauge from designer

SFLinearGauge allows users to drag the control from toolbox to designer window. The properties window will be displayed where you change the necessary functionalities to customize the linear gauge in designer.

Adding header

You can assign a unique header to SFLinearGauge by using the SFLinearLabel property and position it wherever as you desired by using the Position property.

C#

SFLinearGauge linearGauge = new SFLinearGauge();
            linearGauge.BackgroundColor = UIColor.White;
            SFLinearLabel linearHeader = new SFLinearLabel();
            linearHeader.Text = (Foundation.NSString)"Thermometer";
            linearHeader.Font = UIFont.FromName("Helvetica", 20f);
            linearHeader.Position = new CoreGraphics.CGPoint(0.35, 0.35);
            linearHeader.Color = UIColor.Black;
            linearGauge.Header = linearHeader;

Configuring scales

Scales is a collection of SFLinearScale, which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub elements of a scale.

The Minimum and Maximum properties allow you to set the scale range.

C#

SFLinearScale linearScale = new SFLinearScale();
            linearGauge.Header = new SFLinearLabel();
            linearScale.ScaleBarColor = UIColor.FromRGB(224, 224, 224);
            linearScale.MajorTickSettings.Length = 12;
            linearScale.MinorTickSettings.Length = 5;
            linearScale.LabelColor = UIColor.FromRGB(66, 66, 66);
            linearGauge.Scales.Add(linearScale);

Adding a symbol pointer

SFSymbolPointer is a shape that can be placed to mark the pointer value in gauge.

C#

SFSymbolPointer symbolPointer = new SFSymbolPointer();
            symbolPointer.Value = 60;
            symbolPointer.Thickness = 10;
            symbolPointer.SymbolPosition = SymbolPointerPosition.Away;
            symbolPointer.Color = UIColor.FromRGB(117, 117, 117);
            linearScale.Pointers.Add(symbolPointer);

Adding a bar pointer

SFBarPointer is used to mark the scale values. It starts at the beginning of gauge and ends at the pointer value.

C#

SFBarPointer barPointer = new SFBarPointer();
            barPointer.Value = 50;
            barPointer.Thickness = 10;
            barPointer.Color = UIColor.FromRGB(117, 117, 117);
            linearScale.Pointers.Add(barPointer);

Adding ranges

You can categorize the scale values using the start and end values properties in SFLinearRange. You can add multiple ranges for a scale using the ranges property.

C#

SFLinearRange linearRange = new SFLinearRange();
            linearRange.StartValue = 0;
            linearRange.EndValue = 40;
            linearRange.Color = UIColor.FromRGB(39, 190, 183);
            linearRange.Offset = -20;
            linearRange.StartWidth = 10;
            linearRange.EndWidth = 10;
            linearScale.Ranges.Add(linearRange);

            SFLinearRange linearRange1 = new SFLinearRange();
            linearRange1.StartValue = 40;
            linearRange1.EndValue = 100;
            linearRange1.Color = UIColor.FromRGB(224 , 255 , 255);
            linearRange1.Offset = -20;
            linearRange1.StartWidth = 10;
            linearRange1.EndWidth = 10;
            linearScale.Ranges.Add(linearRange1);

You can find the complete getting started sample from this link.