Badge d’informations

Le badgeage est un moyen non intrusif et intuitif d’afficher des notifications ou de mettre le focus sur une zone au sein d’une application, qu’il s’agisse de notifications, d’indication de nouveau contenu ou d’affichage d’une alerte. Un info badge est un petit élément d’interface utilisateur qui peut être ajouté à une application et personnalisé, pour afficher un nombre, une icône ou un point simple.

Le info badge est intégré au code XAML navigation view, mais peut également être placé en tant qu’élément autonome dans l’arborescence XAML, ce qui vous permet de placer un info badge dans n’importe quel contrôle ou élément d’interface utilisateur de votre choix. Lorsque vous utilisez un info badge à autre endroit que navigation view, vous êtes responsable de déterminer de manière programmatique quand afficher et ignorer le info badge, et où placer le info badge.

Est-ce le contrôle approprié ?

Un info badge doit être utilisé lorsque vous souhaitez mettre le focus de l’utilisateur sur une certaine zone de votre application de manière non-intrusive. Lorsqu’un info badge apparaît, il est destiné à mettre l’accent sur une zone, puis laisser l’utilisateur revenir dans son flux, lui donnant le choix de déterminer s’il faut ou non examiner les détails de la raison de l’apparition du info badge. Les badges d’information doivent représenter uniquement les messages qui peuvent être ignorés et non permanents. Un info badge doit avoir des règles spécifiques quant au moment où il peut apparaître, disparaître et changer.

Exemples d’utilisation appropriée de info badge :

• Pour indiquer que de nouveaux messages sont arrivés.
• Pour indiquer la disponibilité de nouveaux articles à lire.
• Pour indiquer qu’il existe de nouvelles options disponibles sur une page.
• Pour indiquer qu’il peut y avoir un problème avec un élément sur une page spécifique qui ne bloque pas le fonctionnement de l’application.

Quand un autre contrôle doit-il être utilisé ?

Un info badge ne doit pas être utilisé pour afficher des erreurs critiques ou transmettre des messages très importants qui nécessitent une action immédiate. Les badges d’informations ne doivent pas être utilisés dans les cas où il faut interagir immédiatement avec eux pour continuer à utiliser l’application.

Exemples d’utilisation inappropriée de info badge :

• Pour indiquer une question urgente sur une page au sein de l’application, qui doit être traitée avant de continuer à utiliser l’application. Pour ce scénario, utilisez une content dialog.
• Apparition dans une application sans aucun moyen pour l’utilisateur d’ignorer le info badge. Pour une alerte persistante comme celle-ci, utilisez une info bar.
• Utiliser un info badge comme moyen permanent d’amener le focus de l’utilisateur sur une zone, sans moyen pour l’utilisateur d’ignorer le info badge.
• Utiliser un info badge comme icône ou une image normale dans votre application. Utilisez plutôt une image ou une icône appropriée (voir IconElement et IconSource).

Types d’info badge

Vous pouvez choisir parmi trois styles info badge : point, icône et numérique, comme indiqué dans l’ordre ci-dessous.

info badge point

L’info badge point est un simple ellipse avec un diamètre de 4px. Il n’a pas de bordure et n’est pas destiné à contenir du texte ou tout autre élément à l’intérieur de celui-ci.

Vous devez utiliser l’info badge point pour les scénarios généraux dans lesquels vous souhaitez guider le focus de l’utilisateur vers l’élément info badge (par exemple, pour indiquer que de nouveaux contenus ou mises à jour sont disponibles).

info badge icône

L’info badge icône est un ellipse avec un diamètre de 16px qui contient une icône. La info badge propriété IconSource offre une flexibilité pour les types d’icônes prises en charge.

Vous devez utiliser l’info badge icône pour envoyer un message rapide en attirant l’attention de l’utilisateur, par exemple pour avertir l’utilisateur que quelque chose de non bloquant s’est mal passé, qu’une mise à jour importante supplémentaire est disponible ou que quelque chose de spécifique dans l’application est actuellement activé (par exemple, un minuteur de compte à rebours en cours).

