InfoBar

Il controllo InfoBar consente agli utenti di visualizzare messaggi di stato a livello di app che sono altamente visibili ma non intrusivi. Sono disponibili livelli di gravità predefiniti per indicare facilmente il tipo di messaggio visualizzato, nonché l'opzione per includere l'invito all'azione o il pulsante di collegamento ipertestuale. Poiché il controllo InfoBar è inline con altri contenuti dell'interfaccia utente, l'opzione è disponibile perché il controllo sia sempre visibile o venga ignorato dall'utente.

È il controllo giusto?

Usare un controllo InfoBar quando un utente deve essere informato o deve confermare o attivarsi di fronte a uno stato modificato dell'applicazione. Per impostazione predefinita, la notifica rimarrà nell'area del contenuto fino a quando non verrà chiusa dall'utente, ma non interromperà necessariamente il flusso utente.

Un controllo InfoBar occupa spazio nel layout e si comporta come qualsiasi altro elemento figlio. Non copre altro contenuto e non vi galleggia sopra.

Non usare un controllo InfoBar per confermare o rispondere direttamente a un'azione dell'utente che non modifica lo stato dell'app, per gli avvisi che dipendono dall'ora o per messaggi non essenziali.

Osservazioni:

Usare un controllo InfoBar che viene chiuso dall'utente o quando lo stato viene risolto per scenari che influiscono direttamente sulla percezione o sull'esperienza dell'app.

Di seguito sono riportati alcuni esempi.

• Connettività Internet persa
• Errore durante il salvataggio di un documento attivato automaticamente, non correlato a un'azione utente specifica
• Microfono non collegato durante il tentativo di registrazione
• La sottoscrizione all'applicazione è scaduta

Usare un controllo InfoBar che viene chiuso dall'utente per scenari che influiscono indirettamente sulla percezione o sull'esperienza dell'app.

Di seguito sono riportati alcuni esempi.

• È iniziata la registrazione di una chiamata
• Aggiornamento applicato con collegamento a "Note sulla versione"
• Le condizioni d'uso sono state aggiornate ed è richiesta l'accettazione
• Un backup a livello di app è stato completato in modo asincrono
• La sottoscrizione all'applicazione sta per scadere

Scenari per l'uso di un controllo diverso

In alcuni scenari può essere più appropriato usare un controllo ContentDialog, Flyout o TeachingTip.

• Per gli scenari in cui non è necessaria una notifica persistente, ad esempio per la visualizzazione di informazioni nel contesto di un elemento specifico dell'interfaccia utente, un'opzione più adatta è rappresentata dal controllo Flyout.
• Per gli scenari in cui l'applicazione conferma un'azione dell'utente visualizzando le informazioni che l'utente deve leggere, usare un controllo ContentDialog.
  • Inoltre, se una modifica dello stato dell'app è talmente grave che è necessario impedire all'utente di interagire ulteriormente con l'app, usare un controllo ContentDialog.
• Per gli scenari in cui una notifica è un'istruzione temporanea, l'opzione migliore è rappresentata da un controllo TeachingTip.

Per altre informazioni sulla scelta del controllo di notifica appropriato, vedere l'articolo Finestre di dialogo e riquadri a comparsa.

Consigli

Usabilità di elementi in entrata e in uscita

Contenuto lampeggiante

Per evitare immagini lampeggianti sullo schermo, il controllo InfoBar non deve apparire e scomparire dalla vista rapidamente. Evitare oggetti visivi lampeggianti per gli utenti con fotosensibilità e per migliorare l'usabilità dell'applicazione.

Per i controlli InfoBar che entrano ed escono automaticamente dalla vista tramite una condizione di stato dell'app, è consigliabile includere nell'applicazione la logica necessaria per impedire che il contenuto appaia e scompaia rapidamente o più volte in una riga. In generale, tuttavia, questo controllo deve essere usato per messaggi di stato di lunga durata.

Aggiornamento del controllo InfoBar

