Condividi tramite

Suggerimenti

  • 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, smette di premere sul, oppure 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 chiudere una descrizione comandi premendo il tasto CTRL.

Un suggerimento

È il controllo giusto?

Usa una descrizione comando per visualizzare ulteriori informazioni su un controllo prima di chiedere all'utente di eseguire un'azione. Le tooltip dovrebbero essere usate con moderazione e solo quando aggiungono un valore distinto per l'utente che sta cercando di portare a termine un compito. Una regola generale è che, se le informazioni sono disponibili altrove all'interno della stessa esperienza, non è necessaria una descrizione comando. Una tooltip utile spiegherà un'azione poco chiara.

Quando dovresti usare un tooltip? 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? Se no, usare un tooltip per fornire 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 icone necessitano di descrizioni comandi.

  • Per un oggetto possono essere utili altre info o una descrizione? In tal caso, usare un tooltip. 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, utilizza un altro elemento dell'interfaccia utente, ad esempio un riquadro a comparsa.

  • Gli utenti devono interagire con il suggerimento? 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 i suggerimenti fastidiosi o distraenti? In tal caso, prendere in considerazione l'uso di un'altra soluzione, incluso non fare nulla. Se si usano suggerimenti che potrebbero distrarre, consentire agli utenti di disattivarli.

Consigli

  • Usare le descrizioni comandi con moderazione (o non usarle affatto). Le descrizioni comando sono un'interruzione. Una descrizione comando può distrarre come un popup, quindi non usarla a meno che non aggiunga un valore significativo.
  • Mantenere conciso il testo del tooltip. Le descrizioni comando sono perfette per frasi brevi e frammenti di frase. Grandi blocchi di testo possono essere opprimenti e il tooltip potrebbe scadere prima che l'utente abbia terminato di leggere.
  • Creare testo utile e supplementare per le descrizioni comando. Il testo del tooltip 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 dovrebbero dover leggere. Comunicare informazioni importanti usando etichette di controllo autoesplicative o testo supplementare sul posto.
  • Usare le immagini quando appropriato. A volte è preferibile usare un'immagine in un tooltip. Ad esempio, quando l'utente passa il puntatore del mouse su un collegamento ipertestuale, è possibile utilizzare un tooltip 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 un suggerimento per visualizzare il testo già visibile nell'interfaccia utente. Ad esempio, non inserire un messaggio 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 del tooltip.

Creare una descrizione comando

Aprire l'app WinUI 3 Gallery e vedere la descrizione comando 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 metodi statici per visualizzare una descrizione comando.

In XAML, usa la proprietà associata/o ToolTipService.Tooltip per assegnare il ToolTip 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 elemento proprietario.

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

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

Contenuto

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

<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. Il posizionamento non è vincolato dalla finestra dell'app, pertanto la descrizione comando può essere visualizzata parzialmente o completamente al di fuori dei limiti della finestra dell'app.

Per adattamenti di massima, usa la proprietà Placement o la proprietà associata ToolTipService.Placement per specificare se il tooltip va disegnato sopra, sotto, a sinistra o a destra del puntatore. Puoi impostare le proprietà VerticalOffset o HorizontalOffset per modificare la distanza tra il puntatore e il ToolTip. 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 fissa la posizione della descrizione comando e funge anche da area che non verrà occultata dalla descrizione comando, a condizione che vi sia spazio sufficiente sullo schermo per disegnare la descrizione comando al di fuori di quest'area. Puoi specificare la posizione del rettangolo rispetto al proprietario del ToolTip, oltre all'altezza e alla 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>

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.