13 Jul 202619 minutes to read
Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the .NET MAUI Linear Gauge control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.
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 have 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. In .NET MAUI, you also need to register the Syncfusion core handler by calling builder.ConfigureSyncfusionCore() in the MauiProgram.cs file. For more information, refer to the Getting Started guide.
| Xamarin SfLinearGauge |
.NET MAUI SfLinearGauge |
<ContentPage
xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms">
<gauge:SfLinearGauge/>
</ContentPage>
using Syncfusion.SfGauge.XForms;
//code omitted for brevity
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;
//code omitted for brevity
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 .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. |
|
ScaleBarSize
|
Thickness
in [LinearLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearLineStyle.html) |
Gets or sets the thickness of the axis line. |
|
ScaleBarColor
|
Fill
in [LinearLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearLineStyle.html) |
Gets or sets the brush that paints the axis line. |
|
CornerRadiusType
|
CornerStyle
in [LinearLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearLineStyle.html) |
Gets or sets the corner style of the axis line. |
|
Interval
|
Interval
|
Gets or sets the interval value for the axis labels and major ticks. |
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.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. |
|
StartValue
|
StartValue
|
Gets or sets the start value of the range. |
|
EndValue
|
EndValue
|
Gets or sets the end value of the range. |
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);
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.Cross
});
this.Content = gauge;
|
Pointers
In Xamarin SfLinearGauge and .NET MAUI SfLinearGauge, pointers can be classified as mentioned in the following table.
Also, in .NET MAUI, the bar pointer can be added to the BarPointers collection, and the shape and content pointers can be added to the MarkerPointers collection.
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 = new SolidColorBrush(Color.FromHex("#36d1dc")),
});
this.Content = gauge;
|
Symbol pointer
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();
LinearScale linearScale = new LinearScale();
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.MarkerPointers.Add(new LinearShapePointer
{
Value = 30,
Fill = new SolidColorBrush(Color.FromHex("#5b86e5")),
ShapeType = ShapeType.Triangle,
Position = GaugeElementPosition.Inside
});
this.Content = gauge;
|
Content pointer
The LinearContentPointer in the .NET MAUI SfLinearGauge allows using any content, image, or text as a pointer. In Xamarin, you can add an image as a pointer through the ImageSource property of the SymbolPointer, and in .NET MAUI, you can directly add an image control as a pointer in the content pointer. The Xamarin ImageSource property maps to using a LinearContentPointer with an Image control as its Content.
| Xamarin SfLinearGauge |
.NET MAUI SfLinearGauge |
Description |
|
ImageSource
|
Content
|
Gets or sets any visual content of a LinearContentPointer, such as an image, text, or custom view. |
The following code example explains how to initialize the content pointer in .NET MAUI SfLinearGauge. The full content pointer feature is not applicable in the Xamarin SfLinearGauge; however, the Xamarin ImageSource approach for image pointers is shown alongside for comparison.
| Xamarin SfLinearGauge (ImageSource) |
.NET MAUI SfLinearGauge (LinearContentPointer) |
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale>
<gauge:LinearScale.Pointers>
<gauge:SymbolPointer Value="50"
ImageSource="pin.png"/>
</gauge:LinearScale.Pointers>
</gauge:LinearScale>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
SymbolPointer symbolPointer = new SymbolPointer();
symbolPointer.Value = 50;
symbolPointer.ImageSource = "pin.png";
linearScale.Pointers.Add(symbolPointer);
linearGauge.Scales.Add(linearScale);
this.Content = linearGauge;
|
<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 in the Xamarin SfLinearGauge allowed adding custom views (such as text or images) at specific positions over the gauge. This feature cannot be supported in the .NET MAUI SfLinearGauge, because this requirement can be met using the content pointer support itself. So, you can use the content pointer as an annotation in .NET MAUI SfLinearGauge.