Una volta aperto il controllo, tutte le modifiche apportate alle diverse proprietà, ad esempio l'aggiornamento del messaggio o della gravità, non genereranno un evento di notifica. Se si vogliono informare gli utenti che usano utilità per la lettura dello schermo che il contenuto di InfoBar è stato aggiornato, è consigliabile chiudere e riaprire il controllo per attivare l'evento.

Messaggi inline che determinano uno scostamento del contenuto

Per i controlli InfoBar che sono inline con altri contenuti dell'interfaccia utente, tenere presente il modo in cui il resto della pagina reagirà in risposta all'aggiunta dell'elemento.

I controlli InfoBar con un'altezza considerevole possono modificare notevolmente il layout degli altri elementi presenti nella pagina. Se il controllo InfoBar compare o scompare rapidamente, specialmente in successione, è possibile che l'utente rimanga confuso dallo stato di visualizzazione mutevole.

Colore e icona

Quando si personalizzano il colore e l'icona al di fuori dei livelli di gravità predefiniti, tenere presenti le aspettative degli utenti per quanto riguarda le connotazioni del set di icone e colori standard.

Inoltre, i colori predefiniti dei livelli di gravità sono già stati progettati per le modifiche del tema, la modalità a contrasto elevato, l'accessibilità dei colori e il contrasto con i colori di primo piano. È consigliabile usare questi colori, se possibile, e includere nell'applicazione la logica personalizzata per l'adattamento ai vari stati di colore e funzionalità di accessibilità.

Visualizzare le linee guida dell'esperienza utente relative a Icone standard e Colore per assicurarsi che il messaggio fornito venga comunicato in modo chiaro e accessibile per gli utenti.

Gravità

Evitare di impostare la proprietà Severity per una notifica che non corrisponde alle informazioni comunicate nel titolo, nel messaggio o nel contenuto personalizzato.

Per l'uso di Severity, le informazioni complementari devono mirare a comunicare quanto segue.

• Errore: errore o problema che si è verificato.
• Attenzione: condizione che potrebbe causare un problema in futuro.
• Successo: è stata completata un'attività in background e/o a esecuzione prolungata.
• Default: informazioni generali a cui l'utente deve prestare attenzione.

Icone e colore non devono essere gli unici componenti dell'interfaccia utente che indicano il significato della notifica. Per visualizzare le informazioni, è necessario includere il testo nel titolo e/o nel messaggio della notifica.

Message

Il testo della notifica non ha una lunghezza costante in tutte le lingue. Per le proprietà Title e Message, questo può influire sull'espansione della notifica a una seconda riga. È consigliabile evitare il posizionamento in base alla lunghezza del messaggio o ad altri elementi dell'interfaccia utente impostati su una lingua specifica.

La notifica seguirà il comportamento di mirroring standard quando viene localizzata da/verso le lingue con direzione da destra a sinistra (RTL) o da sinistra a destra (LTR). Il mirroring dell'icona verrà eseguito se è specificata la direzionalità.

Per altre informazioni sulla localizzazione del testo della notifica, vedere le linee guida per Modificare layout e tipi di carattere e supportare RTL.

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 InfoBar 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 Apis:InfoBar di WinUI 2
• Aprire l'app Raccolta WinUI 2 e vedere InfoBar 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:InfoBar />

Creare un controllo InfoBar

• API importanti:Classe InfoBar

Aprire l'app Raccolta WinUI 3 e vedere InfoBar 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

Il codice XAML seguente descrive un controllo InfoBar inline con lo stile predefinito per una notifica informativa. Una barra informazioni può essere posizionata come qualsiasi altro elemento e seguirà il comportamento del layout di base. Ad esempio, in un elemento StackPanel verticale il controllo InfoBar si espande orizzontalmente in modo da riempire la larghezza disponibile.

Per impostazione predefinita, il controllo InfoBar non è visibile. Per visualizzarlo, impostare la proprietà IsOpen su true nel codice XAML o nel code-behind.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Uso di livelli di gravità predefiniti