Si vous souhaitez utiliser un BitmapIconSource pour le IconSource de votre info badge, vous êtes chargé de vous assurer que la bitmap s'intègre à l'intérieur du info badge (soit en modifiant la taille de l'icône, soit en modifiant la taille du info badge).

info badge numérique

Le nombre info badge est la même forme et la même taille que l’icône info badge, mais il contient un nombre à l’intérieur de celui-ci, déterminé par la propriété Value . Les nombres doivent être des entiers et doivent être supérieurs ou égaux à zéro. La largeur de l’info badge s’étend automatiquement à mesure que le nombre affiché augmente à plusieurs chiffres, avec une animation fluide.

Vous devez utiliser l’info badge numérique pour indiquer qu’il existe un nombre spécifique d’éléments qui ont besoin d’attention, par exemple de nouveaux e-mails ou messages.

Styles d’info badge prédéfinis

Pour prendre en charge les scénarios les plus courants dans lesquels les info badge sont utilisés, le contrôle inclut des styles d’info badge prédéfinis intégrés. Bien que vous puissiez personnaliser votre info badge pour qu’il utilise toute combinaison de couleur/icône/nombre souhaitée, ces présélections intégrées sont une option rapide pour vous assurer que votre info badge est conforme aux les directives d’accessibilité et est proportionnel en termes d’icône et de dimensionnement de nombre.

Les présélections de style suivantes sont disponibles pour les info badge :

Attention

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Success

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Caution

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Essentiel

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Si un style est défini sur un info badge et qu’une propriété conflictuelle est également défini, la propriété remplace la partie conflictuelle du style, mais les éléments de style non conflictuels restent appliqués.

Par exemple, si vous appliquez le CriticalIconInfoBadgeStyle à un info badge, mais avez également défini InfoBadge.Value = "1", vous obtenez un info badge qui a la couleur d’arrière-plan « Critique », mais affiche le nombre 1 à l’intérieur, plutôt que d’afficher l’icône prédéfinie.

Cet exemple crée un info badge qui prend la couleur et l’icône du style prédéfini Attention Icon.

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

Accessibilité

Le contrôle du info badge ne dispose d’aucune fonctionnalité de lecteur d’écran ni d’automatisation de l’interface utilisateur (UIA) intégrée, car le contrôle ne peut pas recevoir le focus et n’est pas interactif.

Si vous utilisez un info badge à l’intérieur d’une navigation view, la navigation view fournit un lecteur d’écran intégré et une prise en charge de la technologie d’assistance. Lorsque vous utilisez la touche de tabulation dans une navigation view et que vous atterrissez sur un élément de la navigation view associé à un info badge, le lecteur d’écran annonce qu’il y a un info badge sur cet élément. Si l’info badge en question est numérique, le lecteur d’écran annonce également la valeur de l’écran de l’info badge.

Si vous utilisez un info badge à l’extérieur d’une navigation view, nous vous recommandons de vous assurer que votre application est entièrement accessible :

• L’élément parent de l’info badge doit pouvoir recevoir le focus et être accessible par tabulation.
• L’élément parent annonce l’info badge aux lecteurs d’écran.
• L’application envoie une notification UIA lorsque l’info badge s’affiche pour la première fois.
• L’application envoie une notification UIA lorsque l’info badge disparaît de l’interface utilisateur.
• L’application envoie une notification UIA lorsqu’un changement significatif s’est produit sur un info badge existant.
  • La définition de « changement significatif » dépend de vous, en tant que développeur individuel. Par exemple, il peut s’agir d’un info badge basculant entre différents types, d’un info badge changeant de couleur pour représenter son état ou d’un info badge dont la valeur est supérieure à un certain nombre significatif.

Pour contrôler ce que l’élément parent annonce aux lecteurs d’écran, vous pouvez utiliser les propriétés jointes de la classe AutomationProperties . Pour un info badge, il est recommandé de définir les propriétés jointes AutomationProperties.FullDescription ou AutomationProperties.ItemStatus sur l’élément parent.

Pour envoyer des notifications UIA en cas d’apparition ou de rejet de info badges, vous pouvez utiliser la méthode AutomationPeer.RaiseAutomationEvent.

L’info badge a une taille par défaut qui répond aux exigences d’accessibilité. Vous pouvez personnaliser de nombreux aspects de l’info badge, y compris sa hauteur, sa largeur ou sa couleur, entre autres, mais il est important que l’info badge par défaut respecte nos directives d’accessibilité pour la taille et la couleur.

Créer un InfoBadge

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

Vous pouvez créer un InfoBadge en XAML ou dans du code. Le type d’InfoBadge que vous créez est déterminé par les propriétés que vous définissez.

Points

Pour créer un InfoBadge point, utilisez un contrôle InfoBadge par défaut sans définir de propriétés.

<InfoBadge />

Icône

Pour créer une icône InfoBadge, définissez la propriété IconSource .

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

Numérique

Pour créer un InfoBadge numérique, définissez la propriété Value .

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

Dans la plupart des scénarios, vous allez lier la propriété Value de l’InfoBadge à une valeur entière changeante dans le back-end de votre application afin de pouvoir facilement incrémenter ou décrémenter et afficher ou masquer l’InfoBadge en fonction de cette valeur spécifique.

Utilisation d’un InfoBadge dans une NavigationView

Si vous utilisez une NavigationView dans votre application, nous vous recommandons d’utiliser un InfoBadge dans la NavigationView pour afficher les notifications et les alertes à l’échelle de l’application. Pour placer InfoBadge sur un NavigationViewItem, affectez l’objet InfoBadge à la propriété NavigationViewItem.InfoBadge.

En mode Développé à gauche, l’InfoBadge apparaît aligné à droite sur le bord du NavigationViewItem.

En mode Compact gauche, l’InfoBadge s’affiche sur le coin supérieur droit de l’icône.

En mode Haut, l’InfoBadge est aligné sur le coin supérieur droit de l’élément global.

Nous vous recommandons de ne pas utiliser différents types d’InfoBadges dans une NavigationView, par exemple attacher un InfoBadge numérique à un NavigationViewItem et un InfoBadge point à un autre NavigationViewItem dans la même NavigationView.

Exemple : incrémenter un InfoBadge numérique dans une NavigationView

Cet exemple montre comment une application de messagerie peut utiliser un InfoBadge dans une NavigationView pour afficher le nombre de nouveaux e-mails dans la boîte de réception, et incrémenter le nombre affiché dans l’InfoBadge lorsqu’un nouveau message est reçu.

<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();
    }
}

