Class SfCircularProgressBar

Represents SfCircularProgressBar class, which is a UI control that displays a circular progress indicator. This control allows for visualizing the progress of an operation through a customizable bar It supports features such as determinate and indeterminate progress modes, secondary progress indication, customizable appearance including track and progress colors, segment divisions, corner radius customization, and animation effects.

Inheritance

System.Object

SfView

ProgressBarBase

SfCircularProgressBar

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

ProgressBarBase.AnimationDuration

ProgressBarBase.AnimationDurationProperty

ProgressBarBase.AnimationEasing

ProgressBarBase.AnimationEasingProperty

ProgressBarBase.GradientStops

ProgressBarBase.GradientStopsProperty

ProgressBarBase.IndeterminateAnimationDuration

ProgressBarBase.IndeterminateAnimationDurationProperty

ProgressBarBase.IndeterminateAnimationEasing

ProgressBarBase.IndeterminateAnimationEasingProperty

ProgressBarBase.IndeterminateIndicatorWidthFactor

ProgressBarBase.IndeterminateIndicatorWidthFactorProperty

ProgressBarBase.IsIndeterminate

ProgressBarBase.IsIndeterminateProperty

ProgressBarBase.Maximum

ProgressBarBase.MaximumProperty

ProgressBarBase.Minimum

ProgressBarBase.MinimumProperty

ProgressBarBase.OnBindingContextChanged()

ProgressBarBase.OnDraw(ICanvas, RectF)

ProgressBarBase.Progress

ProgressBarBase.ProgressChanged

ProgressBarBase.ProgressCompleted

ProgressBarBase.ProgressFill

ProgressBarBase.ProgressFillProperty

ProgressBarBase.ProgressProperty

ProgressBarBase.SegmentCount

ProgressBarBase.SegmentCountProperty

ProgressBarBase.SegmentGapWidth

ProgressBarBase.SegmentGapWidthProperty

ProgressBarBase.SetProgress(Double, Nullable<Double>, Easing)

ProgressBarBase.TrackFill

ProgressBarBase.TrackFillProperty

SfView.Children

SfView.ClipToBounds

SfView.Padding

Namespace: Syncfusion.Maui.Toolkit.ProgressBar

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfCircularProgressBar : ProgressBarBase, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IParentThemeElement, IThemeElement

<progressBar:SfCircularProgressBar Minimum="0"
                                   Maximum="100"
                                   TrackFill="Blue"
                                   Progress="70"
                                   ProgressFill="Yellow"
                                   SegmentCount="1"
                                   SegmentGapWidth="10"
                                   IsIndeterminate="False"
                                   IndeterminateIndicatorWidthFactor="0.2"
                                   IndeterminateAnimationEasing="{x:Static Easing.SpringIn}"
                                   IndeterminateAnimationDuration="1500"
                                   AnimationEasing="{x:Static Easing.SpringOut}"
                                   AnimationDuration="4000"
                                   StartAngle="0"
                                   EndAngle="0"
                                   TrackRadiusFactor="0.9"
                                   TrackThickness="1"
                                   ThicknessUnit="Factor"
                                   ProgressRadiusFactor="0.7"
                                   ProgressThickness="0.7"
                                   ProgressCompleted="SfCircularProgressBar_ProgressCompleted"
                                   ProgressChanged="SfCircularProgressBar_ProgressChanged">

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

    <progressBar:SfCircularProgressBar.GradientStops>
           <progressBar:ProgressGradientStop Color="Yellow" Value="30" />
           <progressBar:ProgressGradientStop Color="Green" Value="60" />
    </progressBar:SfCircularProgressBar.GradientStops>
</progressBar:SfCircularProgressBar>

private void SfCircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
{
   DisplayAlert("ProgressCompleted", "Progress: " + e.Progress, "Ok");
}
private void SfCircularProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e)
{
    DisplayAlert("ValueChanged", "Progress: " + e.Progress, "Ok");
}

Constructors

SfCircularProgressBar()

Initializes a new instance of the SfCircularProgressBar class.

Declaration

public SfCircularProgressBar()

Examples

XAML
C#

