Sdílet prostřednictvím

Ovládání postupu

Ovládací prvek průběhu poskytuje uživateli zpětnou vazbu, že probíhá dlouhotrvající operace. Může to znamenat, že uživatel nemůže pracovat s aplikací, když je indikátor průběhu viditelný, a může také indikovat, jak dlouho může být doba čekání v závislosti na použitém indikátoru.

Typy průběhu

Existují dva ovládací prvky, které uživateli ukážou, že operace probíhá – buď prostřednictvím Indikátoru průběhu, nebo přes ProgressRing. ProgressBar i ProgressRing mají dva stavy, které komunikují, pokud uživatel může pracovat s aplikací nebo ne.

  • určitý stav indikátoru průběhu a prstencového indikátoru zobrazuje procento dokončení úkolu. To by se mělo použít během operace, jejíž doba trvání je známá, ale její průběh by neměl blokovat interakci uživatele s aplikací.
  • neurčitý stav indikátoru ProgressBar ukazuje, že operace probíhá, neblokuje interakci uživatele s aplikací a její doba dokončení je neznámá.
  • neurčitý stav ProgressRing označuje, že operace probíhá, blokuje uživatelskou interakci s aplikací a její doba dokončení je neznámá.

Kromě toho je ovládací prvek průběhu jen pro čtení a není interaktivní. To znamená, že uživatel nemůže vyvolat nebo použít tyto ovládací prvky přímo.

Řízení Display
Neurčitý indikátor aktuálního stavu neurčitý ukazatel průběhu
Určitý indikátor průběhu Ukazatel průběhu určený
Neurčitý prstencový indikátor průběhu neurčitý stav kroužku ukazatele průběhu
Určený kruh postupu určit stav průběhu

Je to správná kontrola?

Není vždy zřejmé, jaký prvek ovládání nebo jaký stav (determinovaný vs. neurčitý) použít, když se snažíte ukázat, že se něco děje. Někdy je úkol dostatečně jasný, že vůbec nevyžaduje řízení průběhu – a někdy i v případě, že se používá ovládací prvek průběhu, je řádek textu stále nezbytný, aby uživateli vysvětlil, jakou operaci právě probíhá.

ProgressBar

  • Má ovládací prvek definovanou dobu trvání nebo předvídatelný konec?

    Pak použijte determinate ProgressBar a odpovídajícím způsobem aktualizujte procento nebo hodnotu.

  • Může uživatel pokračovat, aniž by musel sledovat průběh operace?

    Pokud se používá indikátor průběhu, interakce není modální, obvykle to znamená, že uživatel není blokován dokončením této operace a může aplikaci dál používat jinými způsoby, dokud se tento aspekt nedokončí.

  • Klíčová slova

    Pokud vaše operace týká se těchto klíčových slov, nebo pokud zobrazujete text současně s průběhem operace, která odpovídá těmto klíčovým slovům, zvažte použití Indikátoru průběhu.

    • Načítání ...
    • Načítání
    • Pracuji...

Progresivní kruh

  • Bude operace způsobit, že uživatel bude čekat na pokračování?

    Pokud operace vyžaduje, aby všechny (nebo většina) interakcí s aplikací počkaly, dokud není dokončena, je lepší volbou neurčitý ProgressRing.

    • Má ovládací prvek definovanou dobu trvání nebo předvídatelný konec?

    Pokud chcete, aby vizuál byl kruhem místo pruhu, použijte determinate ProgressRing a odpovídajícím způsobem aktualizujte procento nebo hodnotu.

  • Čeká aplikace na dokončení úkolu uživatelem?

    Pokud ano, použijte neurčitý ProgressRing, protože je určen k označení neznámé doby čekání pro uživatele.

  • Klíčová slova

    Pokud vaše operace odpovídá těmto klíčovým slovům, nebo pokud zobrazujete text vedle postupu operace, který odpovídá těmto klíčovým slovům, zvažte použití ProgressRingu.

    • Osvěžující
    • Přihlašuji se...
    • Připojuje se...

Není nutné indikovat průběh.

  • Potřebuje uživatel vědět, že se něco děje?

    Pokud například aplikace stahuje něco na pozadí a uživatel neshájil stahování, nemusí o ní nutně vědět.

  • Je operace činností na pozadí, která neblokuje aktivitu uživatele a je pro něj jen minimálně (ale přesto poněkud) zajímavá?

    Text použijte, když vaše aplikace provádí úkoly, které nemusí být neustále viditelné, ale stále potřebujete zobrazit stav.

  • Zajímá se uživatel pouze o dokončení operace?

    Někdy je nejlepší zobrazit oznámení jen tehdy, když je operace dokončená, nebo ihned vizuálně naznačit, že byla operace dokončena, a provést konečné úpravy na pozadí.

