Xamarin.Forms进度栏

Download Sample下载示例

Xamarin.FormsProgressBar 控件在视觉上将进度表示为水平条,该条填充为由 float 值表示的百分比。 ProgressBar 类继承自 View

以下屏幕截图显示 iOS 和 Android 上的 ProgressBar

Screenshot of ProgressBar on iOS and Android

ProgressBar 控件定义两个属性:

  • Progress 是一个 float 值,表示当前进度为 0 到 1 之间的值。 小于 0 的 Progress 值将被限制为 0,大于 1 的值将被限制为 1。
  • ProgressColor 是影响表示当前进度的内部条形颜色的一种 Color

这些属性由 BindableProperty 对象提供支持,这意味着 ProgressBar 可以设置样式并成为数据绑定的目标。

ProgressBar 控件还定义了将条形从其当前值动画到指定值的 ProgressTo 方法。 有关详细信息,请参阅对 ProgressBar 进行动画处理

注意

ProgressBar 不接受用户操作,因此在使用 Tab 键选择控件时会跳过它。

创建 ProgressBar

可以在 XAML 中实例化 ProgressBar。 它的 Progress 属性确定内部彩色条的填充百分比。 默认的 Progress 属性值为 0。 以下示例演示如何在 XAML 中实例化已设置可选 Progress 属性的 ProgressBar

<ProgressBar Progress="0.5" />

还可以在代码中创建 ProgressBar

ProgressBar progressBar = new ProgressBar { Progress = 0.5f };

警告

不要将不受约束的水平布局选项(如 CenterStartEnd)与 ProgressBar 一起使用。 在 UWP 上,ProgressBar 折叠到宽度为零的条形。 保留 Fill 的默认 HorizontalOptions 值,在 Grid 布局中放置 ProgressBar 时不要使用宽度 Auto

ProgressBar 外观属性

Progress 属性大于零时,ProgressColor 属性定义内部条形颜色。 以下示例演示如何使用 ProgressColor 属性集实例化 XAML 中的 ProgressBar

<ProgressBar ProgressColor="Orange" />

也可以在代码中创建 ProgressBar 时设置 ProgressColor 属性:

ProgressBar progressBar = new ProgressBar { ProgressColor = Color.Orange };

以下屏幕截图显示了 iOS 和 Android 上 ProgressColor 属性设置为 Color.OrangeProgressBar

Screenshot of styled ProgressBar on iOS and Android

对 ProgressBar 进行动画处理

ProgressTo 方法随着时间的推移,将 ProgressBar 从其当前 Progress 值动画化为所提供的值。 该方法接受 float 进度值、uint 持续时间(以毫秒为单位)、Easing 枚举值,并返回 Task<bool>。 下面的代码演示如何对 ProgressBar 进行动画效果:

// animate to 75% progress over 500 milliseconds with linear easing
await progressBar.ProgressTo(0.75, 500, Easing.Linear);

有关 Easing 枚举的详细信息,请参阅 Xamarin.Forms 中的缓动函数