Header

The SFGaugeHeader support allows you to show text, image, or any UI content inside the gauge control. A circular gauge can be made self-descriptive about the data. It can be measured with use of the header.

Adding header in circular gauge

Header

The SFGaugeHeader can be used to set a unique header for the circular gauge. You can add text as headers in a circular gauge. Multiple headers also can be added in a circular gauge.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();
                SFGaugeHeader header = new SFGaugeHeader();
                header.Text = (Foundation.NSString)"Speedometer";
                header.TextColor = UIColor.Black;
                circularGauge.Headers.Add(header);
                scale.StartValue = 0;
                scale.EndValue = 100;
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Setting position for header

    The Position property is used to place the header in a circular gauge. The value for Position should be specified in offset value. In the Point value, which has been given for the Position, first value represent x-coordinate and second value represents y-coordinate. By default, it is placed at (0.5, 0.7).

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();
                SFGaugeHeader header = new SFGaugeHeader();
                header.Text =(Foundation.NSString) "Speedometer";
                header.TextColor = UIColor.Black;
                header.Position = new CoreGraphics.CGPoint((float)0.5, (float)0.5);
                circularGauge.Headers.Add(header);
                scale.StartValue = 0;
                scale.EndValue = 100;
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);

    Customization of header

    You can customize the header’s text by using the TextStyle, TextColor and ArcRadius properties.

  • c#
  • SFCircularGauge circularGauge = new SFCircularGauge();
                ObservableCollection<SFCircularScale> scales = new ObservableCollection<SFCircularScale>();
                SFCircularScale scale = new SFCircularScale();
                SFGaugeHeader header = new SFGaugeHeader();
                header.Text = (Foundation.NSString)"Speedometer";
                header.TextStyle = UIFont.FromName("Chalkduster", 20f);
                header.TextColor = UIColor.Blue;
                circularGauge.Headers.Add(header);
                scale.StartValue = 0;
                scale.EndValue = 100;
                scales.Add(scale);
                circularGauge.Scales = scales;
                this.View.AddSubview(circularGauge);