Contenu de notification d’application

Les notifications d’application sont des notifications flexibles avec du texte, des images et des boutons/entrées. Cet article décrit les éléments d’interface utilisateur qui peuvent être utilisés dans une notification d’application et fournit des exemples de code pour générer le format XML d’une notification d’application.

Note

Le terme « notification toast » est remplacé par « notification d'appli ». Ces termes font tous deux référence à la même fonctionnalité de Windows, mais au fil du temps, nous cesserons progressivement d'utiliser le terme « toast notification » dans la documentation.

Mise en route

Les notifications d’application sont définies avec une charge utile XML définie par le schéma de notification d’application. Actuellement, il existe trois façons de générer la charge utile XML pour une notification d’application. Les exemples de code de cet article illustrent les trois méthodes suivantes :

Les API Microsoft.Windows.AppNotifications.Builder - Introduites dans le Kit de développement logiciel (SDK) d’application Windows 1.2, cet espace de noms fournit des API qui vous permettent de générer facilement la charge utile XML pour une notification par programme sans avoir à vous soucier des spécificités du format XML. Les exemples de code utilisant ces API se trouvent dans les onglets intitulés « Kit de développement logiciel (SDK) d’application Windows ».
Syntaxe du Microsoft.Toolkit.Uwp.Notifications générateur : ces API font partie de UWP Community Toolkit et prennent en charge les applications UWP. Bien que ces API puissent également être utilisées pour les applications du Kit de développement logiciel (SDK) d’application Windows et continuent d’être prises en charge, nous recommandons que de nouvelles implémentations utilisent les API Microsoft.Windows.AppNotifications.Builder . Pour utiliser les API Community Toolkit, ajoutez le nuget package UWP Community Toolkit Notifications à votre projet. Les exemples C# fournis dans cet article utilisent la version 7.0.0 du package NuGet. Les exemples de code utilisant ces API se trouvent dans les onglets intitulés « Windows Community Toolkit ».
XML brut : si vous préférez, vous pouvez créer votre propre code personnalisé pour générer des chaînes XML au format requis. Les exemples XML bruts se trouvent dans les onglets intitulés « XML ».

Installez le visualiseur de notifications. Cette application Windows gratuite vous aide à concevoir des notifications d’application interactives en fournissant un aperçu visuel instantané de votre toast lorsque vous la modifiez, comme l’éditeur XAML/la vue de conception de Visual Studio. Consultez le Visualiseur de Notifications pour plus d’informations ou téléchargez le Visualiseur de Notifications à partir du Magasin.

Cet article traite uniquement de la création du contenu de notification d’application. Pour plus d’informations sur l’envoi d’une notification après avoir généré la charge utile XML, consultez Envoyer une notification d’application locale.

Structure de notification d’application

Voici quelques composants importants et généraux d’une charge utile XML de notification d’application :

toast : l’attribut de lancement de cet élément définit les arguments qui seront transmis à votre application lorsque l’utilisateur clique sur votre toast, ce qui vous permet de lier en profondeur le contenu correct affiché par le toast. Pour plus d’informations, consultez Envoyer une notification d’application locale.
visuel : cet élément représente une partie visuelle du toast, y compris la liaison générique qui contient du texte et des images.
actions : cet élément représente une partie interactive du toast, y compris les entrées et les actions.
audio : cet élément spécifie l’audio lu lorsque le toast est affiché à l’utilisateur.

var builder = new AppNotificationBuilder()
    .AddArgument("conversationId", "9813")

    .AddText("Some text")

    .AddButton(new AppNotificationButton("Archive")
        .AddArgument("action", "archive"))

    .SetAudioUri(new Uri("ms-appx:///Sound.mp3"));

var builder = new ToastContentBuilder()
    .AddArgument("conversationId", 9813)

    .AddText("Some text")

    .AddButton(new ToastButton()
        .SetContent("Archive")
        .AddArgument("action", "archive"))

    .AddAudio(new Uri("ms-appx:///Audio/NotificationSound.mp3"));

<toast launch='conversationId=9813'>
    <visual>
        <binding template='ToastGeneric'>
            <text>Some text</text>
        </binding>
    </visual>
    <audio src='ms-appx:///Audio/NotificationSound.mp3'/>
    <actions>
        <action content='Archive' arguments='action=archive'/>
    </actions>
</toast>

Voici une représentation visuelle du contenu de la notification d’application :

Zone d’attribution

La zone d’attribution se trouve en haut de la notification de l’application. À compter de Windows 11, le nom et l’icône de votre application s’affichent dans cette zone. La zone d’attribution inclut également un bouton de fermeture permettant à l’utilisateur de rejeter rapidement la notification, ainsi qu’un menu à trois points qui permet à l’utilisateur de désactiver rapidement les notifications pour votre application ou d’accéder à la page des paramètres Windows pour les notifications de votre application. La zone d’attribution est configurée par l’interpréteur de commandes et ne peut pas être remplacée dans la charge utile XML toast, bien que votre application puisse ajouter des éléments au menu contextuel de la zone d’attribution. Pour plus d’informations, consultez les actions du menu contextuel.

Visual

Chaque notification d’application doit spécifier un élément visuel , où vous devez fournir une liaison toast générique et qui peut contenir du texte et des images. Ces éléments seront rendus sur différents appareils Windows, notamment les ordinateurs de bureau, les téléphones, les tablettes et Xbox.

Pour tous les attributs pris en charge dans la section visuelle et ses éléments enfants, consultez le schéma de notifications d'applications.

Éléments de texte

Chaque notification d’application doit avoir au moins un élément de texte et peut contenir deux éléments de texte supplémentaires, tout type AdaptiveText.

Capture d’écran d’une notification d’application avec trois lignes de texte. La ligne supérieure de texte est en gras.

Depuis la mise à jour anniversaire Windows 10, vous pouvez contrôler le nombre de lignes de texte affichées à l’aide de la propriété HintMaxLines sur le texte. La valeur par défaut (et maximale) est jusqu’à 2 lignes de texte pour le titre, et jusqu’à 4 lignes (combinées) pour les deux éléments de description supplémentaires (le deuxième et le troisième AdaptiveText).