Hiérarchie dans la NavigationView

Si vous disposez d'un NavigationView hiérarchique , avec des NavigationViewItems imbriqués dans d'autres NavigationViewItems, les éléments parents suivent les mêmes modèles de conception / placement que ceux décrits ci-dessus.

Le NavigationViewItem parent et les NavigationViewItems enfant ont chacun leur propre propriété d’InfoBadge. Vous pouvez lier la valeur de l’InfoBadge du parent à des facteurs qui déterminent les valeurs de l’InfoBadge des enfants, telles que l’affichage de la somme des InfoBadges numériques des enfants sur l’InfoBadge du parent.

Cette image montre une NavigationView hiérarchique avec son PaneDisplayMode défini sur Haut, où l’élément de niveau supérieur (parent) affiche un InfoBadge numérique. L’application a défini l’InfoBadge de l’élément parent pour qu’il représente ce qui est affiché dans les InfoBadges des éléments enfant, car les éléments enfant ne sont actuellement pas développés (et ne sont donc pas visibles).

Utiliser un InfoBadge dans un autre contrôle

Vous pouvez afficher des alertes ou des notifications sur des éléments au sein de votre application autres qu’une NavigationView. Vous pouvez avoir un ListViewItem qui a besoin d’une attention particulière ou d’un élément de menu qui affiche une notification. Dans ce cas, vous pouvez intégrer l’InfoBadge directement dans votre interface utilisateur avec d’autres contrôles.

InfoBadge est un UIElement et ne peut donc pas être utilisé comme ressource partagée.

Pour ce faire, utilisez l’InfoBadge comme vous le feriez pour n’importe quel autre contrôle : ajoutez simplement le balisage InfoBadge là où vous souhaitez qu’il apparaisse. Comme InfoBadge hérite de Control, il possède toutes les propriétés de positionnement intégrées, telles que la marge, l’alignement, le remplissage, etc. que vous pouvez utiliser pour positionner votre InfoBadge exactement là où vous le souhaitez.

