Migrate from Xamarin.Forms to .NET MAUI SfLinearProgressBar

19 Sep 202413 minutes to read

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

Initialize control

To initialize the control, import the ProgressBar namespace and initialize the SfLinearProgressBar as shown in the following code sample.

Xamarin SfLinearProgressBar .NET MAUI SfLinearProgressBar

Xamarin SfLinearProgressBar	.NET MAUI SfLinearProgressBar
XAML C# `<ContentPage xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms"> ... <progressBar:SfLinearProgressBar /> ... </ContentPage>` `using Syncfusion.XForms.ProgressBar; ... SfLinearProgressBar linearProgressBar = new SfLinearProgressBar(); ...`	XAML C# `<ContentPage xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"> ... <progressBar:SfLinearProgressBar /> ... </ContentPage>` `using Syncfusion.Maui.ProgressBar; ... SfLinearProgressBar linearProgressBar = new SfLinearProgressBar(); ...`

XAML
C#
<ContentPage
    xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms">

    ...     
    <progressBar:SfLinearProgressBar />
    ...
</ContentPage>
using Syncfusion.XForms.ProgressBar;

...

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();

...

XAML
C#
<ContentPage
    xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar">

    ...
    <progressBar:SfLinearProgressBar />
    ...

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

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();

...

Properties

Xamarin SfLinearProgressBar	.NET MAUI SfLinearProgressBar	Description
Progress	Progress	Gets or sets the value that specifies the current value for the progress.
SecondaryProgress	SecondaryProgress	Gets or sets the secondary progress value for the SfLinearProgressBar.
IsIndeterminate	IsIndeterminate	Gets or sets a value indicating whether the progress bar is in indeterminate state or not.
Minimum	Minimum	Gets or sets the minimum possible value of the progress bar. The progress bar range starts from this value.
Maximum	Maximum	Gets or sets the maximum possible value of the progress bar. The progress bar ends at this value.
ProgressColor	*ProgressFill	Gets or sets the brush that paints the interior area of the progress.
SecondaryProgressColor	*SecondaryProgressFill	Gets or sets the brush that paints the interior area of the secondary progress.
TrackColor	*TrackFill	Gets or sets the brush that paints the interior area of the track.
SegmentCount	SegmentCount	Gets or sets the value that determine the segments count of progress bar.
GapWidth	*SegmentGapWidth	Gets or sets the value that determines the gap between the segments.
RangeColors	*GradientStops	Gets or sets a collection of ProgressGradientStop to fill the gradient brush to the progress.
AnimationDuration	AnimationDuration	Gets or sets a value that specifies the progress animation duration in milliseconds.
SecondaryAnimationDuration	SecondaryAnimationDuration	Gets or sets a value that specifies the secondary progress animation duration in milliseconds.
IndeterminateAnimationDuration	IndeterminateAnimationDuration	Gets or sets a value that specifies the indeterminate animation duration in milliseconds.
EasingEffect	*AnimationEasing	Gets or sets a value that specifies the easing effect for progress animation.
IndeterminateEasingEffect	*IndeterminateAnimationEasing	Gets or sets a value that specifies the easing effect for indeterminate animation.
IndeterminateIndicatorWidth	*IndeterminateIndicatorWidthFactor	Gets or sets the value that specifies width of the indeterminate indicator.
TrackHeight	Divided into TrackHeight , ProgressHeight and *SecondaryProgressHeight	Gets or sets a value to determine the height of track, progress and secondary progress.
CornerRadius	Divided into TrackCornerRadius , ProgressCornerRadius and *SecondaryProgressCornerRadius	Gets or sets a value to determine the corner radius of the track, progress, and secondary progress.
ValueChanged	*ProgressChanged	The value change event occurs when the Progress is changed.
ProgressCompleted	ProgressCompleted	The progress completed event occurs when Progress value attains Maximum value in ProgressBar.

NOTE

All the (*) marked APIs are renamed from Xamarin SfLinearProgressBar to maintain the consistency of API naming in the .NET MAUI SfLinearProgressBar.

The following code example explains how to use the properties in the Xamarin linear progress bar and the .NET MAUI linear progress bar.

Xamarin