<progressBar:SfCircularProgressBar Minimum="0"
                                   Maximum="100"
                                   TrackFill="Blue"
                                   Progress="70"
                                   ProgressFill="Yellow"
                                   SegmentCount="1"
                                   SegmentGapWidth="10"
                                   IsIndeterminate="False"
                                   IndeterminateIndicatorWidthFactor="0.2"
                                   IndeterminateAnimationEasing="{x:Static Easing.SpringIn}"
                                   IndeterminateAnimationDuration="1500"
                                   AnimationEasing="{x:Static Easing.SpringOut}"
                                   AnimationDuration="4000"
                                   StartAngle="0"
                                   EndAngle="0"
                                   TrackRadiusFactor="0.9"
                                   TrackThickness="1"
                                   ThicknessUnit="Factor"
                                   ProgressRadiusFactor="0.7"
                                   ProgressThickness="0.7"
                                   ProgressCompleted="SfCircularProgressBar_ProgressCompleted"
                                   ProgressChanged="SfCircularProgressBar_ProgressChanged">

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

    <progressBar:SfCircularProgressBar.GradientStops>
           <progressBar:ProgressGradientStop Color="Yellow" Value="30"/>
           <progressBar:ProgressGradientStop Color="Green" Value="60"/>
    </progressBar:SfCircularProgressBar.GradientStops>
</progressBar:SfCircularProgressBar>

private void SfCircularProgressBar_ProgressCompleted(object sender, ProgressValueEventArgs e)
{
   DisplayAlert("ProgressCompleted", "Progress: " + e.Progress, "Ok");
}
private void SfCircularProgressBar_ProgressChanged(object sender, ProgressValueEventArgs e)
{
    DisplayAlert("ValueChanged", "Progress: " + e.Progress, "Ok");
}

Fields

ContentProperty

Identifies the Content bindable property.

Declaration

public static readonly BindableProperty ContentProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Content bindable property.

EndAngleProperty

Identifies the EndAngle bindable property.

Declaration

public static readonly BindableProperty EndAngleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EndAngle bindable property.

ProgressCornerStyleProperty

Identifies the ProgressCornerStyle bindable property.

Declaration

public static readonly BindableProperty ProgressCornerStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ProgressCornerStyle bindable property.

ProgressRadiusFactorProperty

Identifies the ProgressRadiusFactor bindable property.

Declaration

public static readonly BindableProperty ProgressRadiusFactorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ProgressRadiusFactor bindable property.

ProgressThicknessProperty

Identifies the ProgressThickness bindable property.

Declaration

public static readonly BindableProperty ProgressThicknessProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ProgressThickness bindable property.

StartAngleProperty

Identifies the StartAngle bindable property.

Declaration

public static readonly BindableProperty StartAngleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for StartAngle bindable property.

ThicknessUnitProperty

Identifies the ThicknessUnit bindable property.

Declaration

public static readonly BindableProperty ThicknessUnitProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ThicknessUnit bindable property.

TrackCornerStyleProperty

Identifies the TrackCornerStyle bindable property.

Declaration

public static readonly BindableProperty TrackCornerStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TrackCornerStyle bindable property.

TrackRadiusFactorProperty

Identifies the TrackRadiusFactor bindable property.

Declaration

public static readonly BindableProperty TrackRadiusFactorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TrackRadiusFactor bindable property.

TrackThicknessProperty

Identifies the TrackThickness bindable property.

Declaration

public static readonly BindableProperty TrackThicknessProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TrackThickness bindable property.

Properties

Content

Gets or sets a any view to display in the center of circular progress bar.

Declaration