Si vous placez un InfoBadge à l’intérieur d’un autre contrôle, comme un contrôle Button ou ListViewItem, il sera probablement rogné si vous le positionnez de façon à l’étendre au-delà du cadre englobant du contrôle parent. Si votre InfoBadge se trouve à l’intérieur d’un autre contrôle, il ne doit pas être positionné au-delà des coins du cadre englobant global du contrôle.

Exemple : placer un InfoBadge à l’intérieur d’un autre contrôle

Voici un bouton qui a un InfoBadge placé dans son coin supérieur droit, avec le badge superposé au contenu. Cet exemple peut être appliqué à de nombreux contrôles autres que Button. Il montre simplement comment placer, positionner et afficher un InfoBadge à l’intérieur d’un autre contrôle 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>

Gérer un InfoBadge

Un InfoBadge affiche généralement une alerte temporaire. Il est donc courant de l’afficher ou de le masquer, et de modifier régulièrement son style pendant l’exécution de votre application.

Afficher et masquer un InfoBadge

Vous pouvez utiliser la propriété Visibility ou Opacity pour afficher et masquer un InfoBadge en fonction des actions utilisateur, de la logique du programme, des compteurs, etc.

Comme avec d’autres UIElements, définir Visibility.Collapsed fait que l’InfoBadge ne prend pas d’espace dans votre disposition, de sorte qu’il peut entraîner le déplacement d’autres éléments lorsqu’il est affiché et masqué.

Si les éléments repositionnés posent un problème, vous pouvez utiliser la propriété Opacity pour afficher et masquer l’InfoBadge. Opacity est défini sur 1.0 par défaut ; vous pouvez le définir sur 0 pour masquer l’InfoBadge. Lorsque vous utilisez la propriété Opacity, l’InfoBadge prend toujours de l’espace dans la disposition, même s’il est actuellement masqué.

Modifier le style d’InfoBadge

Vous pouvez modifier l’icône ou le numéro affiché dans un InfoBadge pendant qu’il est affiché. La décrémentation ou l’incrémentation d’un InfoBadge numérique en fonction de l’action de l’utilisateur peuvent être obtenues en modifiant la valeur de InfoBadge.Value. La modification de l’icône d’un InfoBadge peut être obtenue en définissant InfoBadge.IconSource sur un nouvel objet IconSource. Lorsque vous modifiez des icônes, assurez-vous que la nouvelle icône est de la même taille que l’ancienne icône pour éviter un effet visuel discordant.

Comportement par défaut

Si ni InfoBadge.Value ni InfoBadge.IconSource ne sont définis, l’InfoBadge affiche par défaut un point (en particulier si Value est définie sur -1 et que IconSource est définie sur null, qui sont les valeurs par défaut). Si les propriétés Value et IconSource sont toutes deux définies, l’InfoBadge respecte la propriété Value et affiche une valeur numérique.

Vous pouvez également modifier le type de l’InfoBadge pendant qu’il est affiché. Pour modifier le type de l’InfoBadge, assurez-vous que la propriété correspondante du type actuel (Value ou IconSource) est définie sur sa valeur par défaut (-1 ou null) et définissez la propriété du nouveau type sur une valeur appropriée. Pour modifier le type de l’InfoBadge de numérique ou icône à un InfoBadge de type point, vérifiez que InfoBadge.Value est définie sur -1 et que InfoBadge.IconSource est définie sur null.

Selon la façon dont vous avez positionné votre InfoBadge, sachez que cela peut entraîner un déplacement des éléments, car la taille et la forme de l’InfoBadge peuvent changer.

UWP et WinUI 2

L’InfoBadge pour les applications UWP nécessite WinUI 2. Pour plus d’informations, notamment les instructions d’installation, consultez WinUI 2. Les API de ce contrôle existent dans l’espace de noms Microsoft.UI.Xaml.Controls .

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Pour plus d’informations, consultez Prise en main de WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

Articles connexes

• NavigationView