Migrate from Xamarin.Forms to .NET MAUI SfCircularProgressBar

19 Sep 202415 minutes to read

To make the migration from the Xamarin SfCircularProgressBar to .NET MAUI SfCircularProgressBar easier, most of the APIs from the Xamarin SfCircularProgressBar were kept in the .NET MAUI SfCircularProgressBar. However, to maintain the consistency of API naming in the .NET MAUI SfCircularProgressBar, 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 SfCircularProgressBar as shown in the following code sample.

Xamarin ProgressBar .NET MAUI ProgressBar

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

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

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

...

SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();

...

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

    ...

    <progressBar:SfCircularProgressBar />
    ...

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

SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();

...

Properties

Xamarin SfCircularProgressBar	.NET MAUI SfCircularProgressBar	Description
Progress	Progress	Gets or sets the value that specifies the current value for the progress.
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.
StartAngle	StartAngle	Gets or sets a value that specifies the StartAngle of the progress bar.
EndAngle	EndAngle	Gets or sets a value that specifies the EndAngle of the progress bar.
Content	Content	Gets or sets a any view to display in the center of circular progress bar.
ProgressColor	*ProgressFill	Gets or sets the brush that paints the interior area of the progress.
TrackColor	*TrackFill	Gets or sets the brush that paints the interior area of the track.
RangeColors	*GradientStops	Gets or sets a collection of ProgressGradientStop to fill the gradient brush to the progress.
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.
AnimationDuration	AnimationDuration	Gets or sets a value that specifies the 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.
IndicatorInnerRadius	*ProgressThickness	Gets or sets a value that specifies the thickness of the progress. You can specify the value either in logical pixel or radius factor using the ThicknessUnit property.
IndicatorOuterRadius	*ProgressRadiusFactor	Gets or sets a value that specifies the outer radius factor of the progress.
TrackInnerRadius	*TrackThickness	Gets or sets a value that specifies the thickness of the track in the circular progress bar. You can specify value either in logical pixel or radius factor using the ThicknessUnit property.
TrackOuterRadius	*TrackRadiusFactor	Gets or sets a value that specifies the outer radius factor of the track.
-	ThicknessUnit	Gets or sets the enum value that indicates to calculate the track and progress thickness either in logical pixel or radius factor.
-	ProgressCornerStyle	Gets or sets the value that specifies the corner style of the progress.
-	TrackCornerStyle	Gets or sets the value that specifies the corner style of the track.
ShowProgressValue	-	Gets or sets a value indicating whether to show the progress value label or not in SfCircularProgressBar.
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 SfCircularProgressBar to maintain the consistency of API naming in the .NET MAUI SfCircularProgressBar.

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

Xamarin

Xamarin
XAML C# <ContentPage xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms"> ... <progressBar:SfCircularProgressBar x:Name="circularProgressBar" EasingEffect="CubicOut" GapWidth="5" SegmentCount="4" IndeterminateEasingEffect="BounceIn" IndeterminateIndicatorWidth="0.7" ProgressColor="Red" TrackColor="Violet" Progress="100" IsIndeterminate="False" Minimum="10" Maximum="90" AnimationDuration="1500" IndeterminateAnimationDuration="2000" IndicatorInnerRadius="0.9" IndicatorOuterRadius="1" TrackInnerRadius="0.9" TrackOuterRadius="1" StartAngle="180" EndAngle="360" ShowProgressValue="False" ValueChanged="SfCircularProgressBar_ValueChanged" ProgressCompleted="SfCircularProgressBar_ProgressCompleted"> <progressBar:SfCircularProgressBar.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:SfCircularProgressBar.RangeColors> <progressBar:SfCircularProgressBar.Content> <Label x:Name="Label" Text="{Binding Source={x:Reference CircularProgressBar},Path=Progress,Mode=TwoWay}"/> </progressBar:SfCircularProgressBar.Content> </progressBar:SfCircularProgressBar> ... </ContentPage> `using Syncfusion.XForms.ProgressBar; ... private void SfCircularProgressBar_ValueChanged(object sender, ProgressValueEventArgs e) { if (e.Progress < 50) { this.Label.TextColor = Color.Red; } else { this.Label.TextColor = Color.Blue; } } private void SfCircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e) { this.Label.TextColor = Color.Green; } ...`
.NET MAUI
XAML C# <ContentPage xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"> ... <progressBar:SfCircularProgressBar x:Name="circularProgressBar" AnimationEasing="{x:Static Easing.CubicOut}" SegmentGapWidth="5" SegmentCount="4" IndeterminateAnimationEasing="{x:Static Easing.BounceIn}" IndeterminateIndicatorWidthFactor="0.7" ProgressFill="Red" TrackFill="Violet" ProgressChanged="CircularProgressBar_ProgressChanged" ProgressCompleted="CircularProgressBar_ProgressCompleted" Progress="100" IsIndeterminate="False" Minimum="10" Maximum="90" AnimationDuration="1500" IndeterminateAnimationDuration="2000" ProgressThickness="10" ProgressRadiusFactor="1" TrackThickness="10" TrackRadiusFactor="1" ProgressCornerStyle="BothCurve" TrackCornerStyle="BothCurve" ThicknessUnit="Pixel" StartAngle="180" EndAngle="360"> <progressBar:SfCircularProgressBar.GradientStops> <progressBar:ProgressGradientStop Color="#00bdaf" Value="0"/> <progressBar:ProgressGradientStop Color="#2f7ecc" Value="50"/> </progressBar:SfCircularProgressBar.GradientStops> <progressBar:SfCircularProgressBar.Content> <Label x:Name="Label" Text="{Binding Source={x:Reference CircularProgressBar},Path=Progress,Mode=TwoWay}"/> </progressBar:SfCircularProgressBar.Content> </progressBar:SfCircularProgressBar> ... </ContentPage> `using Syncfusion.Maui.ProgressBar; ... private void CircularProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e) { if (e.Progress < 50) { this.Label.TextColor = Colors.Red; } else if (e.Progress >= 50) { this.Label.TextColor = Colors.Blue; } } private void CircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e) { this.Label.TextColor = Colors.Green; } ...`

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

    ...     
