Header
1 Mar 20225 minutes to read
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.
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).
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.
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);