Condividi tramite

Controlli di avanzamento

Un controllo di avanzamento fornisce all'utente un feedback sull'avanzamento di un'operazione in corso a esecuzione prolungata. Può significare che l'utente non può interagire con l'app quando l'indicatore di stato è visibile e può anche indicare quanto tempo di attesa potrebbe essere, a seconda dell'indicatore usato.

Tipi di avanzamento

Sono disponibili due controlli per mostrare all'utente che è in corso un'operazione, tramite progressbar o progressring. ProgressBar e ProgressRing hanno entrambi due stati che indicano se l'utente è in grado di interagire con l'applicazione.

  • Lo stato determinato di ProgressBar e ProgressRing mostra la percentuale di completamento di un'attività. Questo stato deve essere usato per un'operazione con durata conosciuta, ma il cui avanzamento non deve bloccare l'interazione dell'utente con l'app.
  • Lo stato indeterminato di ProgressBar indica che è in corso un'operazione che non blocca l'interazione dell'utente con l'app e il cui tempo di completamento è sconosciuto.
  • Lo stato indeterminato di ProgressRing indica che è in corso un'operazione che blocca l'interazione dell'utente con l'app e il cui tempo di completamento è sconosciuto.

Inoltre, un controllo di avanzamento è di sola lettura e non interattivo. Ciò significa che l'utente non può richiamare o usare direttamente questi controlli.

Controllo Display
Barra di progresso indeterminata ProgressBar indeterminate
ProgressBar con stato determinato ProgressBar - Stato determinato
ProgressRing con stato indeterminato ProgressRing - Stato indeterminato
Anello di progresso determinato Determina lo stato del ProgressRing

Questo è il controllo giusto?

Non è sempre ovvio quale controllo o quale stato (determinato o indeterminato) usare quando si tenta di mostrare qualcosa sta accadendo. A volte un'attività è sufficientemente ovvia e non richiede un controllo di stato mentre altre volte, anche se viene usato un controllo di stato, è comunque necessaria una riga di testo per indicare all'utente quale operazione è in corso.

Barra di avanzamento

  • Il controllo ha una durata definita o una fine prevedibile?

    Quindi usare il ProgressBar determinato e aggiornare di conseguenza la percentuale o il valore.

  • L'utente può continuare a eseguire altre operazioni senza dover monitorare lo stato dell'operazione?

    Quando è in uso un controllo ProgressBar, l'interazione è di tipo non modale, che significa in genere che l'utente non è bloccato in attesa del completamento dell'operazione e può continuare a usare l'app in altri modi fino al termine dell'operazione.

  • Parole chiave

    Se la tua operazione riguarda queste parole chiave, o se insieme allo stato visualizzi un testo che corrisponde a queste parole chiave, allora considera di usare un *ProgressBar*.

    • Caricamento in corso...
    • Recupero
    • Operazione in corso...

Anello di Progresso

  • L'operazione farà aspettare l'utente per continuare?

    Se un'operazione richiede che tutte le interazioni con l'app (o gran parte di esse) avvengano dopo il completamento dell'operazione, è preferibile usare ProgressRing con stato indeterminato.

    • Il controllo ha una durata definita o una fine prevedibile?

    Usa un ProgressRing determinato se vuoi che l'interfaccia sia un anello anziché una barra e aggiorna di conseguenza la percentuale o il valore.

  • L'app è in attesa del completamento di un'attività da parte dell'utente?

    In caso affermativo, usare un controllo ProgressRing con stato indeterminato, che indica un tempo di attesa sconosciuto per l'utente.

  • Parole chiave

    Se la tua operazione riguarda queste parole chiave, o se mostra del testo accanto all'operazione di avanzamento che corrisponde a queste parole chiave, considera l'utilizzo di un controllo ProgressRing:

    • Aggiornamento
    • Accesso in corso...
    • Connessione in corso...

Nessuna indicazione di avanzamento necessaria

  • L'utente deve essere informato di un'operazione in corso?

    Se, ad esempio, l'app sta scaricando qualcosa in background e l'utente non ha avviato il download, non è necessario che gli venga segnalata questa informazione.

  • L'operazione è un'attività in background che non blocca l'attività dell'utente ed è di interesse minimo (ma comunque di interesse) per l'utente?

    Usa il testo quando l'app esegue attività che non devono essere sempre visibili, ma devi comunque visualizzare lo stato.

  • All'utente interessa solo il completamento dell'operazione?

    A volte è preferibile visualizzare una notifica solo quando l'operazione è stata completata o fornire immediatamente un elemento visivo che indichi che l'operazione è stata completata e quindi eseguire gli ultimi ritocchi in background.

