Header in WPF Radial Gauge (SfCircularGauge)

9 Jul 20269 minutes to read

Header allows you to show text or any UI content inside the gauge control using the GaugeHeader option. This provides information about the data that is being plotted in the circular gauge.

Setting a header for the circular gauge

The GaugeHeader is an object that can be used to set a unique header for the circular gauge. You can add text and images as a header in the circular gauge. Only one header can be added to a circular gauge.

<gauge:SfCircularGauge  HeaderAlignment="Center">

    <gauge:SfCircularGauge.GaugeHeader>

    <TextBlock Text="Temperature (K)"

     Height="40" Width="100"

     FontSize="13" Foreground="Black"/>

    </gauge:SfCircularGauge.GaugeHeader>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale>

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Hidden"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale mainscale = new CircularScale();

TextBlock textBlock = new TextBlock();

textBlock.Text = "Temperature (K)";

textBlock.Height = 40;

textBlock.Width = 100;

textBlock.FontSize = 13;

textBlock.Foreground = new SolidColorBrush(Colors.Black);

sfCircularGauge.GaugeHeader = textBlock;

sfCircularGauge.HeaderAlignment = HeaderAlignment.Center;

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Visibility.Hidden;

mainscale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(mainscale);

this.Content = sfCircularGauge;

CircularGauge Header

Setting alignment for the header

The gauge header can be positioned by using the HeaderAlignment property. The default value of this property is Left.

It includes the following options:

  • Left

  • Right

  • Top

  • Bottom

  • Center

  • TopLeft

  • TopRight

  • BottomLeft

  • BottomRight

  • Custom

<gauge:SfCircularGauge  HeaderAlignment="Top">

    <gauge:SfCircularGauge.GaugeHeader>

    <TextBlock Text="Temperature (K)"

     Height="40" Width="100"

     FontSize="13" Foreground="Black"/>

    </gauge:SfCircularGauge.GaugeHeader>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale>

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Hidden"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale mainscale = new CircularScale();

TextBlock textBlock = new TextBlock();

textBlock.Text = "Temperature (K)";

textBlock.Height = 40;

textBlock.Width = 100;

textBlock.FontSize = 13;

textBlock.Foreground = new SolidColorBrush(Colors.Black);

sfCircularGauge.GaugeHeader = textBlock;

sfCircularGauge.HeaderAlignment = HeaderAlignment.Top;

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Visibility.Hidden;

mainscale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(mainscale);

this.Content = sfCircularGauge;

CircularGauge Header with customization

Setting the position for the header

The GaugeHeaderPosition property is used to place the header in the circular gauge. The value for GaugeHeaderPosition should be specified as an offset value. In the point value given for GaugeHeaderPosition, the first value represents the x-coordinate and the second value represents the y-coordinate. First, set the HeaderAlignment to custom, then set the position of the header.

<gauge:SfCircularGauge  HeaderAlignment="Custom" GaugeHeaderPosition="0.5,0.8">

    <gauge:SfCircularGauge.GaugeHeader>

    <TextBlock Text="Temperature (K)"

     Height="40" Width="100"

     FontSize="13" Foreground="Black"/>

    </gauge:SfCircularGauge.GaugeHeader>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale>

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Hidden"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

            CircularScale mainscale = new CircularScale();

            TextBlock textBlock = new TextBlock();

            textBlock.Text = "Temperature (K)";

            textBlock.Height = 40;

            textBlock.Width = 100;

            textBlock.FontSize = 13;

            textBlock.Foreground = new SolidColorBrush(Colors.Black);

            sfCircularGauge.GaugeHeader = textBlock;

            sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom;

            sfCircularGauge.GaugeHeaderPosition = new Point(0.5, 0.8);

            CircularPointer circularPointer = new CircularPointer();

            circularPointer.NeedlePointerVisibility = Visibility.Hidden;

            mainscale.Pointers.Add(circularPointer);

            sfCircularGauge.Scales.Add(mainscale);

            this.Content = sfCircularGauge;

CircularGauge header with custom position

Customization of the header font

You can customize the header’s text by using the FontFamily, FontStyle, FontSize, and Foreground properties.

<gauge:SfCircularGauge  HeaderAlignment="Custom" GaugeHeaderPosition="0.5,0.8"

     FontFamily="Monotype Corsiva" FontSize="15"

     FontStyle="Italic"  Foreground="Blue">

    <gauge:SfCircularGauge.GaugeHeader>

    <TextBlock Text="Temperature (K)"

     Height="40" Width="100" />

    </gauge:SfCircularGauge.GaugeHeader>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale >

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Hidden"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

            CircularScale mainscale = new CircularScale();

            TextBlock textBlock = new TextBlock();

            textBlock.Text = "Temperature (K)";

            textBlock.Height = 40;

            textBlock.Width = 100;

            sfCircularGauge.GaugeHeader = textBlock;

            sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom;

            sfCircularGauge.GaugeHeaderPosition = new Point(0.5, 0.8);

            sfCircularGauge.FontSize = 15;

            sfCircularGauge.FontFamily = new FontFamily("Monotype Corsiva");

            sfCircularGauge.FontStyle = FontStyles.Italic;

            sfCircularGauge.Foreground = new SolidColorBrush(Colors.Blue);

            CircularPointer circularPointer = new CircularPointer();

            circularPointer.NeedlePointerVisibility = Visibility.Hidden;

            mainscale.Pointers.Add(circularPointer);

            sfCircularGauge.Scales.Add(mainscale);

            this.Content = sfCircularGauge;

CircularGauge Header with customization