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
using Com.Syncfusion.Gauges.SfLinearGauge;
Initialize gauge
You can initialize the SFLinearGauge
control with a required optimal name by using the included namespace.
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.
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.
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.
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.
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.
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.