public View Content { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.View	An object that contains the progress bar visual content. The default value is `null`.

Examples

XAML
C#

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

SfCircularProgressBar progressBar = new SfCircularProgressBar();
Label label = new Label();
label.SetBinding(Label.TextProperty, new Binding("Progress", source: progressBar));
progressBar.Progress = 50;
progressBar.Content = label;
this.Content = progressBar;

EndAngle

Gets or sets a value that specifies the EndAngle of the progress bar.

Declaration

public double EndAngle { get; set; }

Property Value

Type	Description
System.Double	It defines the end angle of the progress bar. The default value is `630`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar EndAngle="90" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.EndAngle = 90;
this.Content = progressBar;

ProgressCornerStyle

Gets or sets the value that specifies the corner style of the progress.

Declaration

public CornerStyle ProgressCornerStyle { get; set; }

Property Value

Type	Description
CornerStyle	One of the enumeration values that specifies the corner style of the progress in progress bar. The default is BothFlat.

Examples

XAML
C#

<progressBar:SfCircularProgressBar ProgressCornerStyle="BothCurve"
                                   Progress="50" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.ProgressCornerStyle = CornerStyle.BothCurve;
progressBar.Progress = 50;
this.Content = progressBar;

ProgressRadiusFactor

Gets or sets a value that specifies the outer radius factor of the progress.

Declaration

public double ProgressRadiusFactor { get; set; }

Property Value

Type	Description
System.Double	It defines the radius factor of the progress. The default value is `0.9`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar ProgressRadiusFactor="0.5"
                                   Progress="75" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.ProgressRadiusFactor = 0.5;
progressBar.Progress = 75;
this.Content = progressBar;

ProgressThickness

Gets or sets a value that specifies the thickness for the progress. You can specify value either in logical pixel or radius factor using the ThicknessUnit property.

Declaration

public double ProgressThickness { get; set; }

Property Value

Type	Description
System.Double	The default value is `5`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar Progress="75"
                                   ProgressThickness="20" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.Progress = 75;
progressBar.ProgressThickness = 20;
this.Content = progressBar;

StartAngle

Gets or sets a value that specifies the StartAngle of the progress bar.

Declaration

public double StartAngle { get; set; }

Property Value

Type	Description
System.Double	It defines the start angle of the progress bar. The default value is `270`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar StartAngle="90" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.StartAngle = 90;
this.Content = progressBar;

ThicknessUnit

Gets or sets enum value that indicates to calculate the track and progress thickness either in logical pixel or radius factor.

Declaration

public SizeUnit ThicknessUnit { get; set; }

Property Value

Type	Description
SizeUnit	One of the SizeUnit enumeration that specifies how the thickness unit value is considered. The default mode is Pixel.

Examples

XAML
C#

<progressBar:SfCircularProgressBar ThicknessUnit="Factor"
                                   Progress="100"
                                   TrackThickness="0.05"
                                   ProgressRadiusFactor="0.85"
                                   ProgressThickness="1" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.ThicknessUnit = SizeUnit.Factor;
progressBar.Progress = 100;
progressBar.TrackThickness = 0.05;
progressBar.ProgressRadiusFactor = 0.85;
progressBar.ProgressThickness = 1;
this.Content = progressBar;

TrackCornerStyle

Gets or sets the value that specifies the corner style of the track.

Declaration

public CornerStyle TrackCornerStyle { get; set; }

Property Value

Type	Description
CornerStyle	One of the enumeration values that specifies the corner style of the track in progress bar. The default is BothFlat.

Examples

XAML
C#

<progressBar:SfCircularProgressBar StartAngle="180"
                                   EndAngle="360"
                                   TrackCornerStyle="BothCurve" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.StartAngle = 180;
progressBar.EndAngle = 360;
progressBar.TrackCornerStyle = CornerStyle.BothCurve;
this.Content = progressBar;

TrackRadiusFactor

Gets or sets a value that specifies the outer radius factor of the track.

Declaration

public double TrackRadiusFactor { get; set; }

Property Value

Type	Description
System.Double	This value ranges from 0 to 1. It defines the radius factor of the track. The default value is `0.9`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar TrackRadiusFactor="0.5" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.TrackRadiusFactor = 0.5;
this.Content = progressBar;

TrackThickness

Gets or sets a value that specifies the thickness of track in circular progress bar. You can specify value either in logical pixel or radius factor using the ThicknessUnit property.

Declaration

public double TrackThickness { get; set; }

Property Value

Type	Description
System.Double	The default value is `5`.

Examples

XAML
C#

<progressBar:SfCircularProgressBar TrackThickness="20" />

SfCircularProgressBar progressBar = new SfCircularProgressBar();
progressBar.TrackThickness = 20;
this.Content = progressBar;

Methods

ArrangeContent(Rect)

Arrange the child elements.

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds	The bounds.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	Return child element size.

Overrides

Syncfusion.Maui.Toolkit.SfView.ArrangeContent(Microsoft.Maui.Graphics.Rect)

MeasureContent(Double, Double)

Measures the size of layout required for child elements.

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	The widthConstraint.
System.Double	heightConstraint	The heightConstraint.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	Return child element size.

Overrides

Syncfusion.Maui.Toolkit.SfView.MeasureContent(System.Double, System.Double)

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement