# ProgressBar 使用文档
本文档介绍 AtomUI ProgressBar 家族四种控件的各种使用方式,示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置:`controlgallery/AtomUIGallery/ShowCases/Views/Feedback/ProgressBarShowCase.axaml`
---
## 前置准备
在 AXAML 中使用进度条,需要引入以下命名空间:
```xml
xmlns:atom="https://atomui.net"
```
在 C# 代码中引入:
```csharp
using AtomUI.Desktop.Controls; // ProgressBar, CircleProgress, DashboardProgress, StepsProgressBar
using AtomUI.Controls; // SizeType, ProgressStatus, PercentPosition 等共享类型
```
---
## 1. 线形进度条(ProgressBar)
最基础的进度条类型,展示水平或垂直方向的线形进度。
```xml
```
**行为说明**:
- `Value=100` 时自动切换为成功色并显示 ✓ 图标
- `Status="Exception"` 时使用红色并显示 ✗ 图标
- `IsShowProgressInfo="False"` 隐藏百分比文字
---
## 2. 圆形进度条(CircleProgress)
在紧凑空间中展示进度。
```xml
```
---
## 3. 尺寸控制
所有进度条支持三种尺寸,通过 `SizeType` 属性控制:
### 线形进度条
```xml
```
### 圆形进度条
```xml
```
### 仪表盘进度条
```xml
```
### 步骤进度条
```xml
```
---
## 4. 仪表盘进度条(DashboardProgress)
仪表盘形态支持设置缺口位置和缺口角度:
```xml
```
---
## 5. 步骤进度条(StepsProgressBar)
将进度分为离散的块状步骤:
```xml
```
每个步骤可以设置独立颜色:
```csharp
// ViewModel
public List StepsChunkBrushes { get; } = new()
{
new SolidColorBrush(Colors.Green),
new SolidColorBrush(Colors.Green),
new SolidColorBrush(Colors.Orange),
new SolidColorBrush(Colors.Red),
new SolidColorBrush(Colors.Red),
};
```
---
## 6. 成功阈值
展示部分完成的成功段:
```xml
```
---
## 7. 端点样式(StrokeLineCap)
```xml
```
---
## 8. 自定义渐变颜色
```xml
```
---
## 9. 圆形/仪表盘步进段
圆形和仪表盘进度条支持分段显示:
```xml
```
---
## 10. 自定义文字格式
```xml
```
`ProgressTextFormat` 使用 C# 标准格式化字符串,`{0}` 为当前百分比值。
---
## 11. 百分比标签位置
### ProgressBar 内外标签
```xml
```
### StepsProgressBar 标签位置
```xml
```
---
## 12. 垂直方向
ProgressBar 和 StepsProgressBar 支持垂直方向:
### 线形
```xml
```
### 步骤
```xml
```
---
## 13. 动态进度
通过数据绑定实现动态进度更新:
```xml
Sub
Add
```
---
## 14. 禁用状态
```xml
```
---
## 常见组合模式
### 文件上传进度
```xml
```
### 仪表板统计
```xml
```
### 步骤流程
```xml
```