Xamarin.Forms 進度列

Download Sample 下載範例

控件以 Xamarin.FormsProgressBar 可視化方式將進度表示為水平橫條,以填入以值表示的 float 百分比。 類別 ProgressBar 繼承自 View

下列螢幕快照顯示 ProgressBar iOS 和 Android 上的 :

Screenshot of ProgressBar on iOS and Android

控制項 ProgressBar 會定義兩個屬性:

  • Progress 是值 float ,表示目前進度為 0 到 1 的值。 Progress 小於 0 的值會限製為 0,大於 1 的值會限製為 1。
  • ProgressColorColor是 ,會影響代表目前進度的內部列色彩。

這些屬性是由 BindableProperty 物件所支援,這表示 ProgressBar 可以設定樣式並成為數據系結的目標。

控件 ProgressBar 也會定義方法 ProgressTo ,將直方圖從其目前值動畫到指定的值。 如需詳細資訊,請參閱 建立 ProgressBar 的動畫。

注意

ProgressBar不接受使用者操作,因此在使用 Tab 鍵選取控件時會略過。

建立 ProgressBar

ProgressBar可以在 XAML 中具現化 。 其 Progress 屬性會決定內部色彩列的填滿百分比。 默認 Progress 屬性值為 0。 下列範例示範如何使用選擇性Progress屬性集在 XAML 中具現化 ProgressBar

<ProgressBar Progress="0.5" />

ProgressBar也可以在程式代碼中建立 :

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

警告

請勿使用不受限制的水平版面設定選項,例如 CenterStartEndProgressBar。 在UWP上,會 ProgressBar 折疊成寬度為零的橫條。 保留的預設值HorizontalOptionsFill,且不要在配置中Grid放置 ProgressBar 時使用的寬度Auto

ProgressBar 外觀屬性

當 屬性大於零時Progress,屬性ProgressColor會定義內部橫條色彩。 下列範例示範如何使用 屬性集在 XAML ProgressColor 中具現化 ProgressBar

<ProgressBar ProgressColor="Orange" />

您也可以 ProgressColor 在程式代碼中建立 ProgressBar 時設定 屬性:

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

下列螢幕快照顯示 ProgressBar ,在 iOS 和 Android 上將 ProgressColor 屬性設定為 Color.Orange

Screenshot of styled ProgressBar on iOS and Android

建立 ProgressBar 的動畫

方法會將 ProgressTo 從其目前Progress值動畫到ProgressBar一段時間所提供的值。 方法接受 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.FormsEasing 函式。