Notifica informazioni

Il badge è un modo non intrusivo e intuitivo per visualizzare le notifiche o portare l'attenzione su un'area all'interno di un'app, che si tratti di notifiche, indicazione di nuovi contenuti o visualizzazione di un avviso. info badge è una piccola parte dell'interfaccia utente che può essere aggiunta a un'app e personalizzata per visualizzare un numero, un'icona o un semplice punto.

info badge è integrato in XAML navigation view, ma può anche essere inserito come elemento autonomo nell'albero XAML, consentendo di inserire info badge in qualsiasi controllo o parte dell'interfaccia utente scelta. Quando si usa un elemento info badge diverso da navigation view, si è responsabili di determinare a livello di codice quando visualizzare e ignorare e info badgedove posizionare info badge.

È il controllo giusto?

Un info badge oggetto deve essere usato quando vuoi portare lo stato attivo dell'utente a una determinata area della tua app in modo intrusivo. Quando viene visualizzato un oggetto info badge , è progettato per portare lo stato attivo in un'area e quindi consentire all'utente di tornare al flusso, dando loro la scelta di esaminare o meno i dettagli del motivo info badge per cui è apparso. Le notifiche di informazioni devono rappresentare solo i messaggi non consentiti e non permanenti: un info badge oggetto deve avere regole specifiche per quanto riguarda quando può apparire, scomparire e cambiare.

Esempi di utilizzo appropriato info badge :

• Per indicare che sono arrivati nuovi messaggi.
• Per indicare che sono disponibili nuovi articoli da leggere.
• Per indicare che sono disponibili nuove opzioni in una pagina.
• Per indicare che potrebbe verificarsi un problema con un elemento in una determinata pagina che non impedisce il funzionamento dell'app.

Scenari per l'uso di un controllo diverso

Un info badge oggetto non deve essere usato per visualizzare errori critici o trasmettere messaggi estremamente importanti che richiedono un'azione immediata. Le notifiche info non devono essere usate nei casi in cui è necessario interagire immediatamente con per continuare a usare l'app.

Esempi di utilizzo non appropriato info badge :

• Per indicare una questione urgente in una pagina all'interno dell'app che deve essere risolta prima di continuare a usare l'app. Per questo scenario, utilizzare un content dialog.
• La visualizzazione in un'app non consente all'utente di ignorare .info badge. Per un avviso permanente come questo, usare un oggetto info bar.
• Uso di info badge come modo permanente per portare lo stato attivo dell'utente in un'area, senza un modo per consentire all'utente di ignorare info badge.
• Uso di un'icona info badge o di un'immagine normale nell'app. Usare invece in modo appropriato un'immagine o icona (vedere IconElement e IconSource).

Tipi di info badges

Esistono tre stili info badge tra cui scegliere, ovvero punto, icona e numerico, come illustrato nell'ordine seguente.

Punto info badge

Il punto info badge è un'ellisse semplice con un diametro di 4 px. Non ha alcun bordo e non deve contenere testo o altro al suo interno.

È consigliabile usare il punto info badge per gli scenari generali in cui si vuole guidare l'utente verso , info badge ad esempio per indicare che sono disponibili nuovi contenuti o aggiornamenti.

Icona info badge

L'icona info badge è un'ellisse con un diametro di 16 px che contiene un'icona al suo interno. Dispone info badge di una proprietà IconSource che offre flessibilità per i tipi di icone supportate.

È consigliabile usare l'icona info badge per inviare un messaggio rapido insieme a ottenere l'attenzione dell'utente, ad esempio per avvisare l'utente che qualcosa di non bloccante non è andato storto, è disponibile un aggiornamento importante aggiuntivo o che qualcosa specifico nell'app è attualmente abilitato (ad esempio un timer del conto alla rovescia in corso).

Se vuoi usare bitmapIconSource per l'oggetto IconSource di info badge, sei responsabile di garantire che la bitmap si adatti all'interno di info badge (modificando le dimensioni dell'icona o modificando le dimensioni dell'oggetto info badge).

Numerico info badge