Procedure migliori per i controlli di avanzamento

A volte è preferibile vedere alcune rappresentazioni visive di quando e dove usare questi diversi controlli di avanzamento.

ProgressBar - Stato determinato

ProgressBar con stato determinato

Il primo esempio è una barra di avanzamento determinata. Quando è nota la durata dell'operazione, durante l'installazione, il download, la configurazione, ecc.; una determinata ProgressBar è la migliore.

ProgressBar - Indeterminato

Esempio di ProgressBar indeterminata

Quando non si sa quanto tempo richiederà l'operazione, utilizzare una barra di avanzamento indeterminata. I ProgressBar indeterminati sono validi anche quando si compila un elenco virtualizzato e si crea una transizione visiva uniforme tra un ProgressBar indeterminato e una ProgressBar determinata.

  • L'operazione viene eseguita in una raccolta virtualizzata?

    In tal caso, non inserire un indicatore di stato per ogni elemento dell'elenco così come vengono visualizzati. Usa invece il ProgressBar e posizionalo nella parte superiore della raccolta di elementi durante il caricamento, per mostrare che gli elementi vengono recuperati.

Anello di Progresso - Stato indeterminato

Esempio di ProgressRing con stato indeterminato

Il controllo ProgressRing con stato indeterminato viene usato quando qualsiasi ulteriore interazione dell'utente con l'app viene interrotta o l'app è in attesa dell'input dell'utente per continuare. L'esempio di "accesso in corso" sopra rappresenta uno scenario ideale per il ProgressRing, poiché l'utente non può continuare a usare l'app fino a quando l'accesso non è stato completato.

ProgressRing - Stato determinato

Esempio di ProgressRing con stato determinato

Quando si conosce la durata dell'operazione e si desidera utilizzare l'elemento visivo ad anello durante l'installazione, il download, la configurazione e così via, la scelta migliore è un ProgressRing con stato determinato.

Creare un controllo di avanzamento

Aprire l'app Raccolta WinUI e visualizzare ProgressBar o ProgressRing.

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Entrambi i controlli di progresso sono piuttosto semplici, ma personalizzare alcune delle loro funzionalità visive non è semplice.

Il ridimensionamento del ProgressRing

Il ProgressRing può essere grande quanto si desidera, ma non può essere inferiore a 20x20epx. Per ridimensionare un oggetto ProgressRing, è necessario impostarne l'altezza e la larghezza. Se viene impostata solo l'altezza o la larghezza, il controllo presuppone il dimensionamento minimo (20x20epx), viceversa se l'altezza e la larghezza sono impostate su due dimensioni diverse, verranno considerate le dimensioni inferiori. Per assicurarti che il tuo ProgressRing sia corretto per le tue esigenze, imposta l'altezza e la larghezza sullo stesso valore.

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

Per rendere visibile e animare il ProgressRing, è necessario impostare la proprietà IsActive su true:

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

progressRing.IsActive = true;

Colorazione dei controlli di avanzamento

Per impostazione predefinita, la colorazione principale dei controlli di stato è impostata sul colore principale del sistema. Per eseguire l'override di questo pennello, è sufficiente modificare la proprietà in primo piano su entrambi i controlli.

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

La modifica del colore in primo piano per ProgressRing determinerà la modifica del colore di riempimento dell'anello. La proprietà di primo piano di ProgressBar modificherà il colore di riempimento della barra. Per cambiare la parte non riempita della barra, basta eseguire l'override della proprietà di sfondo.

Visualizzazione di un cursore di attesa

A volte è preferibile visualizzare solo un breve cursore di attesa, quando l'app o l'operazione necessita di tempo per l'elaborazione e devi indicare all'utente che non è possibile interagire con l'app o l'area in cui il cursore di attesa è visibile fino a quando il cursore di attesa non scompare.

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

UWP e WinUI per la piattaforma UWP

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

I controlli di stato per le app UWP sono inclusi nell'ambito di WinUI per la piattaforma UWP. Per altre info, incluse le istruzioni di installazione, vedi WinUI per UWP. Le API per questo controllo esistono negli spazi dei nomi Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

Ti consigliamo di usare la versione più recente di WinUI per la piattaforma UWP per ottenere gli stili, i modelli e le funzionalità più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Per usare il codice in questo articolo con WinUI 2, usa un alias in XAML (usiamo muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedi Introduzione a WinUI 2 .

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

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