var builder = new AppNotificationBuilder()
    .AddArgument("conversationId", 9813)
    .AddText("Adaptive Tiles Meeting", new AppNotificationTextProperties().SetMaxLines(1))
    .AddText("Conf Room 2001 / Building 135")
    .AddText("10:00 AM - 10:30 AM");

var builder = new ToastContentBuilder()
    .AddArgument("meetingId", 9813)
    .AddText("Adaptive Tiles Meeting", hintMaxLines: 1)
    .AddText("Conf Room 2001 / Building 135")
    .AddText("10:00 AM - 10:30 AM");

<toast launch='meetingId=9813'>
    <visual>
        <binding template='ToastGeneric'>
            <text hint-maxLines='1'>Adaptive Tiles Meeting</text>
            <text>Conf Room 2001 / Building 135</text>
            <text>10:00 AM - 10:30 AM</text>
        </binding>
    </visual>
</toast>

Image en ligne

Par défaut, les images sont affichées inline, après tous les éléments de texte, remplissant la largeur totale de la zone visuelle.

Capture d’écran d’une notification d’application montrant le placement d’image par défaut, inline, remplissant la largeur totale de la zone visuelle.

var builder = new AppNotificationBuilder()
    .AddText("Featured image of the day.")
    .SetInlineImage(new Uri("ms-appx:///Images/InlineImage.png"));

AppNotificationManager.Default.Show(builder.BuildNotification());