<progressBar:SfCircularProgressBar x:Name="circularProgressBar"
                                   EasingEffect="CubicOut"
                                   GapWidth="5"
                                   SegmentCount="4"
                                   IndeterminateEasingEffect="BounceIn"
                                   IndeterminateIndicatorWidth="0.7"
                                   ProgressColor="Red"
                                   TrackColor="Violet"
                                   Progress="100"
                                   IsIndeterminate="False"
                                   Minimum="10"
                                   Maximum="90"
                                   AnimationDuration="1500"
                                   IndeterminateAnimationDuration="2000"
                                   IndicatorInnerRadius="0.9"
                                   IndicatorOuterRadius="1"
                                   TrackInnerRadius="0.9"
                                   TrackOuterRadius="1"
                                   StartAngle="180"
                                   EndAngle="360"
                                   ShowProgressValue="False"
                                   ValueChanged="SfCircularProgressBar_ValueChanged"
                                   ProgressCompleted="SfCircularProgressBar_ProgressCompleted">
    <progressBar:SfCircularProgressBar.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:SfCircularProgressBar.RangeColors>
    <progressBar:SfCircularProgressBar.Content>
        <Label x:Name="Label" Text="{Binding Source={x:Reference CircularProgressBar},Path=Progress,Mode=TwoWay}"/>
    </progressBar:SfCircularProgressBar.Content>
</progressBar:SfCircularProgressBar>
    ...
</ContentPage>
using Syncfusion.XForms.ProgressBar;

...
private void SfCircularProgressBar_ValueChanged(object sender, ProgressValueEventArgs e)
{
    if (e.Progress < 50)
    {
        this.Label.TextColor = Color.Red;
    }
    else
    {
        this.Label.TextColor = Color.Blue;
    }
}

private void SfCircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
{
    this.Label.TextColor = Color.Green;
}

...

.NET MAUI

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

...
<progressBar:SfCircularProgressBar x:Name="circularProgressBar"
                                   AnimationEasing="{x:Static Easing.CubicOut}"
                                   SegmentGapWidth="5"
                                   SegmentCount="4"
                                   IndeterminateAnimationEasing="{x:Static Easing.BounceIn}"
                                   IndeterminateIndicatorWidthFactor="0.7"
                                   ProgressFill="Red"
                                   TrackFill="Violet"
                                   ProgressChanged="CircularProgressBar_ProgressChanged"
                                   ProgressCompleted="CircularProgressBar_ProgressCompleted"
                                   Progress="100"
                                   IsIndeterminate="False"
                                   Minimum="10"
                                   Maximum="90"
                                   AnimationDuration="1500"
                                   IndeterminateAnimationDuration="2000"
                                   ProgressThickness="10"
                                   ProgressRadiusFactor="1"
                                   TrackThickness="10"
                                   TrackRadiusFactor="1"
                                   ProgressCornerStyle="BothCurve"
                                   TrackCornerStyle="BothCurve"
                                   ThicknessUnit="Pixel"
                                   StartAngle="180"
                                   EndAngle="360">
    <progressBar:SfCircularProgressBar.GradientStops>
        <progressBar:ProgressGradientStop Color="#00bdaf" Value="0"/>
        <progressBar:ProgressGradientStop Color="#2f7ecc" Value="50"/>
    </progressBar:SfCircularProgressBar.GradientStops>

    <progressBar:SfCircularProgressBar.Content>
        <Label x:Name="Label" Text="{Binding Source={x:Reference CircularProgressBar},Path=Progress,Mode=TwoWay}"/>
    </progressBar:SfCircularProgressBar.Content>
</progressBar:SfCircularProgressBar>
...

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

private void CircularProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e)
{
    if (e.Progress < 50)
    {
        this.Label.TextColor = Colors.Red;
    }
    else if (e.Progress >= 50)
    {
        this.Label.TextColor = Colors.Blue;
    }
}

private void CircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
{
    this.Label.TextColor = Colors.Green;
}

...

Unsupported features from Xamarin.Forms

ShowProgressValue support has not been provided in the SfCircularProgressBar. Instead, you can achieve it using the Content property. Please visit the Custom Content page for more details about the Content property.