Headers in Xamarin Circular Gauge (SfCircularGauge)

13 May 20215 minutes to read

The Header support allows you to show text 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 Header 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.

XAML

<gauge:SfCircularGauge>
	  
         <gauge:SfCircularGauge.Headers>
            <gauge:Header Text="Speedometer" ForegroundColor="Black" />
        </gauge:SfCircularGauge.Headers>
     </gauge:SfCircularGauge>

C#

SfCircularGauge circularGauge = new SfCircularGauge(); 
    Header header = new Header();
    header.Text = "Speedometer";
    header.ForegroundColor = Color.Black;
    circularGauge.Headers.Add(header);

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).

XAML

<gauge:SfCircularGauge>
        <gauge:SfCircularGauge.Headers>
            <gauge:Header Text="Speedometer" Position="0.5,0.5" ForegroundColor="Black" />
        </gauge:SfCircularGauge.Headers>
     </gauge:SfCircularGauge>

C#

SfCircularGauge circularGauge = new SfCircularGauge(); 
    Header header = new Header();
    header.Text = "Speedometer";
    header.ForegroundColor = Color.Black;
    header.Position = new Point(0.5, 0.5);
    circularGauge.Headers.Add(header);

Customization of header

You can customize the header’s text by using the FontFamily, FontAttribute and TextSize properties.

XAML

<gauge:SfCircularGauge>
         <gauge:SfCircularGauge.Headers>
             <gauge:Header Text="Speedometer" TextSize="20" ForegroundColor="Blue" FontAttributes="Bold">
			        <gauge:Header.FontFamily>
                        <OnPlatform x:TypeArguments="x:String" iOS="Chalkduster" Android="algerian.ttf" WinPhone="Chiller" />
                    </gauge:Header.FontFamily>
		     </gauge:Header>
        </gauge:SfCircularGauge.Headers>
    </gauge:SfCircularGauge>

C#

SfCircularGauge circularGauge = new SfCircularGauge(); 
    Header header = new Header();
    header.Text = "Speedometer";
    header.TextSize = 20;
    header.FontAttributes = FontAttributes.Bold;
    header.FontFamily = Device.RuntimePlatform == Device.iOS ? "Chalkduster" : Device.RuntimePlatform == Device.Android ? "algerian.ttf" : "Chiller";
    header.ForegroundColor = Color.Blue;   
    circularGauge.Headers.Add(header); 
    this.content = circularGauge;

Alignment of header

You can align header to the Start, Center and End using the HorizontalHeaderPosition and VerticalHeaderPosition properties.

Setting horizontal header position

XAML

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Headers>
        <gauge:Header Text="Speedometer" ForegroundColor="Black" HorizontalHeaderPosition="Start"/>
    </gauge:SfCircularGauge.Headers>
</gauge:SfCircularGauge>

C#

SfCircularGauge circularGauge = new SfCircularGauge();
Header header = new Header();
header.Text = "Speedometer";
header.ForegroundColor = Color.Black;
header.HorizontalHeaderPosition = ViewAlignment.Start;
circularGauge.Headers.Add(header);
Content = circularGauge;

Setting vertical header position

XAML

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Headers>
        <gauge:Header Text="Speedometer" ForegroundColor="Black" VerticalHeaderPosition="Start"/>
    </gauge:SfCircularGauge.Headers>
</gauge:SfCircularGauge>

C#

SfCircularGauge circularGauge = new SfCircularGauge();
Header header = new Header();
header.Text = "Speedometer";
header.ForegroundColor = Color.Black;
header.VerticalHeaderPosition = ViewAlignment.Start;
circularGauge.Headers.Add(header);
Content = circularGauge;