Xamarin
XAML C# <ContentPage xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms"> ... <progressBar:SfLinearProgressBar x:Name="linearProgressBar" EasingEffect="CubicOut" GapWidth="5" SegmentCount="4" IndeterminateEasingEffect="BounceIn" IndeterminateIndicatorWidth="0.7" ProgressColor="Red" TrackColor="Violet" ValueChanged="LinearProgressBar_ValueChanged" ProgressCompleted="LinearProgressBar_ProgressCompleted" Progress="100" IsIndeterminate="False" Minimum="10" Maximum="90" AnimationDuration="1500" IndeterminateAnimationDuration="2000" CornerRadius="5" SecondaryProgressColor="Yellow" SecondaryProgress="50" TrackHeight="10" SecondaryAnimationDuration="2000"> <progressBar:SfLinearProgressBar.RangeColors> <progressBar:RangeColorCollection> <progressBar:RangeColor IsGradient="True" Color="#00bdaf" Start="0" End="25"/> <progressBar:RangeColor IsGradient="True" Color="#2f7ecc" Start="25" End="50"/> </progressBar:RangeColorCollection> </progressBar:SfLinearProgressBar.RangeColors> </progressBar:SfLinearProgressBar> ... </ContentPage> `using Syncfusion.XForms.ProgressBar; ... private void LinearProgressBar_ValueChanged(object sender, ProgressValueEventArgs e) { var value = e.Progress; } private void LinearProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e) { var value = e.Progress; } ...`
.NET MAUI
XAML C# <ContentPage xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"> ... <progressBar:SfLinearProgressBar x:Name="linearProgressBar" AnimationEasing="{x:Static Easing.CubicOut}" SegmentGapWidth="5" SegmentCount="4" IndeterminateAnimationEasing="{x:Static Easing.BounceIn}" IndeterminateIndicatorWidthFactor="0.7" ProgressFill="Red" TrackFill="Violet" ProgressChanged="LinearProgressBar_ProgressChanged" ProgressCompleted="LinearProgressBar_ProgressCompleted" Progress="100" IsIndeterminate="False" Minimum="10" Maximum="90" AnimationDuration="1500" IndeterminateAnimationDuration="2000" ProgressCornerRadius="5" TrackCornerRadius="5" SecondaryProgressCornerRadius="5" SecondaryProgressFill="Yellow" SecondaryProgress="50" TrackHeight="10" ProgressHeight="10" SecondaryProgressHeight="10" SecondaryAnimationDuration="2000"> <progressBar:SfLinearProgressBar.GradientStops> <progressBar:ProgressGradientStop Color="#00bdaf" Value="0"/> <progressBar:ProgressGradientStop Color="#2f7ecc" Value="50"/> </progressBar:SfLinearProgressBar.GradientStops> </progressBar:SfLinearProgressBar> ... </ContentPage> `using Syncfusion.Maui.ProgressBar; ... private void LinearProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e) { var value = e.Progress; } private void LinearProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e) { var value = e.Progress; } ...`

XAML
C#
<ContentPage
    xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms">

    ...     
<progressBar:SfLinearProgressBar x:Name="linearProgressBar" 
                                 EasingEffect="CubicOut"
                                 GapWidth="5"
                                 SegmentCount="4"
                                 IndeterminateEasingEffect="BounceIn"
                                 IndeterminateIndicatorWidth="0.7"
                                 ProgressColor="Red"
                                 TrackColor="Violet"
                                 ValueChanged="LinearProgressBar_ValueChanged"
                                 ProgressCompleted="LinearProgressBar_ProgressCompleted"
                                 Progress="100"
                                 IsIndeterminate="False"
                                 Minimum="10"
                                 Maximum="90"
                                 AnimationDuration="1500"
                                 IndeterminateAnimationDuration="2000"
                                 CornerRadius="5"
                                 SecondaryProgressColor="Yellow"
                                 SecondaryProgress="50"
                                 TrackHeight="10"
                                 SecondaryAnimationDuration="2000">
    <progressBar:SfLinearProgressBar.RangeColors>
        <progressBar:RangeColorCollection>
            <progressBar:RangeColor IsGradient="True" Color="#00bdaf" Start="0" End="25"/>
            <progressBar:RangeColor IsGradient="True" Color="#2f7ecc" Start="25" End="50"/>
        </progressBar:RangeColorCollection>
    </progressBar:SfLinearProgressBar.RangeColors>
</progressBar:SfLinearProgressBar>
    ...
</ContentPage>
using Syncfusion.XForms.ProgressBar;

...

 private void LinearProgressBar_ValueChanged(object sender, ProgressValueEventArgs e)
 {
     var value = e.Progress;
 }

 private void LinearProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
 {
     var value = e.Progress;
 }

...

.NET MAUI

XAML
C#
<ContentPage
    xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar">

...
 
 <progressBar:SfLinearProgressBar x:Name="linearProgressBar" 
                                  AnimationEasing="{x:Static Easing.CubicOut}"
                                  SegmentGapWidth="5"
                                  SegmentCount="4"
                                  IndeterminateAnimationEasing="{x:Static Easing.BounceIn}"
                                  IndeterminateIndicatorWidthFactor="0.7"
                                  ProgressFill="Red"
                                  TrackFill="Violet"
                                  ProgressChanged="LinearProgressBar_ProgressChanged"
                                  ProgressCompleted="LinearProgressBar_ProgressCompleted"
                                  Progress="100"
                                  IsIndeterminate="False"
                                  Minimum="10"
                                  Maximum="90"
                                  AnimationDuration="1500"
                                  IndeterminateAnimationDuration="2000"
                                  ProgressCornerRadius="5"
                                  TrackCornerRadius="5"
                                  SecondaryProgressCornerRadius="5"
                                  SecondaryProgressFill="Yellow"
                                  SecondaryProgress="50"
                                  TrackHeight="10"
                                  ProgressHeight="10"
                                  SecondaryProgressHeight="10"
                                  SecondaryAnimationDuration="2000">
    <progressBar:SfLinearProgressBar.GradientStops>
        <progressBar:ProgressGradientStop Color="#00bdaf" Value="0"/>
        <progressBar:ProgressGradientStop Color="#2f7ecc" Value="50"/>
    </progressBar:SfLinearProgressBar.GradientStops>

</progressBar:SfLinearProgressBar>

...

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

private void LinearProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e)
{
    var value = e.Progress;
}

private void LinearProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
{
    var value = e.Progress;
}

...

Unsupported features from Xamarin.Forms

In Xamarin, the Padding is used to adjust the padding of the progress and secondary progress at all the four (left, top, right, and bottom) sides. But in .NET MAUI, it can be achieved with the ProgressPadding, ProgressHeight, and SecondaryProgressHeight properties. Please refer to these thickness and padding documentation for details.