Osvědčené postupy pro řízení průběhu

Někdy je nejlepší vidět některé vizuální znázornění, kdy a kde používat tyto různé ovládací prvky průběhu:

ProgressBar – determinate

Příklad indikátoru průběhu (ProgressBar) determinovaný

Prvním příkladem je determinate ProgressBar. Když je známá doba trvání operace, ať už při instalaci, stahování, nastavování atd., je nejlepší použít určený ukazatel průběhu.

ProgressBar – neurčitý

Indikátor průběhu– neurčitý příklad

Pokud není známo, jak dlouho bude operace trvat, použijte neurčitý progressBar. Při vyplňování virtualizovaného seznamu jsou vhodné také neurčité indikátory průběhu, a pro vytvoření plynulého vizuálního přechodu z neurčitého indikátoru na určený indikátor ProgressBar.

  • Je operace ve virtualizované kolekci?

    Pokud ano, neukládejte indikátor průběhu na každou položku seznamu, jak se zobrazují. Místo toho použijte indikátor Průběhu a umístěte ho do horní části kolekce načtených položek, aby bylo možné zobrazit, že se položky načítají.

ProgressRing – neurčité

Příklad neukončeného stavu ProgressRing

Neurčitý pokrokový prstenec se používá, když je zastavena jakákoli další interakce uživatele s aplikací, nebo když aplikace čeká, až uživatel poskytne vstup pro pokračování. Příklad "Přihlašování..." výše je ideálním scénářem pro funkci ProgressRing; uživatel nemůže pokračovat v používání aplikace, dokud není proces přihlášení dokončen.

ProgressRing – stanovený

Prstencový indikátor průběhu určený příklad

Pokud je známa doba trvání operace a je žádoucí vizuální prvek kruhu, je nejlepší použít určující ProgressRing při instalaci, stahování, nastavování atd.

Vytvořte ovládací prvek průběhu

Otevřete aplikaci WinUI 3 Gallery a podívejte se na ProgressBar nebo ProgressRing.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Oba ovládací prvky průběhu jsou poměrně jednoduché; některé vizuální vlastnosti těchto ovládacích prvků však nejsou snadno přizpůsobitelné.

Určení velikosti ProgressRingu

ProgressRing může mít velikost tak velké, jak chcete, ale může být jen tak malá jako 20x20epx. Pokud chcete změnit velikost progressringu, musíte nastavit jeho výšku a šířku. Pokud nastavíte jenom výšku nebo šířku, bude ovládací prvek předpokládat minimální velikost (20x20epx) – naopak pokud je výška a šířka nastavená na dvě různé velikosti, budou se předpokládat menší velikosti. Abyste zajistili, že váš ProgressRing odpovídá vašim potřebám, nastavte jeho výšku i šířku na stejnou hodnotu:

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

Pokud chcete, aby byl progressRing viditelný a animovat, musíte nastavit vlastnost IsActive na hodnotu true:

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

progressRing.IsActive = true;

Barevné zobrazení ovládacích prvků průběhu

Ve výchozím nastavení je hlavní barvení ovládacích prvků průběhu nastaveno na barvu zvýraznění systému. Chcete-li přepsat tento štětec, jednoduše změňte vlastnost popředí na libovolném ovládacím prvku.

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

Změna barvy popředí pro ProgressRing změní barvu výplně prstence. Vlastnost popředí indikátoru průběhu změní barvu výplně pruhu – chcete-li změnit nevyplněnou část tohoto pruhu, jednoduše přepište vlastnost pozadí.

Zobrazení kurzoru čekání

Někdy je nejlepší pouze ukázat krátkodobý ukazatel čekání, když aplikace nebo operace potřebuje čas na zpracování, a je třeba uživateli naznačit, že s aplikací nebo oblastí, kde je kurzor viditelný, by se nemělo interagovat, dokud nezmizí.

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

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Ovládací prvky průběhu aplikací pro UPW jsou součástí WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API existují pro tento ovládací prvek v názvových oborech Windows.UI.Xaml.Controls a Microsoft.UI.Xaml.Controls.

K získání nejnovějších stylů, šablon a funkcí pro všechny ovládací prvky doporučujeme použít nejnovější winUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tento ovládací prvek, který používá zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

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

<muxc:ProgressBar />
<muxc:ProgressRing />
  • Last updated on