È possibile impostare il tipo di barra informazioni tramite la proprietà Severity per impostare automaticamente un colore di stato coerente, un'icona e impostazioni di assistive technology in base alla criticità della notifica. Se non è impostato alcun livello di gravità, viene applicato lo stile informativo predefinito.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

Chiusura di InfoBar a livello di codice

Un controllo InfoBar può essere chiuso dall'utente tramite il pulsante di chiusura o a livello di codice. Se è necessario che la notifica venga visualizzata fino a quando lo stato non viene risolto e si vuole impedire all'utente di chiudere la barra informazioni, è possibile impostare la proprietà IsClosable su false.

Il valore predefinito di questa proprietà è true, nel qual caso il pulsante di chiusura è presente e ha la forma di una "X".

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Personalizzazione: colore e icona di sfondo

Oltre ai livelli di gravità predefiniti, è possibile impostare le proprietà Background e IconSource per personalizzare l'icona e il colore di sfondo. Il controllo InfoBar mantiene le impostazioni di assistive technology al livello di gravità definito oppure imposta i valori predefiniti se non è stato definito alcun valore.

È possibile impostare un colore di sfondo personalizzato tramite la proprietà Background standard, che sostituirà il colore impostato in base alla gravità. Quando si imposta un colore personalizzato, tenere presenti gli aspetti della leggibilità e dell'accessibilità del contenuto.

È possibile impostare un'icona personalizzata tramite la proprietà IconSource. Per impostazione predefinita, un'icona è visibile (presupponendo che il controllo non sia compresso). L'icona può essere rimossa impostando la proprietà IsIconVisible su false. Per le icone personalizzate, le dimensioni consigliate sono 20px.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Pulsante Aggiungi un'azione

È possibile inserire un pulsante di azione aggiuntivo definendo un pulsante che eredita ButtonBase e impostandolo nella proprietà ActionButton. Lo stile personalizzato viene applicato ai pulsanti di azione di tipo Button e HyperlinkButton per motivi di coerenza e accessibilità. Oltre che nella proprietà ActionButton, i pulsanti di azione aggiuntivi possono essere aggiunti tramite contenuto personalizzato e verranno visualizzati sotto il messaggio.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Pulsante azione allineato a destra

Per impostazione predefinita, il pulsante azione è allineato a sinistra nello spazio disponibile direttamente a destra del messaggio. Facoltativamente, puoi impostare HorizontalAlignment su "right" nel pulsante per allineare questo pulsante in modo che sia direttamente a sinistra del pulsante di chiusura nella singola riga, orizzontale, layout.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

Wrapping del contenuto

Se il contenuto di InfoBar, escluso quello personalizzato, non può entrare in una singola linea orizzontale, verrà disposto verticalmente. Titolo, messaggio e pulsante di azione, se presente, verranno visualizzati ciascuno su righe separate.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Contenuto personalizzato

È possibile aggiungere contenuto XAML a un controllo InfoBar usando la proprietà Content. Tale contenuto aggiuntivo verrà visualizzato in una riga specifica sotto il resto del contenuto del controllo. Il controllo InfoBar si espanderà in modo da adattarsi al contenuto definito.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Lightweight styling

È possibile modificare le proprietà Style e ControlTemplate predefinite per assegnare al controllo un aspetto esclusivo. Per un elenco delle risorse dei temi disponibili, vedere la sezione Stile e modello di un controllo della documentazione relativa all'API InfoBar.

Per altre informazioni, vedere la sezione Applicazione di stili leggeri dell'articolo Controlli di stile.

Il codice seguente, ad esempio, fa sì che il colore di sfondo di tutti i controlli InfoBar di carattere informativo presenti in una pagina sia blu:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Annullamento della chiusura

È possibile usare l'evento Closing per annullare e/o rinviare la chiusura di un controllo InfoBar. Questo evento è utile per mantenere aperto il controllo InfoBar o attendere che venga prima eseguita un'azione personalizzata. Quando la chiusura di un controllo InfoBar viene annullata, la proprietà IsOpen viene reimpostata su true. Anche una chiusura programmatica può essere annullata.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}

Articoli correlati

• Finestre di dialogo e riquadri a comparsa