Migrate from Xamarin.Forms SfCircularGauge to .NET MAUI SfRadialGauge

28 Apr 202224 minutes to read

To make the migration from the Xamarin SfCircularGauge to .NET MAUI SfRadialGauge easier, most of the APIs from the Xamarin SfCircularGauge were kept in the.NET MAUI SfRadialGauge. However, to maintain the consistency of API naming in the.NET MAUI SfRadialGauge, some of the APIs have been renamed. Please find the difference in the following topics.

Initialize control

To initialize the control, import the gauge namespace and initialize SfRadialGauge as shown in the following code sample.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<ContentPage
xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms">

    <gauge:SfCircularGauge/>

</ContentPage>
using Syncfusion.SfGauge.XForms;
...

SfCircularGauge circularGauge = new SfCircularGauge ();
this.Content = circularGauge;
 
<ContentPage
xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges">

    <gauge:SfRadialGauge />

</ContentPage>
using Syncfusion.Maui.Gauges;
…

SfRadialGauge sfRadialGauge = new SfRadialGauge();
this.Content = sfRadialGauge;
Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

Scales

Axes

 Gets or sets a collection of RadialAxis.

Scale

RadialAxis

 It is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements.

Axis

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

StartValue

Minimum

 Gets or sets the minimum value of the axis.

EndValue

Maximum

 Gets or sets the maximum value of the axis.

ShowRim

ShowAxisLine

 Gets or sets a value indicating whether to shows or hides the axis line.

SweepAngle

EndAngle

 Gets or sets a value that specifies the EndAngle of the axis.

EnableAutoAngle

CanRotateLabels

 Gets or sets a value indicating whether to rotate the labels or not.

MaximumLabels

MaximumLabelsCount

 Gets or sets the maximum number of labels to be displayed in an axis in 100 logical pixels.

Direction

IsInversed

 Gets or sets a value indicating whether it inverts the axis from right to left.

MajorTickSettings

MajorTickStyle

 Gets or sets RadialTickStyle, which is used to customize major ticks.

MinorTickSettings

MinorTickStyle

 Gets or sets RadialTickStyle, which is used to customize minor ticks.

UseRangeColorForLabels

UseRangeColorForAxis

 Gets or sets a value indicating whether to use the range color for axis elements such as labels and ticks.

The following code example, explains how to initialize the axis in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale StartValue="0"
                     EndValue="12"
                     Interval="1"
                     StartAngle="270"
                     SweepAngle="360"
                     ShowFirstLabel="False"/>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
Scale scale = new Scale();
scale.StartValue = 0;
scale.EndValue = 12;
scale.Interval = 1;
scale.StartAngle = 270;
scale.SweepAngle = 360;
scale.ShowFirstLabel = false;
scales.Add(scale);
circularGauge.Scales = scales;

this.Content = circularGauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="0"
                          Maximum="12"
                          Interval="1"
                          StartAngle="270"
                          EndAngle="270"
                          ShowFirstLabel="False" />
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.Minimum = 0;
radialAxis.Maximum = 12;
radialAxis.Interval = 1;
radialAxis.StartAngle = 270;
radialAxis.EndAngle = 270;
radialAxis.ShowFirstLabel = false;
sfRadialGauge.Axes.Add(radialAxis);

this.Content = sfRadialGauge;

Range

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

Range

RadialRange

 Create the range to add a color bar in the gauge. RadialRange is a visual that helps to quickly visualize where a value falls on the axis.

Offset

RangeOffset

 Gets or sets the value that specifies the range position. You can specify value either in logical pixel or radius factor using the OffsetUnit property.

Color

Fill

 Gets or sets the color that paints the interior area of the range.

The following code example, explains how to initialize the range in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale>
            <gauge:Scale.Ranges>
                <gauge:Range StartValue="10"
                             EndValue="80"
                             InnerStartOffset = "0.83"
                             InnerEndOffset = "0.6"
                             OuterStartOffset = "0.85"
                             OuterEndOffset =" 0.8"/>
            </gauge:Scale.Ranges>
        </gauge:Scale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
Scale scale = new Scale();
scales.Add(scale);

Range range = new Range();
range.StartValue = 10;
range.EndValue = 80;
range.InnerStartOffset = 0.83;
range.InnerEndOffset = 0.6;
range.OuterStartOffset = 0.85;
range.OuterEndOffset = 0.8;
scale.Ranges.Add(range);

circularGauge.Scales = scales;
this.Content = circularGauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:RadialRange StartValue="10"
                                   EndValue="80"
                                   OffsetUnit="Factor"
                                   RangeOffset="0.3"
                                   StartWidth="5"
                                   EndWidth="30" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

RadialRange gaugeRange = new RadialRange();
gaugeRange.StartValue = 10;
gaugeRange.EndValue = 80;
gaugeRange.OffsetUnit = SizeUnit.Factor;
gaugeRange.RangeOffset = 0.3;
gaugeRange.StartWidth = 5;
gaugeRange.EndWidth = 30;
radialAxis.Ranges.Add(gaugeRange);

