Pointers

You can add multiple pointers to the gauge to point multiple values on the same scale. It is used to show low and high values at the same time. The value of the pointer is set by using the Value property.

Needle pointer

SFNeedlePointer contains three parts, namely needle, knob, and tail and that can be placed on a gauge to mark the values.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 70;
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting needle pointer type

    The appearance of the needle pointer can be customized by using the PointerType property. The default value of this property is Triangle. This is an enum property, and it has the following options:

    1. Bar
    2. Triangle

    Setting bar pointer type

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 60;
                needlePointer.PointerType = SFCiruclarGaugePointerType.SFCiruclarGaugePointerTypeBar;
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting needle pointer type

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 60;
                needlePointer.PointerType = SFCiruclarGaugePointerType.SFCiruclarGaugePointerTypeTriangle;
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Needle pointer customization

    The length of the needle is controlled by using the LengthFactor property. The LengthFactor property’s minimum and maximum bounds are 0 and 1. The needle’s UI is customized by using the Color and Width properties.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 60;
                needlePointer.Color = UIColor.FromRGB(0, 191, 255);
                needlePointer.Width = 7f;
                needlePointer.LengthFactor = 0.7f;
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Knob customization

    Knob of the needle pointer can be customized by using the KnobColor, KnobRadius, KnobRadiusFactor, KnobStrokeColor, and KnobStrokeWidth properties. You can set the radius of knob to pixel and percentage values by using the KnobRadius and KnobRadiusFactor properties.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 10;
                needlePointer.KnobRadius = 15;
                needlePointer.KnobStrokeColor = UIColor.FromRGB(0, 125, 209);
                needlePointer.KnobColor = UIColor.White;
                needlePointer.KnobStrokeWidth = 8;
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting tail for needle pointer

    Tail of the needle pointer can be customized by using the TailColor, TailLengthFactor, TailStrokeColor, and TailStrokeWidth properties.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 90;
                needlePointer.KnobRadius = 15;
                needlePointer.TailColor = UIColor.FromRGB(117, 117, 117);
                needlePointer.TailLengthFactor = 0.2f;
                needlePointer.TailStrokeWidth = 1;
                needlePointer.TailStrokeColor = UIColor.FromRGB(117, 117, 117);
                scale.Pointers.Add(needlePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Range pointer

    A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the values. The RangeStart property allows you to set the starting value of the range pointer.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFRangePointer rangePointer = new SFRangePointer();
                rangePointer.RangeStart = 0;
                rangePointer.Value = 85;
                scale.Pointers.Add(rangePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Range pointer customization

    The range pointer’s UI is customized by using the Color and Width properties. First, you should set the Offset property for range pointer, and then increase the thickness of the range pointer.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFRangePointer rangePointer = new SFRangePointer();
                rangePointer.Value = 60;
                rangePointer.Color = UIColor.FromRGB(0,255,255);
                rangePointer.Width = 30;
                rangePointer.Offset = 0.7f;
                scale.Pointers.Add(rangePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting position for range pointer

    The SFRangePointer in the scale can be placed inside or outside of the scale by using the following two ways:

    1. The Offset property.
    2. The StartOffset and EndOffset properties.

    Setting offset for range pointer

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFRangePointer rangePointer = new SFRangePointer();
                rangePointer.Value = 100;
                rangePointer.Offset = 0.5f;
                rangePointer.Width = 30;
                scale.Pointers.Add(rangePointer);
                scales.Add(scale);
                circularGauge.Scales = scales; 
                this.View.AddSubview(circularGauge);

    Setting start and end offset for range pointer

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFRangePointer rangePointer = new SFRangePointer();
                rangePointer.RangeStart = 0;
                rangePointer.Value = 85;
                rangePointer.StartOffset = 0.5f;
                rangePointer.EndOffset = 0.7f;
                scale.Pointers.Add(rangePointer);
                scales.Add(scale);
                circularGauge.Scales = scales; 
                this.View.AddSubview(circularGauge);

    Setting range cap for range pointer

    The RangeCap property provides options to position the range cap of the SFRangePointer, which contains the start, end, both, and none options. The RangeCap property is an enum property.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.MajorTickSettings.Offset = 0.9f;
                scale.MinorTickSettings.Offset = 0.9f;
                scale.LabelOffset = 0.75f;
                scale.ScaleStartOffset = 0.9f;
                scale.ScaleEndOffSet = 1;
                SFRangePointer rangePointer = new SFRangePointer();
                rangePointer.RangeStart = 15;
                rangePointer.StartOffset = 0.9f;
                rangePointer.EndOffset = 1;
                rangePointer.Value = 80;
                rangePointer.RangeCap = SFCiruclarGaugeRangeCap.End;
                scale.Pointers.Add(rangePointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Marker pointer

    The different types of marker shapes are used to mark the pointer values in a scale. You can change the marker shape by using the MarkerShape property. Gauge supports the following types of marker shapes:

    • Circle
    • Rectangle
    • Triangle
    • Inverted triangle
    • Diamond
    • Image

    The image is used to denote the pointer value instead of rendering the marker shape. It can be achieved by setting the MarkerShape to Image, and assigning the image path to ImageSource in pointer.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFMarkerPointer markerPointer = new SFMarkerPointer();
                markerPointer.Value = 70;
                markerPointer.MarkerShape = MarkerShape.Triangle;
                scale.Pointers.Add(markerPointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting image marker shape

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFMarkerPointer markerPointer = new SFMarkerPointer();
                markerPointer.Value = 40;
                markerPointer.MarkerShape = MarkerShape.Image;
                markerPointer.ImageSource = "location.png";
                scale.Pointers.Add(markerPointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Marker pointer customization

    The marker can be customized in terms of color, width, and height by using the Color, MarkerWidth, and MarkerHeight properties in pointer. First, you should set the Offset property for marker pointer, then increase the height and width of the marker pointer.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                SFMarkerPointer markerPointer = new SFMarkerPointer();
                markerPointer.Value = 70;
                markerPointer.Color = UIColor.FromRGB(255,192,203);
                markerPointer.MarkerHeight = 20;
                markerPointer.MarkerWidth = 20;
                markerPointer.Offset = 1;
                scale.Pointers.Add(markerPointer);
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting multiple pointers

    In addition to the default pointer, you can add n number of pointers to a scale by using the Pointers property.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();   
                scale.StartValue = 0;
                scale.EndValue = 100;
                ObservableCollection<SFCircularPointer> pointers = new ObservableCollection<SFCircularPointer>();
                SFMarkerPointer markerPointer = new SFMarkerPointer();
                markerPointer.Value = 40;
                pointers.Add(markerPointer);
    
                SFCircularScale scale1 = new SFCircularScale();
                scale1.StartValue = 0;
                scale1.EndValue = 100;
                scale1.ShowLabels = false;
                scale1.ShowTicks = false;
                scale1.ScaleStartOffset = 0.5f;
                scale1.ScaleEndOffSet = 0.6f;
    
                SFNeedlePointer needlePointer = new SFNeedlePointer();
                needlePointer.Value = 60;
                needlePointer.LengthFactor = 0.3f;
                pointers.Add(needlePointer);
    
                scale1.Pointers = pointers;
                scale.Pointers = pointers;
                scales.Add(scale1);
    
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting animation for pointer

    The EnableAnimation property is a Boolean property that enables or disables the animation of the pointers in circular gauge.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();
                scale.RimColor = UIColor.FromRGB(211, 211, 211);
                scale.RimWidth = 30;
                scale.RadiusFactor = 1;
                scale.ShowTicks = false;
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.Interval = 10;
                scale.LabelOffset = 0.75f;
                scale.LabelColor = UIColor.FromRGB(66, 66, 66);
                scale.LabelFont = UIFont.FromName("Helvetica", 15f);
    
                SFRangePointer pointer1 = new SFRangePointer();
                pointer1.Color = UIColor.Orange;
                pointer1.Width = 30;
                pointer1.Offset = 1;
                pointer1.EnableAnimation = true;
                pointer1.AnimationDuration = 5;
                pointer1.Value = 80;
                scale.Pointers.Add(pointer1);
    
                SFNeedlePointer pointer2 = new SFNeedlePointer();
                pointer2.Width = 7;
                pointer2.LengthFactor = 0.55f;
                pointer2.Color = UIColor.FromRGB(211, 211, 211);
                pointer2.KnobColor = UIColor.White;
                pointer2.TailColor = UIColor.FromRGB(211, 211, 211);
                pointer2.TailLengthFactor = 0.2f;
                pointer2.PointerType = SFCiruclarGaugePointerType.SFCiruclarGaugePointerTypeTriangle;
                pointer2.KnobRadius = 15;
                pointer2.KnobRadius = 12;
                pointer2.Value = 80;
                pointer2.AnimationDuration = 5;
                pointer2.TailStrokeWidth = 2;
                pointer2.TailStrokeColor = UIColor.FromRGB(211, 211, 211);
                pointer2.KnobStrokeColor = UIColor.FromRGB(211, 211, 211);
                pointer2.KnobStrokeWidth = 8;
                scale.Pointers.Add(pointer2);
                circularGauge.Scales.Add(scale);
                this.View.AddSubview(circularGauge);

    Setting pointer drag

    Pointers can be dragged over the scale value. It can be achieved by clicking and dragging the pointer. To enable or disable the pointer drag, use the EnableDragging property.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();
                scale.RimColor = UIColor.FromRGB(0 ,191 , 255);
                scale.RimWidth = 20;
                scale.RadiusFactor = 1;
                scale.ShowTicks = false;
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.Interval = 10;
                scale.LabelOffset = 0.75f;
                scale.LabelColor = UIColor.FromRGB(66, 66, 66);
                scale.LabelFont = UIFont.FromName("Helvetica", 15f);
    
                SFMarkerPointer pointer1 = new SFMarkerPointer();
                pointer1.MarkerShape = MarkerShape.Triangle;
                pointer1.Color = UIColor.FromRGB(72, 61,139);
                pointer1.MarkerHeight = 18;
                pointer1.MarkerWidth = 18;
                pointer1.Value = 30;
                pointer1.EnableAnimation = false;
                pointer1.EnableDragging = true;
                scale.Pointers.Add(pointer1);
    
                circularGauge.Scales.Add(scale);
                this.View.AddSubview(circularGauge);