Migrate from Xamarin.Forms SfLinearGauge to .NET MAUI SfLinearGauge

28 Apr 202216 minutes to read

To make the migration from the Xamarin SfLinearGauge to the .NET MAUI SfLinearGauge easier, most of the similar APIs from the Xamarin SfLinearGauge were kept in the.NET MAUI SfLinearGauge. Also, the APIs has been restructured by considering various use cases and maintaining API consistency. Please find the difference in the following topics.

Initialize control

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

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

        <gauge:SfLinearGauge/>

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

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

        <gauge:SfLinearGauge/>

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

SfLinearGauge linearGauge = new SfLinearGauge();
this.Content = linearGauge;

Scale

In the .NET MAUI linear gauge, we do not expose APIs for adding scale objects and their collections, like in the Xamarin linear gauge. You can add scale element settings such as axis line, ticks, labels, ranges, and pointers directly to the linear gauge.
Also, for creating multiple scales in the .NET MAUI, you can use multiple linear gauge objects. Since control measures are based on their inner elements.

Xamarin SfLinearGauge .NET MAUI SfLinearGauge Description

MinimumValue

Minimum

 Gets or sets the minimum value of the axis.

MaximumValue

Maximum

 Gets or sets the maximum value of the axis.

ScalePosition

IsInversed

 Gets or sets a value indicating whether it inverts the axis from right to left for a horizontal linear gauge or top to bottom for a vertical linear gauge.

OpposedPosition

IsMirrored

 Gets or sets a value indicating whether the linear gauge should be mirrored.

MajorTickSettings

MajorTickStyle

 Gets or sets a value to customize the style of default major ticks.

MinorTickSettings

MinorTickStyle

 Gets or sets a value to customize the style of default minor ticks.

MaximumLabels

MaximumLabelsCount

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

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

Xamarin SfLinearGauge .NET MAUI SfLinearGauge 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Scales>
        <gauge:LinearScale ScaleBarSize="20" 
                           CornerRadiusType="Both"
                           ScaleBarColor="Blue"
                           MinimumValue="0"
                           MaximumValue="100"
                           Interval="10"
                           OpposedPosition="True"
                           ScalePosition="BackWard">
        </gauge:LinearScale>
    </gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();

LinearScale linearScale = new LinearScale();
linearScale.ScaleBarSize = 20;
linearScale.CornerRadiusType = CornerRadiusType.Both;
linearScale.CornerRadius = 10;
linearScale.ScaleBarSize = 20;
linearScale.ScaleBarColor = Color.Blue;
linearScale.MinimumValue = 0;
linearScale.MaximumValue = 100;
linearScale.Interval = 10;
linearScale.OpposedPosition = true;
linearScale.ScalePosition = ScalePosition.BackWard;
linearGauge.Scales.Add(linearScale);

this.Content = linearGauge;
 
<gauge:SfLinearGauge IsInversed="True"
                     IsMirrored="True"
                     Minimum="0"
                     Maximum="100"
                     Interval="10">
    <gauge:SfLinearGauge.LineStyle>
        <gauge:LinearLineStyle Thickness="20"
                               CornerStyle="BothCurve"/>
    </gauge:SfLinearGauge.LineStyle>
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
gauge.IsInversed = true;
gauge.IsMirrored = true;
gauge.Minimum = 0;
gauge.Maximum = 100;
gauge.Interval = 10;
gauge.LineStyle.Thickness = 20;
gauge.LineStyle.Fill = new SolidColorBrush(Colors.Blue);
gauge.LineStyle.CornerStyle = CornerStyle.BothCurve;
this.Content = gauge;

Range

Xamarin SfLinearGauge .NET MAUI SfLinearGauge Description

Color

Fill

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

Offset

Position

 Gets or sets the value that indicates the position of the range inside, or cross, or outside the axis line.

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

Xamarin SfLinearGauge .NET MAUI SfLinearGauge 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Scales>
        <gauge:LinearScale >
            <gauge:LinearScale.Ranges>
                <gauge:LinearRange StartValue="0" 
                                   EndValue="33" 
                                   Color="#ffF45656"
                                   Offset="-40"/>
            </gauge:LinearScale.Ranges>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();

LinearScale linearScale = new LinearScale();

LinearRange linearRange = new LinearRange();
linearRange.StartValue = 0;
linearRange.EndValue = 33;
linearRange.Offset = -40;
linearRange.Color = Color.FromHex("#ffF45656");
linearScale.Ranges.Add(linearRange);

linearScale.Ranges.Add(linearRange2);
linearGauge.Scales.Add(linearScale);
this.Content = linearGauge;
 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Ranges>
        <gauge:LinearRange StartValue="0" EndValue="33" 
                                   Fill="#ffF45656" Position="Cross"/>
    </gauge:SfLinearGauge.Ranges>
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
gauge.Ranges.Add(new LinearRange()
{
    StartValue = 0,
    EndValue = 33,
    Fill = new SolidColorBrush(Color.FromArgb("ffF45656")),
    Position = GaugeElementPosition.Outside
});
this.Content = gauge;

Pointers

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

Xamarin SfLinearGauge .NET MAUI SfLinearGauge Description

BarPointer

BarPointer

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

SymbolPointer

 Divided into