Il valore numerico info badge è la stessa forma e la stessa dimensione dell'icona info badge, ma contiene un numero all'interno di esso, determinato dalla proprietà Value . I numeri devono essere interi e devono essere maggiori o uguali a zero. La larghezza di info badge verrà espansa automaticamente man mano che il numero visualizzato aumenta fino a più cifre, con un'animazione uniforme.

È consigliabile usare il valore numerico info badge per indicare che sono presenti un numero specifico di elementi che richiedono attenzione, ad esempio nuovi messaggi di posta elettronica o messaggi.

Stili preimpostati info badge

Per supportare gli scenari più comuni in cui info badgevengono usati, il controllo include stili predefiniti predefiniti info badge . Sebbene sia possibile personalizzare info badge in modo da usare qualsiasi combinazione di colori/icone/numeri desiderata, questi set di impostazioni predefiniti sono un'opzione rapida per assicurarsi che info badge l'utente sia conforme alle linee guida per l'accessibilità e sia proporzionale in termini di icona e ridimensionamento dei numeri.

I seguenti stili predefiniti sono disponibili per info badges:

Attenzione

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informativo

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Success

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Attenzione

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Critico

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Se viene impostato uno stile su un info badge oggetto e viene impostata anche una proprietà in conflitto, la proprietà sovrascriverà la parte in conflitto dello stile, ma gli elementi di stile non in conflitto rimarranno applicati.

Ad esempio, se si applica a CriticalIconInfoBadgeStyle un info badgeoggetto , ma si imposta InfoBadge.Value = "1"anche , si finisce con un info badge oggetto con il colore di sfondo "Critico", ma visualizza il numero 1 all'interno di esso, anziché visualizzare l'icona predefinita.

In questo esempio viene creato un oggetto info badge che assume il colore e l'icona dello stile preimpostato Icona attenzione.

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Accessibilità

Il info badge controllo non dispone di alcuna funzionalità di utilità per la lettura dello schermo o di automazione dell'interfaccia utente (UIA) incorporata, perché il controllo non è attivabile e non può essere interagito con esso.

Se si usa un info badge oggetto all'interno di , navigation viewoffre navigation view un'utilità per la lettura dello schermo predefinita e il supporto di assistive technology. Quando si esegue la tabulazione di un navigation view oggetto e si arriva a un navigation view elemento con un info badge elemento su di esso, l'utilità per la lettura dello schermo annuncia che c'è un oggetto info badge su questo elemento. Se l'oggetto info badge in questione è numerico, l'utilità per la lettura dello schermo annuncia anche il info badgevalore di .

Se usi un oggetto info badge esterno a , navigation viewti consigliamo di verificare che l'app sia completamente accessibile:

• L'elemento padre di info badge deve essere attivabile e accessibile tramite tabulazione.
• L'elemento padre annuncia l'oggetto info badge alle utilità per la lettura dello schermo.
• L'app invia una notifica dell'interfaccia utente quando info badge viene visualizzato per la prima volta.
• L'app invia una notifica dell'interfaccia utente quando un elemento info badge scompare dall'interfaccia utente.
• L'app invia una notifica dell'interfaccia utente quando si è verificata una modifica significativa con un oggetto esistente info badge.
  • La definizione di "cambiamento significativo" spetta all'utente come singolo sviluppatore. Alcuni esempi possono includere: un info badge cambio tra tipi diversi, un info badge colore che cambia per rappresentarne lo stato o un valore di un info badgevalore che supera un determinato numero significativo.

Per controllare ciò che l'elemento padre annuncia alle utilità per la lettura dello schermo, è possibile usare le proprietà associate della classe AutomationProperties . Per un info badge, è consigliabile impostare le AutomationProperties.FullDescription proprietà associate o AutomationProperties.ItemStatus sull'elemento padre.

Per inviare notifiche dell'interfaccia utente all'aspetto o alla info badgechiusura, è possibile usare il metodo AutomationPeer.RaiseAutomationEvent .

è info badge a una dimensione predefinita che soddisfa i requisiti di accessibilità. È possibile personalizzare molti aspetti dell'oggetto info badge , tra cui altezza/larghezza/colore e così via, ma è importante che l'impostazione predefinita info badge rispetti le linee guida per l'accessibilità per dimensioni e colore.

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.

