Implementing SfCircularProgressBar (WPF)

When to Use This Skill

Use this skill when:

• Displaying circular/radial progress for a known task (determinate)
• Showing an indeterminate spinner while progress is unknown
• Visualizing primary + secondary (buffer) progress simultaneously
• Splitting progress into segments (e.g., steps in a workflow)
• Customizing arc angles (semi-circle, full circle, partial arc)
• Styling progress ring colors, gradients, or range-based colors
• Placing custom content (text, buttons, images) at the center of the ring

Assembly: Syncfusion.SfProgressBar.WPF Namespace: Syncfusion.UI.Xaml.ProgressBar XAML Schema: http://schemas.syncfusion.com/wpf Key Class: SfCircularProgressBar

Quick Start

<Window
    xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <!-- Determinate: shows 70% progress -->
        <Syncfusion:SfCircularProgressBar
            Progress="70"
            ShowProgressValue="True"
            Width="150" Height="150" />
    </Grid>
</Window>

using Syncfusion.UI.Xaml.ProgressBar;

SfCircularProgressBar circular = new SfCircularProgressBar();
circular.Progress = 70;
circular.ShowProgressValue = true;
circular.Width = 150;
grid.Children.Add(circular);

Documentation and Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

• NuGet/assembly installation (Syncfusion.SfProgressBar.WPF)
• XAML namespace and schema declaration
• Declaring the control in XAML and code-behind
• Setting the Progress property
• Theme integration via SfSkinManager

States

📄 Read: [references/states.md](references/states.md)

• Determinate state (default) with ShowProgressValue
• Indeterminate state (IsIndeterminate="True") for unknown progress
• Buffer state (SecondaryProgress, SecondaryProgressColor)
• Decision guide: which state to use when

Appearance & Customization

📄 Read: [references/appearance.md](references/appearance.md)

• Arc shape via StartAngle / EndAngle
• Radius and thickness: IndicatorOuterRadius, IndicatorInnerRadius, TrackOuterRadius, TrackInnerRadius
• Solid color: ProgressColor, TrackColor
• Range-based colors: RangeColor with Start, End, Color
• Gradient effect: RangeColor.IsGradient
• Rounded ends: IndicatorCornerRadius
• Animation: AnimationDuration, AnimationEasing

Segments & Custom Content

📄 Read: [references/segments-and-custom-content.md](references/segments-and-custom-content.md)

• SegmentCount to split ring into discrete steps
• ProgressContent for center UI (text, buttons, images)
• Binding center text to Progress value
• Play/Pause button with DispatcherTimer pattern

Key Properties

Common Use Cases

• File upload indicator — determinate with ShowProgressValue="True"
• Loading spinner — indeterminate (IsIndeterminate="True")
• Media player — ProgressContent with play/pause button
• Step tracker — SegmentCount matching total steps
• CPU/memory gauge — RangeColors mapping green/yellow/red zones
• Semi-circle gauge — StartAngle="180" EndAngle="360"