Kontrolki postępu

Kontrolka postępu przekazuje użytkownikowi opinię, że trwa długotrwała operacja. Może to oznaczać, że użytkownik nie może wchodzić w interakcję z aplikacją, gdy wskaźnik postępu jest widoczny, i może również wskazywać, jak długi może być czas oczekiwania, w zależności od użytego wskaźnika.

Typy postępu

Istnieją dwie kontrolki pokazujące użytkownikowi, że operacja jest w toku — za pośrednictwem paska postępu lub przez element ProgressRing. Zarówno ProgressBar, jak i ProgressRing mają dwa stany, które informują, czy użytkownik może wchodzić w interakcję z aplikacją.

• Stan określony zarówno dla elementu ProgressBar, jak i ProgressRing pokazuje procent wykonania zadania. Powinno to być używane podczas operacji, której czas trwania jest znany, ale jego postęp nie powinien blokować interakcji użytkownika z aplikacją.
• Nieokreślony stan paska postępu pokazuje, że operacja jest w toku, nie blokuje interakcji użytkownika z aplikacją, a jej czas ukończenia jest nieznany.
• Stan nieokreślony dla elementu ProgressRing pokazuje, że trwa operacja, blokuje interakcję użytkownika z aplikacją, a jej czas ukończenia jest nieznany.

Ponadto kontrolka postępu jest tylko do odczytu, a nie interaktywna. Oznacza to, że użytkownik nie może wywoływać ani używać tych kontrolek bezpośrednio.

Kontrola	Display
Nieokreślony pasek postępu
Pasek postępu o określonej wartości
Nieokreślony wskaźnik postępu
Stały pierścień postępu

Czy jest to właściwa kontrola?

Nie zawsze jest oczywiste, jakiej kontrolki lub jakiego stanu (określony vs nieokreślony) używać podczas próby pokazania, że coś się dzieje. Czasami zadanie jest na tyle oczywiste, że w ogóle nie wymaga kontrolki postępu — a czasami nawet jeśli jest używana kontrolka postępu, wiersz tekstu jest nadal niezbędny, aby wyjaśnić użytkownikowi, jaka operacja jest w toku.

Pasek postępu

• Czy kontrolka ma zdefiniowany czas trwania lub przewidywalny koniec?

  Użyj określonego paska postępu, a następnie zaktualizuj odpowiednio procent lub wartość.

• Czy użytkownik może kontynuować bez konieczności monitorowania postępu operacji?

  Kiedy pasek postępu jest używany, interakcja jest niemodalna, co zazwyczaj oznacza, że użytkownik nie jest blokowany przez ukończenie tej operacji i może nadal korzystać z aplikacji w inny sposób, dopóki ten aspekt nie zostanie ukończony.

• Słowa kluczowe

  Jeśli Twoja operacja odnosi się do tych słów kluczowych lub jeśli wyświetlasz tekst obok operacji postępu, która odpowiada tym słowom kluczowym, rozważ użycie paska postępu:

  • Ładowanie...
  • Pobieranie
  • Pracuję...

Pierścień postępu

• Czy operacja spowoduje, że użytkownik będzie czekał na kontynuowanie?

  Jeśli operacja wymaga, by cała (lub duża część) interakcja z aplikacją musiała czekać na jej zakończenie, wówczas Pasek Postępu w trybie nieokreślonym jest lepszym wyborem.

  • Czy kontrolka ma zdefiniowany czas trwania lub przewidywalny koniec?

  Użyj determinate ProgressRing, jeśli wizualizacja ma być pierścieniem zamiast paska, i odpowiednio zaktualizuj wartość procentową lub wartość.

• Czy aplikacja czeka na ukończenie zadania przez użytkownika?

  Jeśli tak, użyj nieokreślonego wskaźnika postępu ProgressRing, gdyż ma on przedstawiać użytkownikowi nieznany czas oczekiwania.

• Słowa kluczowe

  Jeśli operacja dotyczy tych słów kluczowych lub jeśli tekst wyświetlany jest wraz z operacją postępu zgodną z tymi słowami kluczowymi, rozważ użycie elementu ProgressRing:

  • Orzeźwiające
  • Trwa logowanie...
  • Trwa łączenie...

Brak koniecznego wskazania postępu

• Czy użytkownik musi wiedzieć, że coś się dzieje?

  Jeśli na przykład aplikacja pobiera coś w tle, a użytkownik nie zainicjował pobierania, użytkownik nie musi wiedzieć o tym.

• Czy operacja jest działaniem w tle, które nie blokuje aktywności użytkownika i ma minimalne (ale wciąż pewne) zainteresowanie użytkownika?

  Użyj tekstu, gdy aplikacja wykonuje zadania, które nie muszą być widoczne przez cały czas, ale nadal trzeba wyświetlić stan.

