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 dla paska postępu i pierścienia postępu 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 dla elementu ProgressBar pokazuje, że operacja jest w toku, nie blokuje interakcji użytkownika z aplikacją, a jej czas ukończenia jest nieznany.
• Stan nieokreślony dla 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	Wyświetlacz
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
  • W trakcie pracy...

Wskaźnik postępu w formie pierścienia

• 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:

  • Odświeżanie
  • Logowanie się...
  • 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 budzi minimalne (choć 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 ma miejsce w kolekcji zwirtualizowanej?

  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 z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze sklepu Microsoft Store 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 Windows.UI.Xaml.Controls, jak i Microsoft.UI.Xaml.Controls namespace’ach.

Zalecamy użycie najnowszych 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 Promień narożnika.

Aby użyć kodu w tym artykule z WinUI 2, użyj aliasu w języku XAML (używamy muxc) do reprezentowania interfejsów API biblioteki Windows UI, które są uwzględnione w projekcie. Aby uzyskać więcej informacji, zobacz Rozpoczynanie pracy z interfejsem WinUI 2.

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

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

Powiązane artykuły

• klasa ProgressBar
• klasa ProgressRing