Descrizioni comandi

  • Articolo

Una descrizione comando è un popup che contiene informazioni aggiuntive su un altro controllo od oggetto. Le descrizioni comando vengono visualizzate automaticamente quando l'utente sposta lo stato attivo, tiene premuto o posiziona il puntatore sul controllo associato. La descrizione comando scompare quando l'utente sposta lo stato attivo da, smette di premere o smette di posizionare il puntatore sul controllo associato (a meno che il puntatore non si sposti verso la descrizione comando).

Nota

A partire da Windows 11 versione 21H2, è anche possibile ignorare una descrizione comando premendo CTRL.

A tooltip

È il controllo giusto?

Usare una descrizione comando per visualizzare altre informazioni su un controllo prima di chiedere all'utente di eseguire un'azione. Le descrizioni comando devono essere usate con moderazione e solo quando aggiungono un valore distinto per l'utente che sta tentando di completare un'attività. Una regola generale è che se le informazioni sono disponibili altrove nella stessa esperienza, non è necessaria una descrizione comando. Una descrizione comando utile chiarirà un'azione poco chiara.

Quando bisogna usare un descrizione comando? Per decidere, considerare queste domande:

  • Le info devono diventare visibili in base al passaggio del puntatore? In caso contrario, usare un altro controllo. Visualizzare suggerimenti solo come risultato dell'interazione dell'utente, non visualizzarli mai autonomamente.

  • Un controllo ha un'etichetta di testo? In caso contrario, usare una descrizione comando per specificare l'etichetta. È una buona procedura di progettazione dell'esperienza utente etichettare la maggior parte dei controlli inline e per questi non sono necessarie descrizioni comando. I controlli della barra degli strumenti e i pulsanti di comando che mostrano solo le icone che necessitano di descrizioni comando.

  • Per un oggetto possono essere utili altre info o una descrizione? In tal caso, usare una descrizione comando. Ma il testo deve essere supplementare, cioè non essenziale per le attività primarie. Se è essenziale, inserirlo direttamente nell'interfaccia utente in modo che gli utenti non devono individuarlo o cercarlo.

  • Le info supplementari sono costituite da un errore, un avviso o uno stato? In tal caso, usare un altro elemento dell'interfaccia utente, ad esempio un riquadro a comparsa.

  • Gli utenti devono interagire con la descrizione comando? In tal caso, usare un altro controllo. Gli utenti non possono interagire con i suggerimenti perché lo spostamento del mouse li fa scomparire.

  • Gli utenti devono stampare le info supplementari? In tal caso, usare un altro controllo.

  • Gli utenti troveranno le descrizioni comandi fastidiose o svianti? In tal caso, prendere in considerazione l'uso di un'altra soluzione, incluso non attivare alcuna operazione. Se si usano suggerimenti che potrebbero distrarre, consentire agli utenti di disattivarli.

Consigli

  • Usare le descrizioni comandi con parsimonia (o non usarle affatto). Le descrizioni comando sono un'interruzione. Una descrizione comando può distrarre come popup, quindi non usarle a meno che non aggiungano un valore significativo.
  • Mantenere conciso il testo della descrizione comando. Le descrizioni comando sono perfette per frasi brevi e frammenti di frase. Grandi blocchi di testo possono confondere e la descrizione comando potrebbe andare in time out prima che l'utente abbia finito di leggere.
  • Creare testo della descrizione comando utile e supplementare. Il testo della descrizione comando deve essere informativo. Non rendere ovvio o semplicemente ripetere ciò che è già presente sullo schermo. Poiché il testo della descrizione comando non è sempre visibile, deve essere un'informazione supplementare che gli utenti non devono leggere. Comunicare informazioni importanti usando etichette di controllo autoesplicative o testo supplementare sul posto.
  • Usare le immagini quando appropriato. A volte in una descrizione comando è preferibile usare un'immagine. Ad esempio, quando l'utente passa il puntatore del mouse su un collegamento ipertestuale, è possibile usare una descrizione comando per visualizzare un'anteprima della pagina collegata.
  • Tasti di scelta rapida vengono visualizzati nelle descrizioni comando per impostazione predefinita. Se si aggiunge una descrizione comando personalizzata, assicurarsi che includa informazioni sui tasti di scelta rapida disponibili.
  • Non usare una descrizione comando per visualizzare il testo già visibile nell'interfaccia utente. Ad esempio, non inserire una descrizione comando su un pulsante che mostra lo stesso testo del pulsante.
  • Non inserire controlli interattivi all'interno della descrizione comando.
  • Non inserire immagini che sembrano interattive all'interno della descrizione comando.

Piattaforma UWP e WinUI 2

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.

Le API per questo controllo sono presenti nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli 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.

Creare una descrizione comando

Aprire l'app Raccolta WinUI 3 e visualizzare ToolTip in azione.

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

Una descrizione comando deve essere assegnata a un altro elemento dell'interfaccia utente che ne è il proprietario. La classe ToolTipService fornisce i metodi statici per visualizzare una descrizione comando.

In XAML, usa la proprietà associata ToolTipService per assegnare la descrizione comando a un proprietario.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

Nel codice, usa il metodo ToolTipService.SetToolTip per assegnare la descrizione comando a un proprietario.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Sommario

È possibile usare qualsiasi oggetto come il contenuto di una descrizione comando. Ecco un esempio dell'uso di un'immagine in una descrizione comando.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Collocazione

Per impostazione predefinita, una descrizione comando viene visualizzata al centro sopra il puntatore. La posizione host non è vincolata dalla finestra dell'app, pertanto la descrizione comando può essere visualizzata parzialmente o completamente di fuori dei limiti della finestra dell'app.

Per adattamenti di massima, usa la proprietà Placement o la proprietà associata ToolTipService.Placement per per specificare se la descrizione comando va disegnata sopra, sotto, a sinistra o a destra del puntatore. Puoi impostare le proprietà VerticalOffset o HorizontalOffset per modificare la distanza tra il puntatore e la descrizione comando. Solo uno dei due valori di offset interferisce con la posizione finale: VerticalOffset quando Placement è Top o Bottom, HorizontalOffset quando Placement è Left o Right.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Se una descrizione comando nasconde il contenuto a cui si riferisce, è possibile modificare la posizione in modo preciso con la proprietà PlacementRect. La proprietà PlacementRect ancora la posizione della descrizione comando e funge anche da area che non verrà coperta dalla descrizione comando, purché sia disponibile spazio su schermo sufficiente per disegnare la descrizione comando al di fuori di quest'area. Puoi specificare l'origine del rettangolo rispetto al proprietario della descrizione comando, nonché l'altezza e la larghezza dell'area di esclusione. La proprietà Placement definirà se la descrizione comando deve essere disegnata sopra, sotto, a sinistra o a destra della proprietà PlacementRect.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

Scaricare il codice di esempio