Getting Started with SfLinearGauge

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.

    Xamarin.iOS LinearGauge 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);

    Xamarin.iOS LinearGauge Getting Started

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