Udostępnij za pośrednictwem


Xamarin.Forms Pasek postępu

Kontrolka Xamarin.FormsProgressBar wizualnie reprezentuje postęp jako poziomy pasek wypełniony wartością procentową reprezentowaną float przez wartość. Klasa ProgressBar dziedziczy z Viewklasy .

Na poniższych zrzutach ekranu przedstawiono elementy ProgressBar w systemach iOS i Android:

Zrzut ekranu przedstawiający pasek postępu w systemach iOS i Android

Kontrolka ProgressBar definiuje dwie właściwości:

  • Progress jest wartością float reprezentującą bieżący postęp jako wartość z zakresu od 0 do 1. Progress wartości mniejsze niż 0 zostaną zaciśnięte do 0, wartości większe niż 1 zostaną zaciśnięte do 1.
  • ProgressColor jest elementem Color , który wpływa na kolor paska wewnętrznego reprezentujący bieżący postęp.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że ProgressBar można stylizować i być obiektem docelowym powiązań danych.

Kontrolka ProgressBar definiuje również metodę ProgressTo , która animuje pasek z bieżącej wartości na określoną wartość. Aby uzyskać więcej informacji, zobacz Animowanie paska postępu.

Uwaga

Kontrolka ProgressBar nie akceptuje manipulacji użytkownikami, dlatego jest pomijana podczas używania Tab do wybierania kontrolek.

Tworzenie paska postępu

Wystąpienie elementu można ProgressBar utworzyć w języku XAML. Jego Progress właściwość określa procent wypełnienia wewnętrznego, kolorowego paska. Wartość właściwości domyślnej Progress to 0. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu ProgressBar w języku XAML przy użyciu opcjonalnego Progress zestawu właściwości:

<ProgressBar Progress="0.5" />

Element ProgressBar można również utworzyć w kodzie:

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

Ostrzeżenie

Nie używaj nieobsługiwanych opcji układu poziomego, takich jak Center, Startlub End z .ProgressBar Na platformie UWP ProgressBar zwija się na słupek o zerowej szerokości. Zachowaj wartość Fill domyślną HorizontalOptions i nie używaj szerokości Auto podczas umieszczania ProgressBar Grid elementu w układzie.

Właściwości wyglądu paska postępu

Właściwość ProgressColor definiuje wewnętrzny kolor paska, gdy Progress właściwość jest większa niż zero. W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu ProgressBar w języku XAML przy użyciu ProgressColor zestawu właściwości:

<ProgressBar ProgressColor="Orange" />

Właściwość ProgressColor można również ustawić podczas tworzenia elementu ProgressBar w kodzie:

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

Na poniższych zrzutach ekranu przedstawiono ProgressBar właściwość z właściwością ustawioną ProgressColor na Color.Orange w systemach iOS i Android:

Zrzut ekranu przedstawiający stylizowany pasek postępu w systemach iOS i Android

Animowanie paska postępu

Metoda ProgressTo animuje ProgressBar wartość z bieżącej Progress wartości na podaną w czasie. Metoda akceptuje float wartość postępu, uint czas trwania w milisekundach, Easing wartość wyliczenia i zwraca Task<bool>wartość . Poniższy kod pokazuje, jak animować element ProgressBar:

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

Aby uzyskać więcej informacji na Easing temat wyliczenia, zobacz Funkcje easing w pliku Xamarin.Forms.