syncfusion-wpf-linear-progressbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfLinearProgressBar (WPF)

实现SfLinearProgressBar（WPF）

When to Use This Skill

适用场景

Use this skill when:

Displaying a horizontal progress bar for a known task (determinate)
Showing an indeterminate bouncing animation while progress is unknown
Visualizing primary + secondary (buffer) progress simultaneously
Splitting progress into discrete segments
Customizing colors, gradients, padding, or corner radius
Applying range-based colors across progress value zones

Assembly:

Syncfusion.SfProgressBar.WPF

Namespace:

Syncfusion.UI.Xaml.ProgressBar

XAML Schema:

http://schemas.syncfusion.com/wpf

Key Class:

SfLinearProgressBar

使用该组件的场景：

为已知任务显示水平进度条（确定型）
进度未知时显示不确定型弹跳动画
同时可视化主进度与次要（缓冲）进度
将进度拆分为独立分段
自定义颜色、渐变、内边距或圆角半径
为不同进度值区间应用分段颜色

程序集：

Syncfusion.SfProgressBar.WPF

命名空间：

Syncfusion.UI.Xaml.ProgressBar

XAML 架构：

http://schemas.syncfusion.com/wpf

核心类：

SfLinearProgressBar

Quick Start

快速入门

xaml

<Window xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid x:Name="grid">
        <Syncfusion:SfLinearProgressBar
            Progress="70"
            Width="500"
            Height="20" />
    </Grid>
</Window>

csharp

using Syncfusion.UI.Xaml.ProgressBar;

SfLinearProgressBar linear = new SfLinearProgressBar();
linear.Progress = 70;
linear.Width = 500;
linear.Height = 20;
grid.Children.Add(linear);

xaml

<Window xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid x:Name="grid">
        <Syncfusion:SfLinearProgressBar
            Progress="70"
            Width="500"
            Height="20" />
    </Grid>
</Window>

csharp

using Syncfusion.UI.Xaml.ProgressBar;

SfLinearProgressBar linear = new SfLinearProgressBar();
linear.Progress = 70;
linear.Width = 500;
linear.Height = 20;
grid.Children.Add(linear);

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet/assembly installation (
```
Syncfusion.SfProgressBar.WPF
```
)
XAML namespace and schema declaration
Declaring 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) for known progress
Indeterminate state (
```
IsIndeterminate="True"
```
) for unknown duration
Buffer state (
```
SecondaryProgress
```
,
```
SecondaryProgressColor
```
)
Decision guide: which state to use when
Switching states dynamically via MVVM binding

📄 阅读： references/states.md

确定型状态（默认）：适用于已知进度的场景
不确定型状态（
```
IsIndeterminate="True"
```
）：适用于时长未知的场景
缓冲状态（
```
SecondaryProgress
```
、
```
SecondaryProgressColor
```
）
选择指南：不同场景下的状态选择
通过MVVM绑定动态切换状态

Appearance & Segments

外观与分段

📄 Read: references/appearance-and-segments.md

```
IndicatorCornerRadius
```
— rounded ends
```
IndicatorPadding
```
— gap between track and progress bar
```
ProgressColor
```
/
```
TrackColor
```
— solid color customization
```
RangeColors
```
:
```
RangeColor
```
with
```
Start
```
,
```
End
```
,
```
Color
```
Gradient:
```
RangeColor.IsGradient
```
```
AnimationDuration
```
/
```
AnimationEasing
```
(indeterminate only)
```
SegmentCount
```
— split bar into sections
Segments with corner radius

📄 阅读： references/appearance-and-segments.md

```
IndicatorCornerRadius
```
— 进度条两端圆角
```
IndicatorPadding
```
— 轨道与进度条之间的间隙
```
ProgressColor
```
/
```
TrackColor
```
— 纯色自定义
```
RangeColors
```
：包含
```
Start
```
、
```
End
```
、
```
Color
```
属性的
```
RangeColor
```
集合
渐变：通过
```
RangeColor.IsGradient
```
开启
```
AnimationDuration
```
/
```
AnimationEasing
```
（仅适用于不确定型状态）
```
SegmentCount
```
— 将进度条拆分为多个分段
带圆角的分段

Key Properties

核心属性

Property	Type	Default	Purpose
`Progress`	`double`	`0`	Current progress value (0–100)
`IsIndeterminate`	`bool`	`false`	Indeterminate bouncing animation
`SecondaryProgress`	`double`	`0`	Buffer/secondary progress value
`SecondaryProgressColor`	`Brush`	theme	Color of the buffer bar
`ProgressColor`	`Brush`	theme	Color of the progress bar
`TrackColor`	`Brush`	theme	Color of the background track
`IndicatorCornerRadius`	`double`	`0`	Rounded ends on progress bar
`IndicatorPadding`	`Thickness`	`0`	Gap between track and indicator
`SegmentCount`	`int`	`0`	Number of segments (0 = none)
`AnimationDuration`	`TimeSpan`	`3000ms`	Indeterminate animation cycle time

属性	类型	默认值	用途
`Progress`	`double`	`0`	当前进度值（0-100）
`IsIndeterminate`	`bool`	`false`	启用不确定型弹跳动画
`SecondaryProgress`	`double`	`0`	缓冲/次要进度值
`SecondaryProgressColor`	`Brush`	主题默认	缓冲条颜色
`ProgressColor`	`Brush`	主题默认	进度条颜色
`TrackColor`	`Brush`	主题默认	背景轨道颜色
`IndicatorCornerRadius`	`double`	`0`	进度条两端圆角半径
`IndicatorPadding`	`Thickness`	`0`	轨道与进度指示器之间的间隙
`SegmentCount`	`int`	`0`	分段数量（0表示无分段）
`AnimationDuration`	`TimeSpan`	`3000ms`	不确定型动画周期时长

Common Use Cases

常见使用场景

File download bar — determinate with
```
Progress
```
bound to download percentage
Loading animation — indeterminate (
```
IsIndeterminate="True"
```
)
Video buffering —
```
SecondaryProgress
```
ahead of
```
Progress
```
Step tracker —
```
SegmentCount
```
matching total steps
Health/battery bar —
```
RangeColors
```
mapping green/yellow/red zones
Styled progress pill —
```
IndicatorCornerRadius="10"
```
for rounded bar

文件下载进度条 — 确定型，
```
Progress
```
绑定下载百分比
加载动画 — 不确定型（
```
IsIndeterminate="True"
```
）
视频缓冲 —
```
SecondaryProgress
```
值领先于
```
Progress
```
步骤追踪器 —
```
SegmentCount
```
与总步骤数匹配
健康/电池进度条 —
```
RangeColors
```
映射绿/黄/红区间
样式化胶囊进度条 — 设置
```
IndicatorCornerRadius="10"
```
实现圆角进度条