InfoBadge per le app UWP richiede WinUI 2. Per maggiori informazioni, incluse le istruzioni per l'installazione, vedere WinUI 2. Le API per questo controllo esistono nello spazio dei nomi Microsoft.UI.Xaml.Controls.

• Api WinUI 2: classe InfoBadge, proprietà IconSource, proprietà Value
• Aprire l'app Raccolta WinUI 2 e vedere InfoBadge 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:InfoBadge/>

Creare un InfoBadge

Importante

Alcune informazioni sono relative alla release non definitiva del prodotto, che potrebbe subire modifiche significative prima della release definitiva. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

• API importanti: classe InfoBadge, proprietà IconSource, proprietà Value

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

Puoi creare un InfoBadge in XAML o nel codice. Il tipo di InfoBadge creato è determinato dalle proprietà impostate.

Punto

Per creare un punto InfoBadge, usa un controllo InfoBadge predefinito senza proprietà impostate.

<InfoBadge />

Icon

Per creare un'icona InfoBadge, impostare la proprietà IconSource .

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Numerico

Per creare un InfoBadge numerico, impostare la proprietà Value .

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

Nella maggior parte degli scenari si associa la Value proprietà di InfoBadge a un valore intero che cambia nel back-end dell'app, in modo da poter incrementare/decrementare facilmente e mostrare/nascondere l'InfoBadge in base a tale valore specifico.

Nota

Se entrambe le Icon proprietà e Value sono impostate, la Value proprietà ha la precedenza e InfoBadge viene visualizzata come InfoBadge numerica.

Uso di un InfoBadge in NavigationView

Se usi un controllo NavigationView nella tua app, ti consigliamo di usare infoBadge in NavigationView per visualizzare notifiche e avvisi a livello di app. Per posizionare InfoBadge su un oggetto NavigationViewItem, assegnare l'oggetto InfoBadge alla NavigationViewItem.InfoBadge proprietà .

In modalità espansa a sinistra, InfoBadge viene allineato a destra al bordo dell'oggetto NavigationViewItem.

In modalità Left-Compact l'infoBadge viene visualizzato sovrapposto nell'angolo superiore destro dell'icona.

In modalità Superiore l'InfoBadge è allineato all'angolo superiore destro dell'elemento complessivo.

Ti consigliamo di non usare tipi diversi di InfoBadges in un controllo NavigationView, ad esempio l'associazione di un InfoBadge numerico a un oggetto NavigationViewItem e un punto InfoBadge a un altro NavigationViewItem nello stesso NavigationView.

Esempio: incremento di un InfoBadge numerico in un controllo NavigationView

Questo esempio simula come un'app di posta elettronica potrebbe usare un InfoBadge in un controllo NavigationView per visualizzare il numero di nuovi messaggi di posta elettronica nella posta in arrivo e incrementare il numero visualizzato in InfoBadge quando viene ricevuto un nuovo messaggio.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

NavigationView con gerarchia

Se si dispone di un oggetto NavigationView gerarchico, con NavigationViewItems annidato in altri NavigationViewItems, gli elementi padre seguiranno gli stessi modelli di progettazione/posizionamento descritti in precedenza.

L'elemento NavigationViewItem padre e navigationViewItems figlio avranno ognuna una proprietà InfoBadge personalizzata. È possibile associare il valore di InfoBadge dell'elemento padre a fattori che determinano i valori InfoBadge dell'elemento figlio, ad esempio la somma delle InfoBadges numeriche dell'elemento figlio nell'InfoBadge dell'elemento padre.

Questa immagine mostra un controllo NavigationView gerarchico con il relativo RiquadroDisplayMode impostato su Top, in cui l'elemento di primo livello (padre) mostra un InfoBadge numerico. L'app ha impostato l'elemento padre InfoBadge per rappresentare ciò che viene visualizzato nelle InfoBadges degli elementi figlio, perché gli elementi figlio non sono attualmente espansi (e quindi non sono visibili).

Uso di un InfoBadge in un altro controllo

Potresti voler visualizzare avvisi o notifiche sugli elementi all'interno dell'app diversi da NavigationView. Potrebbe essere disponibile un oggetto ListViewItem che richiede particolare attenzione o una voce di menu che visualizza una notifica. In questi casi, puoi integrare InfoBadge direttamente nell'interfaccia utente con altri controlli.

