Migrate from Xamarin.Forms to .NET MAUI SfCircularProgressBar

30 Sep 202215 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
<ContentPage
    xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms">

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

...

SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();

...
<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
<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
<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.