mcpField
S
syncfusion-maui-toolkit-linear-progressbar

syncfusion-maui-toolkit-linear-progressbar

github.com/syncfusion设计与 UI3945 次安装7 周前更新
代码仓库

关于 syncfusion-maui-toolkit-linear-progressbar

该技能为 .NET MAUI 开发者提供 Syncfusion SfLinearProgressBar 的实现与定制指南。它涵盖确定、非确定和缓冲状态,以及分段、动画、范围颜色和进度事件。

主要功能

  1. 01确定、非确定与缓冲状态
  2. 02多段进度显示
  3. 03颜色、渐变和尺寸自定义
  4. 04动画时长与缓动设置
  5. 05按进度范围设置颜色
  6. 06进度变化与完成事件

适用场景

  1. 01显示文件上传或下载进度
  2. 02呈现时长未知任务的进展
  3. 03展示视频缓冲与主要进度
  4. 04用分段条跟踪多步骤任务

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-linear-progressbar

安装后在 Claude Code 中输入/syncfusion-maui-toolkit-linear-progressbar确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
animation.md
appearance.md
events.md
getting-started.md
range.md
segments.md
states.md

详细介绍

实现线性进度条

本指南全面介绍如何实现和自定义 Syncfusion .NET MAUI 线性进度条(SfLinearProgressBar)控件。此组件以矩形形状显示任务进度,支持确定和不确定状态、分段、平滑动画,以及包括范围颜色在内的可自定义视觉效果。

何时使用此技能

在以下情况下使用此技能:

  • 实现进度指示器,用于文件上传、下载或数据处理任务
  • 显示确定进度,已知完成百分比(0-100%)
  • 显示不确定进度,任务时长未知或无法计算
  • 可视化缓冲状态,同时显示主要和次要进度(例如视频缓冲)
  • 创建多段进度条,用于顺序任务或多步骤任务
  • 自定义进度外观,包括颜色、渐变、尺寸、圆角或动画
  • 应用基于范围的颜色,显示不同的进度区间(成功、警告、危险)
  • 添加进度动画,自定义时长和缓动效果
  • 处理进度事件,以便在进度变化或完成时作出响应

组件概述

SfLinearProgressBar 是一个 .NET MAUI 控件,可通过矩形水平条显示任务进度。它支持:

  • 多种状态:确定(进度已知)、不确定(时长未知)、缓冲(双进度)
  • 分段:将进度拆分为多个部分,用于顺序任务
  • 丰富的自定义选项:颜色、渐变、粗细、内边距、圆角
  • 平滑动画:可配置时长和缓动函数
  • 范围颜色:为不同进度范围设置不同颜色
  • 事件:跟踪进度变化和完成状态

文档和导航指南

开始使用

📄 阅读: references/getting-started.md

在以下情况下阅读:

  • 安装并设置线性进度条控件
  • 添加 NuGet 包(Syncfusion.Maui.Toolkit)
  • 注册 Syncfusion Core 处理程序
  • 创建第一个基础进度条
  • 了解命名空间导入和初始化
进度状态

📄 阅读: references/states.md

在以下情况下阅读:

  • 了解确定状态(默认状态,进度已知)
  • 为时长未知的任务启用不确定状态
  • 使用次要进度实现缓冲状态
  • 根据使用场景选择合适的状态
  • 为复杂场景组合使用不同状态
分段

📄 阅读: references/segments.md

在以下情况下阅读:

  • 在一个进度条中显示多个顺序任务
  • 使用 SegmentCount 将进度条拆分为多个部分
  • 使用 SegmentGapWidth 自定义分段间距
  • 显示逐步推进的多步骤进度
外观自定义

📄 阅读: references/appearance.md

在以下情况下阅读:

  • 使用 GradientStops 应用范围颜色(纯色或渐变)
  • 自定义轨道、进度和次要进度的高度
  • 调整进度指示器周围的内边距
  • 设置圆角半径以实现圆角边缘
  • 更改进度填充、轨道填充和次要进度的颜色
动画

📄 阅读: references/animation.md

在以下情况下阅读:

  • 为不同状态配置动画时长
  • 应用缓动效果(Linear、CubicInOut、BounceIn 等)
  • 使用 SetProgress() 方法一次性覆盖动画设置
  • 自定义不确定动画行为
  • 创建平滑且交互流畅的进度过渡效果
范围自定义

📄 阅读: references/range.md

在以下情况下阅读:

  • 定义自定义最小值和最大值
  • 使用因子值(0.0 到 1.0)代替百分比
  • 针对特定场景调整进度范围
  • 使用非标准进度刻度
事件

📄 阅读: references/events.md

需要执行以下操作时:

  • 处理 ProgressChanged 事件以响应进度更新
  • 进度达到最大值时处理 ProgressCompleted 事件
  • 根据进度值动态更改外观
  • 实现由进度里程碑触发的自定义逻辑

评论

支持 Markdown