this.Content = sfRadialGauge;

Pointers

In Xamarin SfCircularGauge and .NET MAUI SfRadialGauge, pointers can be classified as mentioned in the following table.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

MarkerPointer

 Divided into

ShapePointer

and

ContentPointer

 Represents the pointer that is used to indicate the value with any visual content or with built-in shapes.

NeedlePointer

NeedlePointer

 Create the pointer to indicate the value with a needle or arrow shape.

RangePointer

RangePointer

 Create the pointer to indicate the value with a rounded range bar arc.

NOTE

In .NET MAUI SfRadialGauge MarkerPointer have been divided into two types. They are ShapePointer and ContentPointer.

Marker pointer

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

MarkerHeight

ShapeHeight

in

ShapePointer

class		 Gets or sets a value that specifies the shape height in logical pixels.

MarkerWidth

ShapeWidth

in

ShapePointer

class		 Gets or sets a value that specifies the shape width in logical pixels.

MarkerShape

ShapeType

in

ShapePointer

class		 Gets or sets a value that specifies the shape type for the pointer.

EnableDragging

IsInteractive

in

ShapePointer

class		 Gets or sets a value that allows pointer value change by interaction.

The following code example, explains how to initialize the marker pointer in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale>
            <gauge:Scale.Pointers>
                <gauge:MarkerPointer Value="70"
                                     Color="Pink"
                                     MarkerHeight="20"
                                     MarkerWidth="20"
                                     EnableDragging="True"
                                     Offset="1"/>
            </gauge:Scale.Pointers>
        </gauge:Scale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
Scale scale = new Scale();
scales.Add(scale);

MarkerPointer markerPointer = new MarkerPointer();
markerPointer.Value = 70;
markerPointer.Color = Color.Pink;
markerPointer.MarkerHeight = 20;
markerPointer.MarkerWidth = 20;
markerPointer.EnableDragging = true;
markerPointer.Offset = 1;
scale.Pointers.Add(markerPointer);

circularGauge.Scales = scales;
this.Content = circularGauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="70"
                                    Fill="Pink"
                                    IsInteractive="True"
                                    ShapeHeight="20"
                                    ShapeWidth="20"
                                    Offset="-20"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ShapePointer markerPointer = new ShapePointer();
markerPointer.Value = 70;
markerPointer.IsInteractive = true;
markerPointer.Fill = new SolidColorBrush(Colors.Pink);
markerPointer.Offset = -20;
markerPointer.ShapeWidth = 20;
markerPointer.ShapeHeight = 20;
radialAxis.Pointers.Add(markerPointer);

this.Content = sfRadialGauge;

Content pointer

The ContentPointer in SfRadialGauge allows to using of any content or image or text as a pointer. In Xamarin, you can add an image as a pointer through the ImageSource property, and in MAUI, you can directly add an image control as a pointer in the content pointer.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description
-

Content

 Gets or sets the content of a ContentPointer.

The following code example, explains how to initialize content pointer .NET MAUI SfRadialGauge. The content pointer feature is not applicable in the Xamarin SfCircularGauge.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis >
            <gauge:RadialAxis.Pointers>
                <gauge:ContentPointer  Value="45" Offset="-20">
                    <gauge:ContentPointer.Content>
                        <Grid HeightRequest="37" WidthRequest="37" >
                            <RoundRectangle  Fill="White"
                                             CornerRadius="8"
                                             Stroke="Black" 
                                             StrokeThickness="2" />
                            <VerticalStackLayout>
                                <Label Text="45°F" 
                                       HorizontalOptions="Center"
                                       TextColor="Black" 
                                       FontAttributes="Bold"
                                       FontSize="10"/>
                            </VerticalStackLayout>
                        </Grid>
                    </gauge:ContentPointer.Content>
                </gauge:ContentPointer>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

ContentPointer pointer = new ContentPointer();
pointer.Value = 45;
pointer.Offset = -20;

Grid grid = new Grid();
grid.HeightRequest = 37;
grid.WidthRequest = 37;
grid.Children.Add(new RoundRectangle()
{
    Fill = new SolidColorBrush(Colors.White),
    CornerRadius = 8,
    Stroke = new SolidColorBrush(Colors.Black),
    StrokeThickness = 2,
});

VerticalStackLayout verticalStackLayout = new VerticalStackLayout();
verticalStackLayout.Children.Add(new Label()
{
    Text = "45°F",
    HorizontalOptions = LayoutOptions.Center,
    TextColor = Colors.Black,
    FontAttributes = FontAttributes.Bold,
    FontSize = 10
});

grid.Children.Add(verticalStackLayout);
pointer.Content = grid;

radialAxis.Pointers.Add(pointer);
this.Content = sfRadialGauge;

Needle pointer

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

KnobColor

KnobFill

 Gets or sets the brush that paints the interior area of the knob.