var builder = new ToastContentBuilder()
    .AddText("Featured image of the day.")
    .AddInlineImage(new Uri("ms-appx:///Images/InlineImage.png"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Featured image of the day.</text>
            <image src='ms-appx:///Images/InlineImage.png'/>
        </binding>
    </visual>
</toast>

Remplacement du logo de l’application

La spécification d’une valeur de placement « appLogoOverride » entraîne l’affichage de l’image dans un carré situé à gauche de la zone visuelle. Le nom de cette propriété reflète le comportement dans les versions précédentes de Windows, où l’image remplacerait l’image du logo de l’application par défaut. Dans Windows 11, le logo de l’application s’affiche dans la zone d’attribution. Il n’est donc pas remplacé par le placement de l’image appLogoOverride .

Les dimensions de l'image sont de 48x48 pixels à l'échelle 100 %. Nous vous recommandons généralement de fournir une version de chaque ressource d'icône pour chaque facteur d’échelle : 100%, 125%, 150%, 200%, et 400%.

Capture d’écran d’une notification d’application montrant le positionnement de l’image de remplacement du logo de l’application dans un carré situé à gauche de la zone visuelle de la notification.

var builder = new AppNotificationBuilder()
    .AddText("Featured image of the day.")
    .SetAppLogoOverride(new Uri("ms-appx:///Images/AppLogo.png"));

var builder = new ToastContentBuilder()
    .AddText("Featured image of the day.")
    .AddAppLogoOverride(new Uri("ms-appx:///Images/AppLogo.png"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Featured image of the day.</text>
            <image placement='appLogoOverride' src='ms-appx:///Images/AppLogo.png'/>
        </binding>
    </visual>
</toast>

Conseil de découpe

Les instructions de style Microsoft recommandent de représenter des images de profil avec une image circulaire pour fournir une représentation cohérente des personnes entre les applications et l’interpréteur de commandes. Définissez la propriété HintCrop sur Circle pour afficher l’image avec une rognage circulaire.

Capture d’écran d’une notification d’application montrant que le logo de l’application remplace le positionnement de l’image rogné dans un cercle situé à gauche de la zone visuelle du toast.

var builder = new AppNotificationBuilder()
    .AddText("Matt sent you a friend request")
    .AddText("Hey, wanna dress up as wizards and ride around on hoverboards?")
    .SetAppLogoOverride(new Uri("ms-appx:///Images/Profile.png"), AppNotificationImageCrop.Circle);

var builder = new ToastContentBuilder()
    .AddText("Matt sent you a friend request")
    .AddText("Hey, wanna dress up as wizards and ride around on hoverboards?")
    .AddAppLogoOverride(new Uri("ms-appx:///Images/Profile.png"), ToastGenericAppLogoCrop.Circle);

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Matt sent you a friend request</text>
            <text>Hey, wanna dress up as wizards and ride around on hoverboards?</text>
            <image placement='appLogoOverride' src='ms-appx:///Images/Profile.png' hint-crop='circle'/>
        </binding>
    </visual>
</toast>

Image de héros

Nouveautés de la mise à jour anniversaire : les notifications d'application peuvent afficher une image de héros, qui est une image toastGenericHeroImage affichée en évidence dans la bannière de notification toast et à l'intérieur du Centre de notifications. Les dimensions d’image sont de 364 x 180 pixels à 100% mise à l’échelle.

Capture d’écran d’une notification d’application montrant le positionnement de l’image héros, au-dessus de la zone d’attribution.

var builder = new AppNotificationBuilder()
    .AddText("Marry Anne")
    .AddText("Check out where we camped last night!")
    .SetHeroImage(new Uri("ms-appx:///Images/HeroImage.png"));

new ToastContentBuilder()
    .AddText("Marry Anne")
    .AddText("Check out where we camped last night!")
    .AddHeroImage(new Uri("ms-appx:///Images/HeroImage.png"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Mary Anne</text>
            <text>Check out where we camped last night!</text>
            <image placement='hero' src='ms-appx:///Images/HeroImage.png'/>
        </binding>
    </visual>
</toast>

Restrictions de taille d’image

Les images que vous utilisez dans votre notification toast peuvent provenir de...

http://
ms-appx:///
ms-appdata :///

Pour les images web http et https distantes, il existe des limites sur la taille de fichier de chaque image individuelle. Dans Fall Creators Update (16299), nous avons augmenté la limite de 3 Mo sur les connexions normales et de 1 Mo sur les connexions limitées. Avant cela, les images étaient toujours limitées à 200 Ko.

Connexion normale	Connexion mesurée	Avant la mise à jour Fall Creators
3 Mo	1 Mo	200 kB

Si une image dépasse la taille du fichier, ou ne parvient pas à télécharger ou expire, l’image est supprimée et le reste de la notification s’affiche.

Texte d’attribution

Nouveauté de la mise à jour anniversaire : si vous devez référencer la source de votre contenu, vous pouvez utiliser le texte d’attribution. Ce texte est toujours affiché sous tous les éléments de texte, mais au-dessus des images incorporées. Le texte utilise une taille légèrement plus petite que les éléments de texte standard pour faire la distinction entre les éléments de texte standard.

Sur les versions antérieures de Windows qui ne prennent pas en charge le texte d’attribution, le texte s’affiche simplement en tant qu’autre élément de texte (en supposant que vous n’avez pas déjà le maximum de trois éléments de texte).

Capture d’écran d’une notification toast montrant le texte d’attribution « via SMS » sous les autres lignes de texte dans la zone visuelle du toast.

var builder = new AppNotificationBuilder()
    .AddText("Marry Anne")
    .AddText("Check out where we camped last night!")
    .SetAttributionText("via SMS");
    .SetHeroImage(new Uri("ms-appx:///Images/HeroImage.png"));

new ToastContentBuilder()
    .AddText("Marry Anne")
    .AddText("Check out where we camped last night!")
    .AddAttributionText("Via SMS");
    .AddHeroImage(new Uri("ms-appx:///Images/HeroImage.png"));

<toast>  
  <visual>
    <binding template="ToastGeneric">
      <image src="ms-appx:///Images/HeroImage.png"/>
      <text>Mary Anne</text>
      <text>Check out where we camped last night!</text>
      <text placement="attribution">Via SMS</text>
    </binding>
  </visual>
</toast>

Horodatage personnalisé

Nouveauté de Creators Update : vous pouvez désormais remplacer l’horodatage fourni par le système par votre propre horodatage qui représente avec précision le moment où le message/information/contenu a été généré. Cet horodatage est visible dans le Centre de notification.

Capture d’écran d’une notification dans le Centre de notifications avec un horodatage personnalisé

Pour en savoir plus sur l’utilisation des horodatages personnalisés, consultez les horodatages personnalisés dans les notifications.

var builder = new AppNotificationBuilder()
    .AddText("Matt sent you a friend request")
    .AddText("Hey, wanna dress up as wizards and ride around on hoverboards?")
    .SetTimeStamp(new DateTime(2017, 04, 15, 19, 45, 00, DateTimeKind.Utc));

var builder = new ToastContentBuilder()
    .AddText("Matt sent you a friend request")
    .AddText("Hey, wanna dress up as wizards and ride around on hoverboards?")
    .AddCustomTimeStamp(new DateTime(2017, 04, 15, 19, 45, 00, DateTimeKind.Utc));

<toast displayTimestamp='2017-04-15T12:45:00-07:00'>
    <visual>
        <binding template='ToastGeneric'>
            <text>Matt sent you a friend request</text>
            <text>Hey, wanna dress up as wizards and ride around on hoverboards?</text>
        </binding>
    </visual>
</toast>

Barre de progression

Nouveautés de Creators Update : vous pouvez fournir une barre de progression sur votre notification d’application pour informer l’utilisateur de la progression des opérations telles que les téléchargements.

Capture d’écran d’une notification toast montrant une barre de progression.

Pour en savoir plus sur l’utilisation d’une barre de progression, consultez Toast progress bar.

Headers

Nouveautés de Creators Update : vous pouvez regrouper les notifications sous les en-têtes dans le Centre de notification. Par exemple, vous pouvez regrouper des messages à partir d’une conversation de groupe sous un en-tête ou des notifications de groupe d’un thème commun sous un en-tête, ou plus.

Capture d’écran d’un centre de notifications montrant plusieurs notifications de la Visionneuse de notifications de l’application organisées sous un en-tête intitulé « Camping ! ».

Pour en savoir plus sur l’utilisation des en-têtes, consultez les en-têtes Toast.

Contenu adaptatif

Nouveautés de la mise à jour anniversaire : en plus du contenu spécifié ci-dessus, vous pouvez également afficher du contenu adaptatif supplémentaire visible lorsque le toast est étendu.

Ce contenu supplémentaire est spécifié à l’aide de Adaptive, que vous pouvez en savoir plus en lisant la documentation des vignettes adaptatives.

Notez que tout contenu adaptatif doit être contenu dans un adaptiveGroup. Sinon, il ne sera pas rendu de manière adaptative.

Colonnes et éléments de texte

Voici un exemple où les colonnes et certains éléments de texte adaptatif avancés sont utilisés. Étant donné que les éléments de texte se trouvent dans un AdaptiveGroup, ils prennent en charge toutes les propriétés de style adaptative enrichies.

Capture d’écran d’une notification toast montrant des groupes d’éléments de texte alignés à gauche et à droite de la zone visuelle du toast.

// The Microsoft.Windows.AppNotifications.Builder syntax does not currently support adaptive text elements.

new ToastContentBuilder()
    ...
    
    .AddVisualChild(new AdaptiveGroup()
    {
        Children =
        {
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "52 attendees",
                        HintStyle = AdaptiveTextStyle.Base
                    },
                    new AdaptiveText()
                    {
                        Text = "23 minute drive",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            },
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "1 Microsoft Way",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle,
                        HintAlign = AdaptiveTextAlign.Right
                    },
                    new AdaptiveText()
                    {
                        Text = "Bellevue, WA 98008",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle,
                        HintAlign = AdaptiveTextAlign.Right
                    }
                }
            }
        }
    });

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <text>Reminder: Windows Launch Party</text>
      <text>4:00 PM, 10/21/2021</text>
      <group>
        <subgroup>
          <text hint-style="base">52 attendees</text>
          <text hint-style="captionSubtle">23 minute drive</text>
        </subgroup>
        <subgroup>
          <text hint-style="captionSubtle" hint-align="right">1 Microsoft Way</text>
          <text hint-style="captionSubtle" hint-align="right">Bellevue, WA 98008</text>
        </subgroup>
      </group>
    </binding>
  </visual>
</toast>

Buttons

Les boutons rendent votre toast interactif, ce qui permet à l’utilisateur d’effectuer des actions rapides sur la notification de votre application sans interrompre son flux de travail actuel. Par exemple, les utilisateurs peuvent répondre à un message directement à partir d’un toast ou supprimer un e-mail sans même ouvrir l’application de messagerie. Les boutons apparaissent dans la partie développée de votre notification.

Pour en savoir plus sur l’implémentation de boutons de bout en bout, consultez Envoyer un toast local.

Les boutons peuvent activer une application de la manière suivante :

L’application est activée au premier plan, avec un argument qui peut être utilisé pour accéder à une page/contexte spécifique.
Une autre application est activée via le lancement du protocole.
L’activation en arrière-plan est prise en charge explicitement pour les applications UWP. Pour les applications du Kit de développement logiciel (SDK) d’application Windows, l’application est toujours lancée au premier plan. L’application peut appeler AppInstance.GetActivatedEventArgs pour détecter si l’activation a été lancée par une notification et déterminer à partir des arguments passés s’il faut lancer entièrement l’application de premier plan ou gérer simplement la notification et la sortie.
Les actions système, telles que reporter ou rejeter la notification, sont prises en charge à la fois pour les applications UWP et pour le Windows App SDK. Les API AppNotificationBuilder ne prennent pas en charge ce scénario, mais les applications du Kit de développement logiciel (SDK) d’application Windows peuvent implémenter ce scénario à l’aide des API Microsoft.Windows.AppNotifications.Builder ou du code XML brut.

Note

Vous ne pouvez avoir que 5 boutons (y compris les éléments de menu contextuel que nous abordons plus tard).

Capture d’écran d’une notification toast montrant une ligne de texte suivie d’une ligne avec deux boutons définis par les éléments d’action ».

new ToastContentBuilder()
    var builder = new AppNotificationBuilder()
        .AddText("New product in stock!")
        .AddButton(new AppNotificationButton("See more details")
            .AddArgument("action", "viewDetails"))
            .AddArgument("contentId", "351")
        .AddButton(new AppNotificationButton("Remind me later")
            .AddArgument("action", "remindLater"))
            .AddArgument("contentId", "351");

var builder = new ToastContentBuilder()
    .AddText("New product in stock!")
    .AddButton(new ToastButton()
        .SetContent("See more details")
        .AddArgument("action", "viewDetails"))

    .AddButton(new ToastButton()
        .SetContent("Remind me later")
        .AddArgument("action", "remindLater"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>New product in stock!</text>
        </binding>
    </visual>
      <actions>
          <action content='See more details' arguments='action=viewDetails;contentId=351'/>
          <action content='Remind me later' arguments='action=remindLater;contentId=351'/>
      </actions>
</toast>

Boutons avec icônes

Vous pouvez ajouter des icônes à vos boutons. Ces icônes sont des images de 16 x 16 pixels, blanches et transparentes, à échelle 100 %, et ne doivent pas inclure de marge dans l'image elle-même. Si vous choisissez d'inclure des icônes dans une notification de type toast, vous devez en fournir pour tous les boutons de la notification, car cela transforme le style de vos boutons en icônes.

Note

Pour l’accessibilité, veillez à inclure une version de contraste blanc de l’icône (icône noire pour les arrière-plans blancs) afin que lorsque l’utilisateur active le mode Contraste élevé blanc, votre icône est visible. Pour plus d’informations, consultez la prise en charge des notifications vignette et toast pour la langue, la mise à l’échelle et le contraste élevé.

new ToastContentBuilder()
    var builder = new AppNotificationBuilder()
        .AddText("Return books to the library.")
        .AddButton(new AppNotificationButton("Accept")
            .AddArgument("action", "accept")
            .SetIcon(new Uri("ms-appx:///Images/Accept.png")))
        .AddButton(new AppNotificationButton("Snooze")
            .AddArgument("action", "snooze")
            .SetIcon(new Uri("ms-appx:///Images/Snooze.png")))
        .AddButton(new AppNotificationButton("Dismiss")
            .AddArgument("action", "dismiss")
            .SetIcon(new Uri("ms-appx:///Images/Dismiss.png")));

var builder = new ToastContentBuilder()
    .AddText("New product in stock!")
    .AddButton(new ToastButton()
        .SetContent("Accept")
        .AddArgument("action", "accept")
        .SetImageUri(new Uri("ms-appx:///Images/Accept.png")))
    .AddButton(new ToastButton()
        .SetContent("Snooze")
        .AddArgument("action", "snooze")
        .SetImageUri(new Uri("ms-appx:///Images/Snooze.png")))
    .AddButton(new ToastButton()
        .SetContent("Dismiss")
        .AddArgument("action", "dismiss")
        .SetImageUri(new Uri("ms-appx:///Images/Dismiss.png")));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Return books to the library.</text>
        </binding>
    </visual>
    <actions>
        <action content='Accept' arguments='action=accept' imageUri='ms-appx:///Assets/Accept.png'/>
        <action content='Snooze' arguments='action=snooze' imageUri='ms-appx:///Assets/Snooze.png'/>
        <action content='Dismiss' arguments='action=dismiss' imageUri='ms-appx:///Assets/Dismiss.png'/>
    </actions>
</toast>

Nouveautés de Windows 11 Update : vous pouvez ajouter des info-bulles à vos icônes avec la propriété HintToolTip dans XML. Cela est idéal si vos boutons ont des icônes, mais pas de contenu, car cela vous permet de transmettre du texte que le Narrateur Windows peut lire. Toutefois, si le contenu est présent, le Narrateur le lit, peu importe ce qui est passé dans l’info-bulle.

var button = new AppNotificationButton("Reply")
    .AddArgument("action", "reply");

if (AppNotificationButton.IsToolTipSupported())
{
    button.ToolTip = "Click to reply.";
}

var builder = new AppNotificationBuilder()
    .AddText("Notification text.")
    .AddButton(button);

// The Community Toolkit builder syntax does not currently support icon tooltips.

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Notification text.</text>
        </binding>
    </visual>
    <actions>
        <action content='Reply' arguments='action=reply' hint-toolTip='Click to reply'/>
    </actions>
</toast>

Boutons avec des couleurs

Nouveauté de Windows 11 Update : vous pouvez ajouter des couleurs rouges ou vertes à vos boutons en ajoutant l’attribut useButtonStyle à l’élément XML toast et l’attribut hint-buttonStyle à l’élément XML d’action, comme indiqué ci-dessous.

var builder = new AppNotificationBuilder()
    .SetScenario(AppNotificationScenario.IncomingCall)
    .AddText("Andrew Bares", new AppNotificationTextProperties()
        .SetIncomingCallAlignment())
      .AddText("Incoming Call - Mobile", new AppNotificationTextProperties()
        .SetIncomingCallAlignment())
      .SetInlineImage(new Uri("ms-appx:///Images/Profile.png"),
        AppNotificationImageCrop.Circle)
    .AddButton(new AppNotificationButton()
        .SetToolTip("Answer Video Call")
        .SetButtonStyle(AppNotificationButtonStyle.Success)
        .SetIcon(new Uri("ms-appx:///Images/Video.png"))
        .AddArgument("videoId", "123"))
    .AddButton(new AppNotificationButton()
        .SetToolTip("Answer Phone Call")
        .SetButtonStyle(AppNotificationButtonStyle.Success)
        .SetIcon(new Uri("ms-appx:///Images/Call.png"))
        .AddArgument("callId", "123"))
    .AddButton(new AppNotificationButton()
        .SetToolTip("Hang Up")
        .SetButtonStyle(AppNotificationButtonStyle.Critical)
        .SetIcon(new Uri("ms-appx:///Images/HangUp.png"))
        .AddArgument("hangUpId", "123"));

// The WIndows Community Toolkit builder syntax does not currently support red and green button colors.

<toast scenario='incomingCall' useButtonStyle='true'>
    <visual>
        <binding template='ToastGeneric'>
            <text hint-callScenarioCenterAlign='true'>Andrew Bares</text>
            <text hint-callScenarioCenterAlign='true'>Incoming Call - Mobile</text>
            <image src='ms-appx:///Images/InlineImage.png' hint-crop='circle'/>
        </binding>
    </visual>
    <actions>
        <action 
            content='' 
            arguments='videoId=123' 
            imageUri='ms-appx:///Images/Video.png' 
            hint-buttonStyle='Success' 
            hint-toolTip='Answer Video Call'/>
        <action 
            content='' 
            arguments='callId=123' 
            imageUri='ms-appx:///Images/Call.png' 
            hint-buttonStyle='Success' 
            hint-toolTip='Answer Phone Call'/>
        <action 
            content='' 
            arguments='hangUpId=123' 
            imageUri='ms-appx:///Images/HangUp.png' 
            hint-buttonStyle='Critical' 
            hint-toolTip='Hang Up'/>
    </actions>
</toast>

Nouveauté de la mise à jour anniversaire : vous pouvez ajouter des actions de menu contextuel supplémentaires au menu contextuel existant qui s’affiche lorsque l’utilisateur clique avec le bouton droit sur votre notification toast ou sélectionne l’icône du menu contextuel.

Note

Sur les appareils plus anciens, ces actions de menu contextuel supplémentaires s’affichent simplement sous forme de boutons normaux sur votre notification.

Les actions de menu contextuel supplémentaires que vous ajoutez (par exemple, « Désactiver la conversation de groupe pendant 1 heure ») apparaissent au-dessus des deux entrées système par défaut.

var builder = new AppNotificationBuilder()
    .AddText("Camping this weekend?")
    .SetAppLogoOverride(new Uri("ms-appx:///images/Reply.png"), AppNotificationImageCrop.Circle)
    .AddButton(new AppNotificationButton("Mute group chat for 1 hour")
        .AddArgument("action", "mute")
        .SetContextMenuPlacement());

La syntaxe du générateur du Kit de ressources de la communauté Windows ne prend actuellement pas en charge les actions de menu contextuel. Nous vous recommandons donc d’utiliser la syntaxe d’initialiseur.

ToastContent content = new ToastContent()
{
    ...
 
    Actions = new ToastActionsCustom()
    {
        ContextMenuItems =
        {
            new ToastContextMenuItem("Mute group chat for 1 hour", "action=muteId")
        }
    }
};

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Camping this weekend?</text>
            <image placement='appLogoOverride' src='ms-appx:///images/Reply.png' hint-crop='circle'/>
        </binding>
    </visual>
    <actions>
        <action content='Mute group chat for 1 hour' arguments='action=mute' placement='contextMenu'/>
    </actions>
</toast>

Note

Les éléments de menu contextuel supplémentaires contribuent à la limite totale de 5 boutons sur un toast.

L’activation d’éléments de menu contextuel supplémentaires est gérée de manière identique aux boutons toast.

Inputs

Les entrées sont spécifiées dans la région Actions de la notification d’application, ce qui signifie qu’elles ne sont visibles que lorsque la notification est développée.

Zone de texte réponse rapide

Pour activer une zone de texte de réponse rapide (par exemple, dans une application de messagerie), ajoutez une entrée de texte et un bouton, puis référencez l’ID du champ d’entrée de texte afin que le bouton s’affiche en regard du champ d’entrée. L’icône facultative du bouton, le cas échéant, doit être une image de 32 x 32 pixels sans remplissage, pixels blancs définis sur transparent et 100% échelle.

Capture d’écran d’une notification toast avec une image de profil et quelques lignes de texte. Une zone de texte permettant de taper directement dans le toast est incluse, ainsi qu’un bouton pour envoyer la réponse.

var builder = new AppNotificationBuilder()
    .AddTextBox("textBox", "Type a reply", "Reply")
    .AddButton(AppNotificationButton("Send")
        .AddArguments("action", "Send")
        .SetInputId("textBox"))
    .BuildNotification();

var builder = new ToastContentBuilder()
    .AddInputTextBox("tbReply", "Type a reply")
        .AddButton(new ToastButton()
        .SetContent("Reply")
        .SetTextBoxId("tbReply") // To place button next to text box, reference text box's id
        .SetImageUri(new Uri("Assets/Reply.png", UriKind.Relative))
        .AddArgument("action", "reply"));

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <image placement="appLogoOverride" hint-crop="circle" src="https://picsum.photos/48?image=883"/>
      <text>Andrew Bares</text>
      <text>Shall we meet up at 8?</text>
    </binding>
  </visual>
  <actions>
    <input id="textBox" type="text" placeHolderContent="Type a reply"/>
    <action
      content="Send"
      arguments="action=reply&amp;convId=9318"
      hint-inputId="textBox"
      imageUri="Assets/Reply.png"/>
  </actions>
</toast>

Entrées avec barre de boutons

Vous pouvez également avoir une (ou plusieurs) entrées avec des boutons normaux affichés sous les entrées.

Capture d’écran d’une notification d’application montrant une ligne de texte, une zone de texte et une ligne avec deux boutons intitulés « Répondre » et « Appel vidéo ».

// The Microsoft.Windows.AppNotifications.Builder syntax does not currently support quick reply text boxes.

new ToastContentBuilder()
    ...
    
    .AddInputTextBox("tbReply", "Type a reply")

    .AddButton(new ToastButton()
        .SetContent("Reply")
        .AddArgument("action", "reply"))

    .AddButton(new ToastButton()
        .SetContent("Video call")
        .AddArgument("action", "videoCall"));

<toast launch="app-defined-string">
  <visual>
    <binding template="ToastGeneric">
      <image placement="appLogoOverride" hint-crop="circle" src="https://picsum.photos/48?image=883"/>
      <text>Andrew Bares</text>
      <text>Shall we meet up at 8?</text>
    </binding>
  </visual>
  <actions>
    <input id="textBox" type="text" placeHolderContent="Type a reply"/>
    <action
      content="Reply"
      arguments="action=reply&amp;threadId=9218"/>
    <action
      content="Video call"
      arguments="action=videocall&amp;threadId=9218"
      activationType="foreground"/>
  </actions>
</toast>

Entrée de sélection

Outre les zones de texte, vous pouvez également utiliser un menu de sélection.

Capture d’écran d’une notification d’application montrant une ligne de texte, une entrée de sélection avec « Déjeuner » comme élément sélectionné, et une ligne avec deux boutons intitulés « Réserve » et « Call restaurant ».

var builder = new AppNotificationBuilder()
    .AddText("4th coffee?")
    .AddText("When do you plan to come in tomorrow?")
    .AddComboBox(new AppNotificationComboBox("time")
        .SetTitle("Select an item:")
        .AddItem("breakfast", "Breakfast")
        .AddItem("lunch", "Lunch")
        .AddItem("dinner", "Dinner")
        .SetSelectedItem("lunch"))
    .AddButton(new AppNotificationButton("Reply")
        .AddArgument("action", "reply")
        .AddArgument("threadId", "9218")
        .SetContextMenuPlacement())
    .AddButton(new AppNotificationButton("Call restaurant")
        .AddArgument("action", "videocall")
        .AddArgument("threadId", "9218")
        .SetContextMenuPlacement());

var builder = new ToastContentBuilder()
    .AddText("4th coffee?")
    .AddText("When do you plan to come in tomorrow?")
    .AddToastInput(new ToastSelectionBox("time")
    {
        DefaultSelectionBoxItemId = "lunch",
        Items =
            {
                new ToastSelectionBoxItem("breakfast", "Breakfast"),
                new ToastSelectionBoxItem("lunch", "Lunch"),
                new ToastSelectionBoxItem("dinner", "Dinner")
            }
    })
    .AddButton(new ToastButton()
        .SetContent("Reply")
        .AddArgument("action", "reply")
        .AddArgument("threadId", "9218"))
    .AddButton(new ToastButton()
        .SetContent("Call restaurant")
        .AddArgument("action", "videoCall")
        .AddArgument("threadId", "9218"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>4th coffee?</text>
            <text>When do you plan to come in tomorrow?</text>
        </binding>
    </visual>
    <actions>
        <input id='time' type='selection' title='Select an item:' defaultInput='lunch'>
            <selection id='breakfast' content='Breakfast'/><selection id='dinner' content='Dinner'/>
            <selection id='lunch' content='Lunch'/>
        </input>
        <action content='Reply' arguments='action=reply;threadId=9218' placement='contextMenu'/>
        <action content='Call Restaurant' arguments='action=videocall;threadId=9218' placement='contextMenu'/>
    </actions>
</toast>

Répéter/Ignorer

À l’aide d’un menu de sélection et de deux boutons, nous pouvons créer une notification de rappel qui utilise les actions de mise en veille et annulation du système. Veillez à définir le scénario sur « Rappel » pour que la notification se comporte comme un rappel.

Capture d’écran d’une notification d’application avec des lignes de texte décrivant l’heure et l’emplacement d’une réunion. Une zone de sélection comporte « 15 minutes » sélectionnée et des boutons sont étiquetés Snooze et Ignorer.

Nous lions le bouton Snooze à la saisie du menu de sélection à l'aide de la propriété SelectionBoxId sur le bouton toast.

La syntaxe Microsoft.Windows.AppNotifications.Builder ne prend actuellement pas en charge l’activation du système. Toutefois, ce scénario est pris en charge pour les applications du Kit de développement logiciel (SDK) d’application Windows et vous pouvez générer des notifications pour ce scénario à l’aide Microsoft.Toolkit.Uwp.Notifications des API ou du code XML brut.

// The Microsoft.Windows.AppNotifications.Builder syntax does not currently support system activation. 
// But this scenario is supported for Windows App SDK apps, and you can build notifications for this 
// scenario using the `Microsoft.Toolkit.Uwp.Notifications` APIs or raw XML.

new ToastContentBuilder()
    .SetToastScenario(ToastScenario.Reminder)
    
    ...
    
    .AddToastInput(new ToastSelectionBox("snoozeTime")
    {
        DefaultSelectionBoxItemId = "15",
        Items =
        {
            new ToastSelectionBoxItem("5", "5 minutes"),
            new ToastSelectionBoxItem("15", "15 minutes"),
            new ToastSelectionBoxItem("60", "1 hour"),
            new ToastSelectionBoxItem("240", "4 hours"),
            new ToastSelectionBoxItem("1440", "1 day")
        }
    })

    .AddButton(new ToastButtonSnooze() { SelectionBoxId = "snoozeTime" })
    .AddButton(new ToastButtonDismiss());

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text hint-maxLines="1">Adaptive Tiles Meeting</text>
      <text>Conf Room 2001 / Building 135</text>
      <text>10:00 AM - 10:30 AM</text>
    </binding>
  </visual>
  <actions>
    <input id="snoozeTime" type="selection" defaultInput="15">
      <selection id="1" content="1 minute"/>
      <selection id="15" content="15 minutes"/>
      <selection id="60" content="1 hour"/>
      <selection id="240" content="4 hours"/>
      <selection id="1440" content="1 day"/>
    </input>
    <action activationType="system" arguments="snooze" hint-inputId="snoozeTime" content="" />
    <action activationType="system" arguments="dismiss" content=""/>
  </actions>
</toast>

Pour utiliser la temporisation et annuler ces actions du système :

Spécifier un ToastButtonSnooze ou ToastButtonDismiss
Spécifiez éventuellement une chaîne de contenu personnalisée :
Si vous ne fournissez pas de chaîne, nous allons utiliser automatiquement des chaînes localisées pour « Snooze » et « Ignorer ».
Spécifiez éventuellement selectionBoxId :
Si vous ne souhaitez pas que l’utilisateur sélectionne un intervalle de répétition et que votre notification ne snooze qu’une seule fois pour un intervalle de temps défini par le système (cohérent dans le système d’exploitation), ne construisez <aucune entrée> du tout.
Si vous souhaitez fournir des sélections d’intervalle snooze : - Spécifiez SelectionBoxId dans l’action snooze - Mettez en correspondance l’ID de l’entrée avec SelectionBoxId de l’action snooze - Spécifiez la valeur de ToastSelectionBoxItem comme un entier non négatif qui représente l’intervalle de répétition en minutes.

Audio

L'audio personnalisé a toujours été pris en charge sur Mobile et est pris en charge dans la version Desktop 1511 (build 10586) ou ultérieure. L’audio personnalisé peut être référencé via les chemins suivants :

ms-appx:///
ms-appdata:///

var builder = new AppNotificationBuilder()
    .AddText("Notification text.")
    .SetAudioUri(new Uri("ms-appx:///Audio/NotificationSound.mp3"));

var builder = new ToastContentBuilder()
    .AddText("Notification text")
    .AddAudio(new Uri("ms-appx:///Audio/NotificationSound.mp3"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Notification text.</text>
        </binding>
    </visual>
    <audio src='ms-appx:///Audio/NotificationSound.mp3'/>
</toast>

Vous pouvez également choisir parmi la liste des ms-winsoundevents, qui ont toujours bénéficié d'une prise en charge sur les deux plateformes.

var builder = new AppNotificationBuilder()
    .AddText("Notification text.")
    .SetAudioEvent(AppNotificationSoundEvent.Alarm, AppNotificationAudioLooping.Loop);

var builder = new ToastContentBuilder()
    .AddText("Notification text")
    .AddAudio(new Uri("ms-winsoundevent:Notification.Looping.Alarm"));

<toast>
    <visual>
        <binding template='ToastGeneric'>
            <text>Notification text.</text>
        </binding>
    </visual>
    <audio src='ms-winsoundevent:Notification.Looping.Alarm' loop='true'/>
</toast>

Consultez la page de schéma audio pour plus d’informations sur l’audio dans les notifications d’application. Pour savoir comment envoyer une notification d’application qui utilise un son personnalisé, consultez l’utilisation de l’audio personnalisé dans les notifications toast.

Scenarios

Pour créer des notifications importantes, des alarmes, des rappels et des notifications d’appel entrantes, vous utilisez simplement une notification d’application normale avec une valeur de scénario qui lui est affectée. Le scénario ajuste quelques comportements pour créer une expérience utilisateur cohérente et unifiée. Il existe quatre valeurs de scénario possibles :

Reminder
Alarm
IncomingCall
Urgent

Reminders

Dans le scénario de rappel, la notification reste à l’écran jusqu’à ce que l’utilisateur l’ignore ou prenne des mesures. Sur Windows Mobile, la notification de l’application s’affiche également déjà développée. Un son de rappel sera joué. Vous devez fournir au moins un bouton sur la notification de votre application. Sinon, la notification sera traitée comme une notification normale.

var builder = new AppNotificationBuilder()
    .AddText("Notification text.")
    .SetScenario(AppNotificationScenario.Reminder);

var builder = new ToastContentBuilder()
    .AddText("Notification text.")
    .SetToastScenario(ToastScenario.Reminder)

<toast scenario='reminder'>
    <visual>
        <binding template='ToastGeneric'>
            <text>Notification text.</text>
        </binding>
    </visual>
</toast>

Alarms

Les alarmes se comportent de la même façon que les rappels, sauf que les alarmes répètent automatiquement un son d’alarme par défaut. Vous devez fournir au moins un bouton sur la notification de votre application. Sinon, la notification sera traitée comme une notification normale.

var builder = new AppNotificationBuilder()
    .AddText("Notification text.")
    .SetScenario(AppNotificationScenario.Alarm)
    .AddButton(new AppNotificationButton("Dismiss")
        .AddArgument("action", "dismiss"));

var builder = new ToastContentBuilder()
    .AddText("Notification text")
    .SetToastScenario(ToastScenario.Alarm)
    .AddButton(new ToastButton()
        .SetContent("Dismiss")
        .AddArgument("action", "dismiss"));

<toast scenario='alarm'>
    <visual>
        <binding template='ToastGeneric'>
            <text>Notification text.</text>
        </binding>
    </visual>
    <actions>
        <action content='Dismiss' arguments='action=dismiss'/>
    </actions>
</toast>

Appels entrants

Les notifications d’appel entrantes s’affichent pré-développées dans un format spécial d’appel et restent sur l’écran de l’utilisateur jusqu’à ce qu’elles soient ignorées. L’audio de sonnerie boucle en continu par défaut. Sur les appareils Windows Mobile, ils s'affichent en plein écran.

Notification d'appel entrant

var builder = new AppNotificationBuilder()
    .SetScenario(AppNotificationScenario.IncomingCall)
    .AddText("Andrew Bares", new AppNotificationTextProperties()
        .SetIncomingCallAlignment())
    .AddText("incoming call - mobile", new AppNotificationTextProperties()
        .SetIncomingCallAlignment())
      .SetInlineImage(new Uri("ms-appx:///images/profile.png"),
        AppNotificationImageCrop.Circle)
    .AddButton(new AppNotificationButton("Text reply")
        .SetToolTip("Text reply")
        .SetIcon(new Uri("ms-appx:///images/reply.png"))
        .AddArgument("textId", "123"))
    .AddButton(new AppNotificationButton("Reminder")
        .SetToolTip("Reminder")
        .SetIcon(new Uri("ms-appx:///images/reminder.png"))
        .AddArgument("reminderId", "123"))
    .AddButton(new AppNotificationButton("Ignore")
        .SetToolTip("Ignore")
        .SetIcon(new Uri("ms-appx:///images/ignore.png"))
        .AddArgument("ignoreId", "123"))
    .AddButton(new AppNotificationButton("Answer")
        .SetToolTip("Answer")
        .SetIcon(new Uri("ms-appx:///images/answer.png"))
        .AddArgument("answerId", "123"));

var builder = new ToastContentBuilder()
    .SetToastScenario(ToastScenario.IncomingCall)
    .AddText("Andrew Bares")
    .AddText("incoming call - mobile")
    .AddInlineImage(new Uri("ms-appx:///images/profile.png"), 
        "Andrew Bares",
        null,
        AdaptiveImageCrop.Circle)
    .AddButton(new ToastButton()
        .SetContent("Text reply")
        .SetImageUri(new Uri("ms-appx:///images/reply.png"))
        .AddArgument("textId", "123"))
    .AddButton(new ToastButton()
        .SetContent("Reminder")
        .SetImageUri(new Uri("ms-appx:///images/reminder.png"))
        .AddArgument("reminderId", "123"))
    .AddButton(new ToastButton()
        .SetContent("Ignore")
        .SetImageUri(new Uri("ms-appx:///images/ignore.png"))
        .AddArgument("ignoreId", "123"))
    .AddButton(new ToastButton()
        .SetContent("Answer")
        .SetImageUri(new Uri("ms-appx:///images/answer.png"))
        .AddArgument("answerId", "123"));

<toast scenario='incomingCall'>
    <visual>
        <binding template='ToastGeneric'>
            <text hint-callScenarioCenterAlign='true'>Andrew Bares</text>
            <text hint-callScenarioCenterAlign='true'>incoming call - mobile</text>
            <image src='ms-appx:///images/profile.png' hint-crop='circle'/>
        </binding>
    </visual>
    <actions>
        <action 
            content='Text reply' 
            arguments='textId=123' 
            imageUri='ms-appx:///images/reply.png' 
            hint-toolTip='Text reply'/>
        <action 
                content='Reminder' 
                arguments='reminderId=123' 
                imageUri='ms-appx:///images/reminder.png' 
                hint-toolTip='Reminder'/>
        <action 
                content='Ignore' 
                arguments='ignoreId=123' 
                imageUri='ms-appx:///images/ignore.png' 
                hint-toolTip='Ignore'/>
        <action 
            content='Answer' 
            arguments='answerId=123' 
            imageUri='ms-appx:///images/answer.png' 
            hint-toolTip='Answer'/>
    </actions>
</toast>

Notifications importantes

Important

Nécessite : vous devez exécuter Windows Insider Preview Build 22546 ou version ultérieure pour utiliser des notifications importantes.

Les notifications importantes permettent aux utilisateurs d’avoir plus de contrôle sur les applications de première et de tierces parties qui peuvent leur envoyer des notifications d'application de haute priorité (urgentes/importantes) pouvant passer par Focus Assist (Ne pas déranger). Cela peut être modifié dans les paramètres de notifications.

Capture d’écran d’une notification d’application urgente qui a un point d’exclamation dans la zone d’attribution en regard du nom de l’application. L’image montre également la notification d’application initiée par le système qui fournit des boutons à l’utilisateur pour autoriser ou interdire les notifications urgentes de l’application.

var builder = new AppNotificationBuilder()
    .AddText("Adaptive Tiles Meeting", 
        new AppNotificationTextProperties()
            .SetMaxLines(1))
    .AddText("Conf Room 2001 / Building 135")
    .AddText("10:00 AM - 10:30 AM");

if (AppNotificationBuilder.IsUrgentScenarioSupported())
{
    builder.SetScenario(AppNotificationScenario.Urgent);
}

// The builder syntax does not support important notifications yet.

<toast scenario='urgent'>
    <visual>
        <binding template='ToastGeneric'>
            <text hint-maxLines='1'>Adaptive Tiles Meeting</text>
            <text>Conf Room 2001 / Building 135</text>
            <text>10:00 AM - 10:30 AM</text>
        </binding>
    </visual>
</toast>

Localisation et accessibilité

Vos vignettes et notifications d’application peuvent charger des chaînes et des images adaptées à la langue d’affichage, au facteur d’échelle d’affichage, au contraste élevé et à d’autres contextes d’exécution. Pour plus d’informations, consultez la prise en charge des notifications vignette et toast pour la langue, la mise à l’échelle et le contraste élevé.

Gestion de l’activation

Pour savoir comment gérer les activations d’application (l’utilisateur clique sur votre toast ou vos boutons sur le toast), consultez Envoyer un toast local.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-11-19

Partager via

Contenu de notification d’application

Mise en route

Structure de notification d’application

Zone d’attribution

Visual

Éléments de texte

Image en ligne

Remplacement du logo de l’application

Conseil de découpe

Image de héros

Restrictions de taille d’image

Texte d’attribution

Horodatage personnalisé

Barre de progression

Headers

Contenu adaptatif

Colonnes et éléments de texte

Buttons

Boutons avec icônes

Boutons avec des couleurs

Actions de menu contextuel

Inputs

Zone de texte réponse rapide

Entrées avec barre de boutons

Entrée de sélection

Répéter/Ignorer

Audio

Scenarios

Reminders

Alarms

Appels entrants

Notifications importantes

Localisation et accessibilité

Gestion de l’activation

Rubriques connexes

Commentaires

Ressources supplémentaires