• Czy użytkownik dba tylko o ukończenie operacji?

  Czasami najlepiej jest wyświetlić powiadomienie tylko po zakończeniu operacji lub wizualnie zasygnalizować, że operacja została ukończona natychmiast, a finalizujące czynności przeprowadzić w tle.

Najlepsze rozwiązania dotyczące kontrolek postępu

Czasami najlepiej jest zobaczyć niektóre wizualne reprezentacje czasu i miejsca użycia tych różnych kontrolek postępu:

Pasek postępu — określony

Pierwszy przykład to determinowany pasek postępu. Kiedy czas trwania operacji jest znany, podczas instalowania, pobierania, konfigurowania itp. Najlepiej określić pasek postępu.

ProgressBar — nieokreślony

Jeśli nie wiadomo, jak długo trwa operacja, użyj nieokreślonego paska postępu. Nieokreślone paski postępu są również dobre podczas wypełniania zwirtualizowanej listy oraz tworzenia płynnego przejścia wizualnego między nieokreślonym a określonym paskiem postępu.

• Czy operacja jest wykonywana w zwirtualizowanej kolekcji?

  Jeśli tak, nie umieszczaj wskaźnika postępu na każdym elemencie listy w miarę ich wyświetlania. Zamiast tego użyj paska postępu i umieść go na górze kolekcji elementów ładowanych, aby pokazać postęp pobierania elementów.

ProgressRing — nieokreślone

Nieokreślony krąg postępu jest używany, gdy dalsza interakcja użytkownika z aplikacją jest wstrzymana lub gdy aplikacja czeka na dane wejściowe użytkownika, aby kontynuować. "Logowanie..." Przykład powyżej jest idealnym scenariuszem dla ProgressRing, użytkownik nie może kontynuować korzystania z aplikacji, dopóki znak nie zostanie ukończony.

ProgressRing — określony

Gdy czas trwania operacji jest znany, a wizualizacja pierścienia jest pożądana, najlepszym wyborem podczas instalacji, pobierania, konfigurowania itp. będzie określony ProgressRing.

Tworzenie kontrolki postępu

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Oba mechanizmy kontroli postępu są dość proste; ale niektóre funkcje wizualne kontrolek nie są oczywiste do dostosowania.

Ustalanie rozmiaru ProgressRing

Element ProgressRing może mieć rozmiar tak duży, jak chcesz, ale może być tylko tak mały, jak 20x20epx. Aby zmienić rozmiar elementu ProgressRing, musisz ustawić jego wysokość i szerokość. Jeśli ustawiono tylko wysokość lub szerokość, kontrolka przyjmie minimalne wymiary (20x20epx) – natomiast, jeśli wysokość i szerokość są ustawione na dwa różne rozmiary, przyjęty zostanie mniejszy z rozmiarów. Aby upewnić się, że funkcja ProgressRing jest poprawna dla Twoich potrzeb, ustaw zarówno wysokość, jak i szerokość na tę samą wartość:

<ProgressRing Height="100" Width="100"/>

Aby element ProgressRing był widoczny i animowany, należy ustawić właściwość IsActive na true:

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Kolorowanie kontrolek postępu

Domyślnie główny kolor kontrolek postępu jest ustawiony na kolor akcentu systemu. Aby zastąpić tę szczotkę, po prostu zmień właściwość pierwszego planu na jednej z kontrolek.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

Zmiana koloru pierwszego planu dla elementu ProgressRing spowoduje zmianę koloru wypełnienia pierścienia. Właściwość pierwszego planu dla paska postępu zmieni właściwość koloru wypełnienia paska – aby zmienić niewypełnioną część paska, po prostu przesłoń właściwość tła.

Wyświetlanie kursora oczekiwania

Czasami najlepiej jest po prostu pokazać krótki kursor oczekiwania, gdy aplikacja lub operacja potrzebuje czasu na przetworzenie danych, i musisz wskazać użytkownikowi, że z aplikacją lub obszarem, w którym widoczny jest kursor oczekiwania, nie powinno się wchodzić w interakcje, zanim kursor oczekiwania zniknie.

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

UwP i WinUI 2

Kontrolki postępu dla aplikacji platformy UWP są uwzględniane w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

Zalecamy użycie najnowszego interfejsu WinUI 2 , aby uzyskać najbardziej aktualne style, szablony i funkcje dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ProgressBar />
<muxc:ProgressRing />

Powiązane artykuły

• Klasa ProgressBar
• Klasa ProgressRing