LinearShapePointer

and

LinearContentPointer

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

Also, in the .NET MAUI, bar pointer can be added to the BarPointers collection, and a shape and content pointer can be added to the MarkerPointers collection.

NOTE

In .NET MAUI SfLinearGauge SymbolPointer has been divided into two types. They are LinearShapePointer and LinearContentPointer.

Bar pointer

Xamarin SfLinearGauge .NET MAUI SfLinearGauge Description

CornerRadiusType

CornerStyle

 Gets or sets a CornerStyle enumeration value that describes the corner/edge style of the BarPointer.

Color

Fill

 Gets or sets a value that indicates the brush used to paint the pointer interior.

Thickness

PointerSize

 Gets or sets the value that specifies the height of BarPointer for a horizontal linear gauge, or the width of BarPointer for a vertical linear gauge.

The following code example, explains how to initialize the bar pointer in Xamarin SfLinearGauge and .NET MAUI SfLinearGauge.

Xamarin SfLinearGauge .NET MAUI SfLinearGauge 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Scales>
        <gauge:LinearScale >
            <gauge:LinearScale.Pointers>
                <gauge:BarPointer  Value="75" 
                                   Color = "#36d1dc" />
            </gauge:LinearScale.Pointers>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();

LinearScale linearScale = new LinearScale();

BarPointer barPointer = new BarPointer();
barPointer.Value = 75;
barPointer.Color = Color.FromHex("#36d1dc");

linearScale.Pointers.Add(barPointer);
linearGauge.Scales.Add(linearScale);
this.Content = linearGauge;
 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.BarPointers>
        <gauge:BarPointer Value="75" 
                          PointerSize="10"
                          Fill="#36d1dc"/>
    </gauge:SfLinearGauge.BarPointers>
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();

gauge.BarPointers.Add(new BarPointer
{
    Value =75,
    PointerSize=10,
    Fill = Color.FromHex("#36d1dc"),
});

this.Content = gauge;

Symbol pointer

</tr>
Xamarin SfLinearGauge .NET MAUI SfLinearGauge Description

MarkerShape

ShapeType

in

LinearShapePointer

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

Color

Fill

in

LinearShapePointer

 Gets or sets a value that indicates the brush used to paint the pointer interior.

SymbolPointerPosition

Alignment

in

LinearShapePointer

 Gets or sets the placement (start, center or end) of the marker pointer relative to its position.

The following code example, explains how to initialize the shape pointer in Xamarin SfLinearGauge and .NET MAUI SfLinearGauge.

Xamarin SfLinearGauge .NET MAUI SfLinearGauge 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Scales>
        <gauge:LinearScale>
            <gauge:LinearScale.Pointers>
                <gauge:SymbolPointer Value ="30" 
                                     Color= "#5b86e5"/>
            </gauge:LinearScale.Pointers>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();

SymbolPointer symbolPointer = new SymbolPointer();
symbolPointer.Value = 30;
symbolPointer.Color = Color.FromHex("#5b86e5");
linearScale.Pointers.Add(symbolPointer);

linearGauge.Scales.Add(linearScale);
this.Content = linearGauge;
 
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearShapePointer Value="30"
                                  Fill="#5b86e5"
                                  ShapeType="Triangle"
                                  Position="Inside"/>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
gauge.MinorTicksPerInterval = 0;
gauge.Interval = 10;

gauge.MarkerPointers.Add(new LinearShapePointer
{
    Value = 30,
    Fill = Color.FromHex("#5b86e5"),
    ShapeType = ShapeType.Triangle,
    Position = GaugeElementPosition.Inside
});

this.Content = gauge;

Content pointer

The ContentPointer in the .NET MAUI SfLinearGauge allows 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 SfLinearGauge .NET MAUI SfLinearGauge Description
-

Content

 Gets or sets the any visual content of a LinearContentPointer.

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

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearContentPointer Value="50" Alignment="End">
            <gauge:LinearContentPointer.Content>
                <Grid HeightRequest="25" WidthRequest="25">
                    <RoundRectangle CornerRadius="5" 
                                            Fill="#ff0074E3"/>
                    <Label Text="50" HorizontalOptions="Center"
                               VerticalOptions="Center" TextColor="White"/>
                </Grid>
            </gauge:LinearContentPointer.Content>
        </gauge:LinearContentPointer>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();

Grid views = new Grid() { HeightRequest = 25, WidthRequest = 25 };
views.Add(new RoundRectangle()
{
	Fill = new SolidColorBrush(Color.FromArgb("#ff0074E3")),
	CornerRadius = 5
});
views.Add(new Label()
{
	Text = "50",
	TextColor = Colors.White,
	HorizontalOptions = LayoutOptions.Center,
	VerticalOptions = LayoutOptions.Center
});

LinearContentPointer contentPointer = new LinearContentPointer();
contentPointer.Value = 50;
contentPointer.Alignment = GaugeAlignment.End;
contentPointer.Content = views;
gauge.MarkerPointers.Add(contentPointer);
this.Content = gauge;

Unsupported feature

The Annotation feature cannot be supported in the MAUI SfLinearGauge, since this feature requirement can be met using the content pointer support itself. So, you can use the content pointer as an annotation in.NET MAUI SfLinearGauge.