KnobStrokeColor

KnobStroke

 Gets or sets a value that specifies the knob border color.

KnobStrokeWidth

KnobStrokeThickness

 Gets or sets the width of the knob stroke outline.

LengthFactor

NeedleLength

 Gets or sets a value that specifies the length of the needle pointer.

TailColor

TailFill

 Gets or sets the brush that paints the interior area of the tail shape.

TailLengthFactor

TailLength

 Gets or sets a value that specifies the needle pointer tail length.

EnableDragging

IsInteractive

 Gets or sets a value that allows pointer value change by interaction.

The following code example explains how to initialize the needle pointer in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale>
            <gauge:Scale.Pointers>
                <gauge:NeedlePointer  Value="60"
                                      Color="DeepSkyBlue"
                                      LengthFactor="0.7"
                                      Thickness="7"/>
            </gauge:Scale.Pointers>
        </gauge:Scale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection <Scale>();
Scale scale = new Scale();

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.Color = Color.DeepSkyBlue;
needlePointer.Thickness = 7;
needlePointer.LengthFactor = 0.7;
scale.Pointers.Add(needlePointer);

scales.Add(scale);
circularGauge.Scales = scales;
this.Content = circularGauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="60"
                                     NeedleFill="DeepSkyBlue"
                                     NeedleLengthUnit="Factor"
                                     NeedleLength="0.7"
                                     NeedleStartWidth="0.1"
                                     NeedleEndWidth="10"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.NeedleFill = new SolidColorBrush(Colors.DeepSkyBlue);
needlePointer.NeedleLengthUnit = SizeUnit.Factor;
needlePointer.NeedleLength = 0.7;
needlePointer.NeedleStartWidth = 0.1;
needlePointer.NeedleEndWidth = 10;
radialAxis.Pointers.Add(needlePointer);

this.Content = sfRadialGauge;

Range pointer

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

Offset

PointerOffset

 Gets or sets the value that specifies the position value for the pointer.

RangeCap

CornerStyle

 Gets or sets the value that specifies the corner style of the range pointer.

Thickness

PointerWidth

 Gets or sets the width of the knob stroke outline.

The following code example explains how to initialize the range pointer in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale>
            <gauge:Scale.Pointers>
                <gauge:RangePointer Value="50"
                                    RangeCap="Both"
                                    Offset="0.7"
                                    Thickness = "30"/>
            </gauge:Scale.Pointers>
        </gauge:Scale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
Scale scale = new Scale();

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 50;
rangePointer.RangeCap = RangeCap.Both;
rangePointer.Offset = 0.7;
rangePointer.Thickness = 30;
scale.Pointers.Add(rangePointer);

scales.Add(scale);
circularGauge.Scales = scales;
this.Content = circularGauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="50"
                                    CornerStyle="BothCurve"
                                    OffsetUnit="Factor"
                                    PointerOffset="0.3"
                                    PointerWidth="30"/>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 30;
rangePointer.CornerStyle = CornerStyle.BothCurve;
rangePointer.OffsetUnit = SizeUnit.Factor;
rangePointer.PointerOffset = 0.3;
rangePointer.PointerWidth = 10;
radialAxis.Pointers.Add(rangePointer);

this.Content = sfRadialGauge;

Annotation

Annotations in Xamarin can only be set for circular gauge and cannot be defined for axis/scale. However, with .NET MAUI, you can set annotations on each axis.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge Description

View

Content

 Gets or sets the value that represents annotation's content.

Angle

DirectionValue

and

DirectionUnit

is Angle.		 Gets or sets the value to adjusts the annotation distance from center. You can specify value either in axis value or angle using the

DirectionUnit

property.

Offset

PositionFactor

 Gets or sets a value that specifies the position of annotation in radius factor.

The following code example explains how to initialize the range pointer in Xamarin SfCircularGauge and .NET MAUI SfRadialGauge.

Xamarin SfCircularGauge .NET MAUI SfRadialGauge 
<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:Scale/> 
    </gauge:SfCircularGauge.Scales>
    <gauge:SfCircularGauge.Annotations>
        <gauge:GaugeAnnotation>
            <gauge:GaugeAnnotation.View>
                <Label Text="128 GB" 
                       FontSize="20" />
            </gauge:GaugeAnnotation.View>
        </gauge:GaugeAnnotation>
    </gauge:SfCircularGauge.Annotations>
</gauge:SfCircularGauge>
SfCircularGauge gauge = new SfCircularGauge();

ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
Scale scale = new Scale();
scales.Add(scale);
gauge.Scales = scales;

GaugeAnnotation annotation = new GaugeAnnotation();
Label label = new Label();
label.Text = "128 GB";
label.FontSize = 20;
annotation.View = label;
gauge.Annotations.Add(annotation);

this.Content = gauge;
 
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <Label Text="256 GB"
                               FontSize="20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.Content = new Label
{
    Text = "128 GB",
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;