Descrizione informativa
Una descrizione informativa è un riquadro a comparsa semipermanente ricco di contenuti che offre informazioni contestuali. Viene spesso usata per offrire agli utenti informazioni, suggerimenti e istruzioni su funzionalità nuove e importanti che possono contribuire a migliorare la loro esperienza.
Una descrizione informativa può scomparire quando si tocca lo schermo (light dismiss) oppure può richiedere un'azione esplicita per la chiusura. Una descrizione informativa può fare riferimento con la freccia a un elemento specifico dell'interfaccia utente, definito come destinazione, o essere usata anche senza fare riferimento ad alcun elemento.
È il controllo giusto?
Un controllo TeachingTip è utile per attirare l'attenzione dell'utente su funzionalità e aggiornamenti nuovi e importanti, suggerirgli opzioni non essenziali che potrebbero migliorare la sua esperienza o fornirgli indicazioni su come completare un'attività.
Poiché una descrizione informativa è temporanea, non è consigliabile usare questo controllo per segnalare agli utenti errori o cambiamenti di stato importanti.
Consigli
- Le descrizioni informative non sono permanenti e non devono contenere informazioni o opzioni che sono fondamentali per l'esperienza di un'applicazione.
- Cerca di evitare di mostrare descrizioni informative con eccessiva frequenza. Le descrizioni informative hanno maggiori probabilità di attirare l'attenzione dell'utente quando vengono visualizzate in modo scaglionato nel corso di lunghe sessioni o tra più sessioni.
- Presenta le informazioni in modo chiaro e sintetico. Dalle ricerche risulta che gli utenti leggono in media solo 3-5 parole e ne comprendono solo 2-3 prima di decidere se interagire con una descrizione informativa.
- Non è garantita l'accessibilità alle descrizioni informative tramite game pad. Per le applicazioni che prevedono l'input tramite game pad, vedi la sezione sulle interazioni tramite game pad e controllo remoto. È consigliabile testare l'accessibilità tramite game pad di ogni descrizione informativa usando tutte le possibili configurazioni dell'interfaccia utente di un'app.
- Quando una descrizione informativa può uscire dai limiti della radice XAML, è consigliabile abilitare anche la proprietà IsLightDismissEnabled e impostare la modalità PreferredPlacement il più vicino possibile al centro della radice XAML.
Riconfigurazione di una descrizione informativa aperta
Il contenuto e le proprietà di una descrizione informativa possono essere in parte riconfigurati quando la descrizione è aperta. In tal caso, le modifiche avranno effetto immediato. Per la riconfigurazione di altro contenuto e proprietà, come la proprietà dell'icona, i pulsanti di azione e di chiusura e l'impostazione per far scomparire una descrizione informativa al tocco dello schermo o con un'azione esplicita, dovrai chiudere e riaprire la descrizione per rendere effettive le modifiche. Tieni presente che, se modifichi il comportamento relativo alla scomparsa della descrizione informativa passando dalla modalità manuale a quella con tocco dello schermo, il pulsante di chiusura viene rimosso prima che la nuova modalità sia abilitata e la descrizione può rimanere bloccata sullo schermo.
Esempi
Una descrizione informativa può avere più configurazioni. Di seguito sono indicate le più significative:
Una descrizione informativa può fare riferimento con la freccia a un elemento specifico dell'interfaccia utente per una migliore chiarezza contestuale delle informazioni presentate.
Quando le informazioni presentate non riguardano un particolare elemento dell'interfaccia utente, è possibile creare una descrizione informativa senza destinazione.
Per chiudere una descrizione informativa, l'utente può dover fare clic su un pulsante "X" in un angolo in alto oppure su un pulsante di chiusura in basso. Una descrizione informativa può anche scomparire quando si tocca lo schermo. In tal caso, non è disponibile alcun pulsante di chiusura e la descrizione informativa scompare quando l'utente scorre l'interfaccia o interagisce con altri elementi dell'applicazione. Considerato questo comportamento, le descrizioni informative di questo tipo offrono la soluzione ideale quando è necessario posizionare una descrizione in un'area scorrevole.
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.
La descrizione informativa per le app UWP richiede la libreria dell'interfaccia utente di Windows 2. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows. Le API per questo controllo esistono nello spazio dei nomi Microsoft.UI.Xaml.Controls.
- Classe WinUI 2 Apis:TeachingTip
- Aprire l'app Raccolta WinUI 2 e visualizzare TeachingTip in azione. L'app Raccolta WinUI 2 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 2. Ottenere l'app da Microsoft Store o visualizzare il codice sorgente in GitHub.
Per usare il codice in questo articolo con WinUI 2, usare un alias in XAML (si usa muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedere Attività iniziali di WinUI 2.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TeachingTip />
Creare una descrizione informativa
- API importanti:Classe TeachingTip
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
Di seguito è riportato il codice XAML per una descrizione informativa con destinazione che illustra l'aspetto predefinito del controllo TeachingTip con titolo e sottotitolo. Tieni presente che la descrizione informativa può trovarsi in qualsiasi punto della struttura ad albero degli elementi o del code-behind. Nell'esempio seguente si trova in un oggetto ResourceDictionary.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Save automatically"
Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to.">
</TeachingTip>
</Button.Resources>
</Button>
public MainPage()
{
this.InitializeComponent();
if(!HaveExplainedAutoSave())
{
AutoSaveTip.IsOpen = true;
SetHaveExplainedAutoSave();
}
}
Ecco come viene visualizzata la pagina contenente il pulsante e la descrizione informativa:
Nell'esempio precedente, le proprietà Titolo e Sottotitolo vengono usate per impostare il titolo e il sottotitolo del suggerimento per l'insegnamento. La proprietà Destinazione è impostata su "SaveButton" per stabilire la connessione visiva con il pulsante. Per visualizzare il suggerimento per l'insegnamento, la relativa proprietà IsOpen di apertura è impostata su true.
Descrizioni informative senza destinazione
Non tutte le descrizioni informative sono correlate a un elemento sullo schermo. Per gli scenari di questo tipo, la proprietà Target non viene impostata e la descrizione informativa viene visualizzata rispetto ai bordi della radice XAML. È tuttavia possibile rimuovere la freccia e mantenere la posizione della descrizione informativa rispetto a un elemento dell'interfaccia utente impostando la proprietà TailVisibility su "Collapsed". L'esempio seguente illustra una descrizione informativa senza destinazione.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
</TeachingTip>
Puoi notare che in questo esempio il controllo TeachingTip si trova nella struttura ad albero degli elementi invece che in un oggetto ResourceDictionary o nel code-behind. Ciò non ha alcun effetto sul comportamento. Il controllo TeachingTip viene visualizzato solo quando è aperto e non occupa spazio nel layout.
Posizionamento preferito
Una descrizione informativa replica il comportamento di posizionamento FlyoutPlacementMode del controllo Flyout con la proprietà PreferredPlacement. La modalità di posizionamento predefinita prova a posizionare una descrizione informativa con destinazione al di sopra della destinazione stessa e una descrizione informativa senza destinazione al centro nella parte inferiore della radice XAML. Come con il controllo Flyout, se la modalità di posizionamento preferita non consente la visualizzazione della descrizione informativa, viene selezionata automaticamente un'altra modalità di posizionamento.
Per le applicazioni che prevedono l'input tramite game pad, vedi la sezione sulle interazioni tramite game pad e controllo remoto. È consigliabile testare l'accessibilità tramite game pad di ogni descrizione informativa usando tutte le possibili configurazioni dell'interfaccia utente di un'app.
Una descrizione informativa con destinazione in cui la proprietà PreferredPlacement è impostata su "BottomLeft" viene visualizzata con la freccia centrata rispetto alla parte inferiore della destinazione e il corpo spostato verso sinistra.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft">
</TeachingTip>
</Button.Resources>
</Button>
Una descrizione informativa senza destinazione in cui la proprietà PreferredPlacement è impostata su "BottomLeft" viene visualizzata nell'angolo in basso a sinistra della radice XAML.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft">
</TeachingTip>
Il diagramma seguente illustra il risultato di tutte e 13 le modalità PreferredPlacement che possono essere impostate per le descrizioni informative con destinazione.
Il diagramma seguente illustra il risultato di tutte le modalità PreferredPlacement che possono essere impostate per le descrizioni informative senza destinazione.
Aggiungere un margine di posizionamento
Usando la proprietà PlacementMargin, è possibile controllare lo scostamento di una descrizione informativa con destinazione rispetto alla destinazione stessa oppure lo scostamento di una descrizione informativa senza destinazione rispetto ai bordi della radice XAML. Come la proprietà Margin, PlacementMargin ha quattro valori (Left, Right, Top e Bottom) e pertanto vengono usati solo i valori pertinenti. PlacementMargin.Left, ad esempio, viene applicata quando la descrizione si trova a sinistra della destinazione o sul bordo sinistro della radice XAML.
L'esempio seguente mostra una descrizione informativa senza destinazione con Left/Top/Right/Bottom di PlacementMargin impostati tutti su 80.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft"
PlacementMargin="80">
</TeachingTip>
Aggiungere contenuto
Usando la proprietà Content, è possibile aggiungere contenuto a una descrizione informativa. Se è presente più contenuto da visualizzare rispetto alle dimensioni della descrizione informativa, verrà abilitata automaticamente una barra di scorrimento per consentire a un utente di scorrere l'area di contenuto.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
<StackPanel>
<CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
<TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
</StackPanel>
</TeachingTip>
</Button.Resources>
</Button>
Aggiungi pulsanti
Per impostazione predefinita, accanto al titolo di una descrizione informativa è visualizzato un pulsante "X" standard per la chiusura. È possibile personalizzare il pulsante di chiusura con la proprietà CloseButtonContent, che consente di spostarlo nella parte inferiore della descrizione informativa.
Nota: il pulsante di chiusura non è presente nelle descrizioni informative che scompaiono quando si tocca lo schermo
È possibile inoltre aggiungere un pulsante di azione personalizzato impostando la proprietà ActionButtonContent e, facoltativamente, le proprietà ActionButtonCommand e ActionButtonCommandParameter.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
ActionButtonContent="Disable"
ActionButtonCommand="{x:Bind DisableAutoSaveCommand}"
CloseButtonContent="Got it!">
<StackPanel>
<CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
<TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
</StackPanel>
</TeachingTip>
</Button.Resources>
</Button>
Contenuto Hero
È possibile aggiungere contenuto da bordo a bordo a una descrizione informativa impostando la proprietà HeroContent. La posizione del contenuto Hero può essere impostata nella parte superiore o in quella inferiore della descrizione informativa tramite la proprietà HeroContentPlacement.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
<TeachingTip.HeroContent>
<Image Source="Assets/cloud.png" />
</TeachingTip.HeroContent>
</TeachingTip>
</Button.Resources>
</Button>
Aggiungere un'icona
È possibile aggiungere un'icona accanto al titolo e al sottotitolo usando la proprietà IconSource. Per le icone sono consigliate dimensioni di 16, 24 e 32 pixel.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
<TeachingTip.IconSource>
<SymbolIconSource Symbol="Save" />
</TeachingTip.IconSource>
</TeachingTip>
</Button.Resources>
</Button>
Abilitare la funzionalità light dismiss
La funzionalità che consente a un elemento di scomparire quando si tocca lo schermo (light dismiss) è disabilitata per impostazione predefinita, ma può essere abilitata impostando la proprietà IsLightDismissEnabled per fare in modo che una descrizione informativa scompaia, ad esempio, quando un utente scorre l'interfaccia o interagisce con altri elementi dell'applicazione. Considerato questo comportamento, le descrizioni informative di questo tipo offrono la soluzione ideale quando è necessario posizionare una descrizione in un'area scorrevole.
Il pulsante di chiusura verrà rimosso automaticamente da una descrizione informativa di questo tipo per indicare agli utenti che scomparirà quando toccano lo schermo.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
IsLightDismissEnabled="True">
</TeachingTip>
Sottrarsi ai limiti della radice XAML
A partire da Windows 10, versione 1903 (build 18362), una descrizione informativa può sottrarsi ai limiti della radice XAML e della schermata impostando la proprietà ShouldConstrainToRootBounds. Quando questa proprietà è abilitata, una descrizione informativa non tenterà di rimanere entro i limiti della radice XAML o della schermata e si posizionerà sempre in base alla modalità PreferredPlacement impostata. Per garantire un'esperienza ottimale per gli utenti, è consigliabile abilitare la proprietà IsLightDismissEnabled e impostare la modalità PreferredPlacement il più vicino possibile al centro della radice XAML.
Nelle versioni precedenti di Windows questa proprietà viene ignorata e la descrizione informativa rimane sempre entro i limiti della radice XAML.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomRight"
PlacementMargin="-80,-50,0,0"
ShouldConstrainToRootBounds="False">
</TeachingTip>
Annullamento e rinvio della chiusura
È possibile usare l'evento Closing per annullare e/o rinviare la chiusura di una descrizione informativa. Questo evento è utile per mantenere aperta la descrizione informativa o attendere che venga prima eseguita un'azione o un'animazione personalizzata. Quando la chiusura di una descrizione informativa viene annullata, IsOpen viene reimpostata su true, ma rimane false durante la fase di rinvio. Anche una chiusura programmatica può essere annullata.
Nota
se nessuna opzione di posizionamento consente la visualizzazione completa di una descrizione informativa, questa eseguirà l'iterazione del ciclo di vita dell'evento per forzare una chiusura anziché essere visualizzata senza un pulsante di chiusura accessibile. Se l'app annulla l'evento Closing, la descrizione informativa può rimanere aperta senza un pulsante di chiusura accessibile.
<TeachingTip x:Name="EnableNewSettingsTip"
Title="New ways to protect your privacy!"
Subtitle="Please close this tip and review our updated privacy policy and privacy settings."
Closing="OnTipClosing">
</TeachingTip>
private void OnTipClosing(muxc.TeachingTip sender, muxc.TeachingTipClosingEventArgs args)
{
if (args.Reason == muxc.TeachingTipCloseReason.CloseButton)
{
using(args.GetDeferral())
{
bool success = UpdateUserSettings(User thisUsersID);
if(!success)
{
// We were not able to update the settings!
// Don't close the tip and display the reason why.
args.Cancel = true;
ShowLastErrorMessage();
}
}
}
}
Articoli correlati
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per