syncfusion-wpf-circular-progressbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfCircularProgressBar (WPF)

实现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

在以下场景中使用该控件：

为已知任务展示圆形/径向进度（确定状态）
进度未知时显示不确定状态的加载动画
同时可视化主进度与次级（缓冲）进度
将进度拆分为分段（如工作流中的步骤）
自定义弧形角度（半圆、整圆、部分弧形）
为进度环设置颜色、渐变或基于范围的配色
在进度环中心放置自定义内容（文本、按钮、图片）

程序集：

Syncfusion.SfProgressBar.WPF

命名空间：

Syncfusion.UI.Xaml.ProgressBar

XAML架构：

http://schemas.syncfusion.com/wpf

核心类：

SfCircularProgressBar

Quick Start

快速开始

xaml

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

csharp

using Syncfusion.UI.Xaml.ProgressBar;

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

xaml

<Window
    xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <!-- 确定状态：显示70%进度 -->
        <Syncfusion:SfCircularProgressBar
            Progress="70"
            ShowProgressValue="True"
            Width="150" Height="150" />
    </Grid>
</Window>

csharp

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

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

📄 阅读： references/getting-started.md

NuGet/程序集安装（
```
Syncfusion.SfProgressBar.WPF
```
）
XAML命名空间与架构声明
在XAML和代码后置中声明控件
设置
```
Progress
```
属性
通过SfSkinManager集成主题

States

状态说明

📄 Read: 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

📄 阅读： references/states.md

确定状态（默认）与
```
ShowProgressValue
```
属性
不确定状态（
```
IsIndeterminate="True"
```
）用于进度未知场景
缓冲状态（
```
SecondaryProgress
```
、
```
SecondaryProgressColor
```
）
状态选择决策指南

Appearance & Customization

外观与自定义

📄 Read: 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
```

📄 阅读： references/appearance.md

通过
```
StartAngle
```
/
```
EndAngle
```
设置弧形形状

半径与厚度：

IndicatorOuterRadius

、

IndicatorInnerRadius

、

TrackOuterRadius

、

TrackInnerRadius

纯色设置：
```
ProgressColor
```
、
```
TrackColor
```
基于范围的配色：
```
RangeColor
```
结合
```
Start
```
、
```
End
```
、
```
Color
```
属性
渐变效果：
```
RangeColor.IsGradient
```
圆角端点：
```
IndicatorCornerRadius
```
动画：
```
AnimationDuration
```
、
```
AnimationEasing
```

Segments & Custom Content

分段与自定义内容

📄 Read: 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

📄 阅读： references/segments-and-custom-content.md

```
SegmentCount
```
将进度环拆分为离散步骤
```
ProgressContent
```
用于设置中心UI（文本、按钮、图片）
将中心文本绑定到
```
Progress
```
值
使用
```
DispatcherTimer
```
模式实现播放/暂停按钮

Key Properties

核心属性

Property	Type	Default	Purpose
`Progress`	`double`	`0`	Current progress value (0–100)
`ShowProgressValue`	`bool`	`false`	Display numeric % in center
`IsIndeterminate`	`bool`	`false`	Indeterminate spinning animation
`SecondaryProgress`	`double`	`0`	Buffer/secondary progress value
`StartAngle`	`double`	`-90`	Arc start angle in degrees
`EndAngle`	`double`	`270`	Arc end angle in degrees
`SegmentCount`	`int`	`0`	Number of segments (0 = none)
`ProgressColor`	`Brush`	theme	Color of the progress arc
`TrackColor`	`Brush`	theme	Color of the track arc
`IndicatorCornerRadius`	`double`	`0`	Rounded ends on the progress arc
`AnimationDuration`	`TimeSpan`	`3000ms`	Indeterminate animation cycle time
`ProgressContent`	`object`	`null`	Custom center content

属性	类型	默认值	用途
`Progress`	`double`	`0`	当前进度值（0–100）
`ShowProgressValue`	`bool`	`false`	在中心显示百分比数值
`IsIndeterminate`	`bool`	`false`	启用不确定状态的旋转动画
`SecondaryProgress`	`double`	`0`	缓冲/次级进度值
`StartAngle`	`double`	`-90`	弧形起始角度（度数）
`EndAngle`	`double`	`270`	弧形结束角度（度数）
`SegmentCount`	`int`	`0`	分段数量（0表示无分段）
`ProgressColor`	`Brush`	主题默认	进度弧形的颜色
`TrackColor`	`Brush`	主题默认	轨道弧形的颜色
`IndicatorCornerRadius`	`double`	`0`	进度弧形的端点圆角
`AnimationDuration`	`TimeSpan`	`3000ms`	不确定状态动画的周期时长
`ProgressContent`	`object`	`null`	自定义中心内容

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"
```

文件上传指示器 — 确定状态，设置
```
ShowProgressValue="True"
```
加载动画 — 不确定状态（
```
IsIndeterminate="True"
```
）
媒体播放器 — 使用
```
ProgressContent
```
添加播放/暂停按钮
步骤追踪器 —
```
SegmentCount
```
与总步骤数匹配
CPU/内存仪表盘 — 使用
```
RangeColors
```
映射绿/黄/红区间
半圆仪表盘 — 设置
```
StartAngle="180"
```
```
EndAngle="360"
```