InfoBadge è un UIElement e pertanto non può essere usato come risorsa condivisa.

A tale scopo, usa InfoBadge come qualsiasi altro controllo, semplicemente aggiungi il markup InfoBadge in cui desideri che venga visualizzato. Poiché InfoBadge eredita da Control, ha tutte le proprietà di posizionamento predefinite, ad esempio margine, allineamento, spaziatura interna e altro ancora, che puoi usare per posizionare il tuo InfoBadge esattamente dove vuoi.

Se si inserisce un InfoBadge all'interno di un altro controllo, ad esempio un controllo Button o ListViewItem, è probabile che venga ritagliato se lo si posiziona per estendersi oltre il rettangolo delimitatore del controllo padre. Se l'InfoBadge si trova all'interno di un altro controllo, non deve essere posizionato oltre gli angoli del riquadro complessivo del controllo.

Esempio: Inserimento di un InfoBadge all'interno di un altro controllo

Ecco un pulsante con un InfoBadge posizionato nell'angolo in alto a destra, con il badge a più livelli sopra il contenuto. Questo esempio può essere applicato anche a molti controlli diversi da Button, che mostra semplicemente come posizionare, posizionare e mostrare un InfoBadge all'interno di un altro controllo WinUI.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

Gestione di un InfoBadge

Un InfoBadge visualizza in genere un avviso temporaneo, quindi è comune visualizzarlo o nasconderlo e modificarlo periodicamente mentre l'app è in esecuzione.

Visualizzazione e nascondere un InfoBadge

È possibile utilizzare la proprietà Visibility o Opacity per visualizzare e nascondere un InfoBadge in base alle azioni dell'utente, alla logica del programma, ai contatori e così via.

Come per altri elementi UIElement, l'impostazione Visibility.Collapsed renderà InfoBadge non occupare spazio nel layout, quindi potrebbe causare lo spostamento di altri elementi quando viene visualizzato e nascosto.

Se gli elementi riposizionati sono un problema, è possibile utilizzare la Opacity proprietà per visualizzare e nascondere InfoBadge. Opacity è impostato su 1.0 per impostazione predefinita. È possibile impostarlo su 0 per nascondere l'InfoBadge. Quando si usa la Opacity proprietà, InfoBadge continuerà a occupare spazio nel layout anche se è attualmente nascosto.

Modificare lo stile InfoBadge

È possibile modificare l'icona o il numero visualizzato in un InfoBadge mentre viene visualizzato. La decrementazione o l'incremento di un InfoBadge numerico in base all'azione dell'utente può essere ottenuta modificando il valore di InfoBadge.Value. La modifica dell'icona di un InfoBadge può essere ottenuta impostando InfoBadge.IconSource su un nuovo IconSource oggetto. Quando si modificano le icone, assicurarsi che la nuova icona corrisponda alle stesse dimensioni dell'icona precedente per evitare un effetto visivo con estensione.

Comportamento predefinito

Se né InfoBadge.Value né InfoBadge.IconSource sono impostati, l'impostazione predefinita di InfoBadge mostra un punto (in particolare se Value è impostato su -1 e IconSource è impostato su null, che sono i valori predefiniti). Se entrambe le Value proprietà e IconSource sono impostate, InfoBadge rispetta la Value proprietà e visualizza un valore numerico.

È anche possibile modificare il tipo di InfoBadge mentre viene visualizzato. Per modificare il tipo di InfoBadge, assicurarsi che la proprietà corrispondente del tipo corrente (Value o IconSource) sia impostata sul valore predefinito (-1 o null) e impostare la proprietà del nuovo tipo su un valore appropriato. Per modificare il tipo di InfoBadge da numerico o icona a un tipo di punto InfoBadge, assicurarsi che InfoBadge.Value sia impostato su -1 e InfoBadge.IconSource sia impostato su null.

A seconda della posizione dell'InfoBadge, tenere presente che questo potrebbe causare lo spostamento degli elementi man mano che le dimensioni e la forma dell'InfoBadge possono cambiare.

Articoli correlati

• NavigationView