Contenu des toasts

Les notifications Toast adaptatives et interactives vous permettent de créer des notifications flexibles avec du texte, des images et des boutons/entrées.

API importantes : Package NuGet UWP Community Toolkit Notifications

Notes

pour afficher les modèles hérités de Windows 8.1 et Windows Phone 8,1, consultez le catalogue de modèles toast hérité.

Prise en main

Installez la bibliothèque Notifications. Si vous préférez utiliser C# plutôt que XML pour générer les notifications, installez le package NuGet Microsoft.Toolkit.Uwp.Notifications (recherchez « notifications uwp ». les exemples C# fournis dans cet article utilisent la version 7.0.0 du package NuGet.

Installez Notifications Visualizer. cette application Windows gratuite vous aide à concevoir des notifications de toast interactives en fournissant un aperçu visuel instantané de votre toast quand vous le modifiez, similaire à 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 Store.

Envoi d’une notification Toast

Pour savoir comment envoyer une notification, consultez Envoyer un toast local. Cette documentation traite uniquement de la création du contenu Toast.

Structure de notification toast

Les notifications Toast sont une combinaison de certaines propriétés de données telles que la balise/le groupe (qui vous permettent d’identifier la notification) et le contenu du Toast.

Les principaux composants du contenu Toast sont...

  • Launch: définit les arguments qui seront retransmis à votre application quand l’utilisateur clique sur votre toast, ce qui vous permet d’établir un lien vers le contenu correct affiché par le Toast. Pour plus d’informations, consultez Envoyer un toast local.
  • visuel: partie visuelle du Toast, y compris la liaison générique qui contient le texte et les images.
  • actions: partie interactive du Toast, y compris les entrées et les actions.
  • audio: contrôle le son joué lorsque le toast est présenté à l’utilisateur.

le contenu toast est défini dans du code XML brut, mais vous pouvez utiliser notre bibliothèque de NuGet pour obtenir un modèle objet C# (ou C++) pour construire le contenu toast. Cet article documente tout ce qui se passe dans le contenu du Toast.

new ToastContentBuilder()
    .AddArgument("conversationId", 9813)

    .AddText("Some text")

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

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

Voici une représentation visuelle du contenu du Toast :

structure de notification toast

Éléments visuels

Chaque toast doit spécifier un visuel, où vous devez fournir une liaison Toast générique, qui peut contenir du texte, des images et bien plus encore. ces éléments sont rendus sur différents appareils Windows, y compris les ordinateurs de bureau, les téléphones, les tablettes et les Xbox.

Pour tous les attributs pris en charge dans la section visuelle et ses éléments enfants, consultez la documentation du schéma.

L’identité de votre application sur la notification Toast est transporte via l’icône de votre application. Toutefois, si vous utilisez le remplacement du logo de l’application, nous affichons le nom de votre application sous vos lignes de texte.

Identité de l’application pour un toast normal Identité de l’application avec appLogoOverride
notification without appLogoOverride notification with appLogoOverride

Éléments de texte

Chaque toast doit avoir au moins un élément de texte et peut contenir deux éléments de texte supplémentaires, tous de type AdaptiveText.

Toast with title and description

depuis la Windows 10 mise à jour anniversaire, 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 maximum) est de 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).

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

Remplacement du logo de l’application

Par défaut, votre toast affiche le logo de votre application. Toutefois, vous pouvez remplacer ce logo par votre propre image ToastGenericAppLogo . Par exemple, s’il s’agit d’une notification d’une personne, nous vous recommandons de remplacer le logo de l’application par une image de cette personne.

Toast with app logo override

Vous pouvez utiliser la propriété HintCrop pour modifier le rognage de l’image. Par exemple, Circle produit une image entourée d’un cercle. Dans le cas contraire, l’image est carré. Les dimensions de l’image sont 48 pixels à 100% de mise à l’échelle. Nous vous recommandons généralement de fournir une version de chaque élément actif pour chaque facteur d’échelle : 100%, 125%, 150%, 200% et 400%.

new ToastContentBuilder()
    ...
    
    .AddAppLogoOverride(new Uri("https://picsum.photos/48?image=883"), NotificationAppLogoCrop.Circle);

Image de héros

Nouveauté de la mise à jour anniversaire: les toasts peuvent afficher une image de héros, qui est un ToastGenericHeroImage présenté de manière visible dans la bannière Toast et dans le centre de maintenance. Les dimensions de l’image sont 364x180 pixels à 100% de mise à l’échelle.

Toast with hero image
new ToastContentBuilder()
    ...
    
    .AddHeroImage(new Uri("https://picsum.photos/364/180?image=1043"));

Image Inline

Vous pouvez fournir une image Inline pleine largeur qui s’affiche lorsque vous développez le Toast.

Toast with additional image
new ToastContentBuilder()
    ...
    
    .AddInlineImage(new Uri("https://picsum.photos/360/202?image=1043"));

Restrictions de taille d’image

Les images que vous utilisez dans votre notification Toast peuvent être source à partir de...

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

Pour les images Web distantes http et HTTPS, il existe des limites sur la taille de fichier de chaque image individuelle. Dans la mise à jour des créateurs de automne (16299), nous avons augmenté la limite à 3 Mo sur les connexions normales et 1 Mo sur les connexions limitées. Avant cela, les images étaient toujours limitées à 200 Ko.

Connexion normale Connexion limitée Avant la mise à jour des créateurs de automne
3 Mo 1 Mo 200 Ko

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

Texte de l’attribution

Nouveauté de la mise à jour anniversaire: Si vous devez référencer la source de votre contenu, vous pouvez utiliser le texte de l’attribution. Ce texte est toujours affiché au bas de votre notification, avec l’identité de votre application ou l’horodateur de la notification.

dans les versions antérieures de Windows qui ne prennent pas en charge le texte d’attribution, le texte sera simplement affiché sous la forme d’un autre élément de texte (en supposant que vous n’avez pas encore le maximum de trois éléments de texte).

Toast with attribution text
new ToastContentBuilder()
    ...
    
    .AddAttributionText("Via SMS");

Horodateur personnalisé

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

Toast with custom timestamp

Pour en savoir plus sur l’utilisation d’un horodateur personnalisé, consultez horodatages personnalisés sur les toasts.

new ToastContentBuilder()
    ...
    
    .AddCustomTimeStamp(new DateTime(2017, 04, 15, 19, 45, 00, DateTimeKind.Utc));

Barre de progression

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

Toast with progress bar

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

En-têtes

Nouveautés de Creators Update: vous pouvez regrouper les notifications sous les en-têtes dans le centre de maintenance. Par exemple, vous pouvez regrouper des messages 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.

Toasts with header

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

Contenu adaptatif

Nouveauté de la mise à jour anniversaire: en plus du contenu indiqué ci-dessus, vous pouvez également afficher du contenu adaptatif supplémentaire qui est visible lorsque le toast est développé.

Ce contenu supplémentaire est spécifié à l’aide de Adaptive, qui vous permet d’en savoir plus sur en lisant la documentation sur les vignettes adaptatives.

Notez que tout contenu adaptatif doit être contenu dans un AdaptiveGroup. Dans le cas contraire, il ne sera pas rendu à l’aide de Adaptive.

Colonnes et éléments de texte

Voici un exemple d’utilisation de colonnes et de certains éléments de texte adaptatif avancé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 adaptatif riches.

Toast with additional text
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
                    }
                }
            }
        }
    });

Boutons

Les boutons rendent votre toast interactif, ce qui permet à l’utilisateur d’effectuer des actions rapides sur votre notification Toast 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 s’affichent 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 effectuer les actions suivantes...

  • Activation de l’application au premier plan, avec un argument qui peut être utilisé pour accéder à une page ou à un contexte spécifique.
  • Activation de la tâche en arrière-plan de l’application, pour une réponse rapide ou un scénario similaire.
  • activation d’une autre application par le biais d’un lancement par protocole ;
  • Exécution d’une action système, telle que la répétition ou la disparition de la notification.

Notes

Vous pouvez avoir jusqu’à 5 boutons (y compris les éléments de menu contextuel que nous aborderons plus tard).

notification with actions, example 1
new ToastContentBuilder()
    ...
    
    .AddButton(new ToastButton()
        .SetContent("See more details")
        .AddArgument("action", "viewDetails"))

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

Boutons avec des icônes

Vous pouvez ajouter des icônes à vos boutons. Ces icônes sont des images de 16 pixels transparentes en blanc à 100% de mise à l’échelle, et elles ne doivent pas être incluses dans l’image elle-même. Si vous choisissez de fournir des icônes sur une notification Toast, vous devez fournir des icônes pour tous vos boutons dans la notification, car elle transforme le style de vos boutons en boutons d’icône.

Notes

Pour l’accessibilité, veillez à inclure une version blanche de l’icône (une icône noire pour les arrière-plans blancs), de sorte que lorsque l’utilisateur active contraste élevé mode blanc, l’icône est visible. En savoir plus sur la page d’accessibilité Toast.

Toast that has buttons with icons
new ToastContentBuilder()
    ...
    
    .AddButton(new ToastButton()
        .SetContent("Dismiss")
        .AddArgument("action", "dismiss")
        .SetImageUri(new Uri("Assets/NotificationButtonIcons/Dismiss.png", UriKind.Relative))
        .SetBackgroundActivation());

Boutons avec activation de mise à jour en attente

Nouveautés de la mise à jour des créateurs de automne: sur les boutons d’activation en arrière-plan, vous pouvez utiliser un comportement d’activation après activation de PendingUpdate pour créer des interactions à plusieurs étapes dans vos notifications Toast. Quand l’utilisateur clique sur le bouton, votre tâche en arrière-plan est activée et le toast est placé dans un État « mise à jour en attente », où il reste à l’écran jusqu’à ce que votre tâche en arrière-plan remplace le Toast par un nouveau Toast.

Pour savoir comment implémenter cela, consultez mise à jour en attente de Toast.

Toast avec mise à jour en attente

Actions du menu contextuel

Nouveauté de la mise à jour anniversaire: vous pouvez ajouter des actions de menu contextuel supplémentaires au menu contextuel existant qui apparaît lorsque l’utilisateur clique avec le bouton droit sur votre toast dans le centre de maintenance. Notez que ce menu s’affiche uniquement quand l’utilisateur clique avec le bouton droit dans le centre de maintenance. Il n’apparaît pas quand vous cliquez avec le bouton droit sur une bannière de message Toast.

Notes

Sur les appareils plus anciens, ces actions de menu contextuel supplémentaires s’affichent simplement comme des boutons normaux sur votre toast.

Les actions de menu contextuel supplémentaires que vous ajoutez (telles que « changer d’emplacement ») s’affichent au-dessus des deux entrées système par défaut.

Toast with context menu

La syntaxe du générateur ne prend pas en charge les actions du menu contextuel. nous vous recommandons donc d’utiliser la syntaxe de l’initialiseur.

ToastContent content = new ToastContent()
{
    ...
 
    Actions = new ToastActionsCustom()
    {
        ContextMenuItems =
        {
            new ToastContextMenuItem("Change location", "action=changeLocation")
        }
    }
};

Notes

Des é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 la même façon que les boutons Toast.

Entrées

Les entrées sont spécifiées dans la région actions de la région Toast du Toast, ce qui signifie qu’elles sont visibles uniquement lorsque le toast est développé.

Zone de texte de 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 à côté du champ d’entrée. L’icône du bouton doit être une image de 32x32 pixels sans remplissage, des pixels blancs définis sur transparent et une échelle de 100%.

notification with text input and actions
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")
        .SetBackgroundActivation());

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.

notification with text and input actions
new ToastContentBuilder()
    ...
    
    .AddInputTextBox("tbReply", "Type a reply")

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

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

Entrée de sélection

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

notification with selection input and actions
new ToastContentBuilder()
    ...
    
    .AddToastInput(new ToastSelectionBox("time")
    {
        DefaultSelectionBoxItemId = "lunch",
        Items =
        {
            new ToastSelectionBoxItem("breakfast", "Breakfast"),
            new ToastSelectionBoxItem("lunch", "Lunch"),
            new ToastSelectionBoxItem("dinner", "Dinner")
        }
    })

    .AddButton(...)
    .AddButton(...);

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 répéter et ignorer du système. Veillez à définir le scénario sur rappel pour que la notification se comporte comme un rappel.

reminder notification

Nous allons lier le bouton répéter à l’entrée du menu de sélection à l’aide de la propriété SelectionBoxId du bouton Toast.

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

Pour utiliser les actions système répéter et ignorer :

  • Spécifiez un ToastButtonSnooze ou un ToastButtonDismiss
  • Spécifiez éventuellement une chaîne de contenu personnalisée :
    • Si vous ne fournissez pas de chaîne, nous utiliserons automatiquement les chaînes localisées pour « répéter » et « ignorer ».
  • Spécifiez éventuellement le SelectionBoxId:
    • Si vous ne voulez pas que l’utilisateur sélectionne un intervalle de répétition, mais souhaitez simplement que votre notification se répète une seule fois pendant un intervalle de temps défini par le système (et cohérent dans l’ensemble du système d’exploitation), ne construisez aucun élément <input>.
    • Si vous voulez fournir des sélections d’intervalle de répétition :
      • Spécifier SelectionBoxId dans l’action de répétition
      • Correspond à l’ID de l’entrée avec le SelectionBoxId de l’action de répétition
      • Spécifiez la valeur de ToastSelectionBoxItem en tant que nonNegativeInteger qui représente l’intervalle de répétition en minutes.

Audio

L’audio personnalisé a toujours été pris en charge par mobile et est pris en charge dans la version de bureau 1511 (Build 10586) ou plus récente. L’audio personnalisé peut être référencé via les chemins d’accès suivants :

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

Vous pouvez également choisir parmi la liste des MS-winsoundevents, qui ont toujours été prises en charge sur les deux plateformes.

new ToastContentBuilder()
    ...
    
    .AddAudio(new Uri("ms-appx:///Assets/NewMessage.mp3"));

Consultez la page schéma audio pour plus d’informations sur l’audio dans les notifications Toast. Pour savoir comment envoyer un toast à l’aide de l’audio personnalisé, consultez l’article audio personnalisé sur les toasts.

Alarmes, rappels et appels entrants

Pour créer des alarmes, des rappels et des notifications d’appels entrants, il vous suffit d’utiliser une notification Toast normale avec une valeur de scénario qui lui est assignée. Le scénario adusts quelques comportements pour créer une expérience utilisateur cohérente et unifiée.

Important

Lorsque vous utilisez le rappel ou l’alarme, vous devez fournir au moins un bouton sur votre notification Toast. Dans le cas contraire, le Toast sera traité comme un toast normal.

  • Rappel: la notification reste à l’écran jusqu’à ce que l’utilisateur la ignore ou effectue une action. sur Windows Mobile, le toast s’affichera également en préversion. Un rappel sera émis.
  • Alarme: en plus des comportements de rappel, les alarmes effectuent en outre une boucle audio avec un son d’alarme par défaut.
  • IncomingCall: les notifications d’appels entrants sont affichées en mode plein écran sur Windows appareils mobiles. Dans le cas contraire, ils ont les mêmes comportements que les alarmes, sauf qu’ils utilisent l’audio de sonnerie et que leurs boutons ont un style différent.
new ToastContentBuilder()
    .SetToastScenario(ToastScenario.Reminder)
    ...

Localisation et accessibilité

Vos mosaïques et toasts 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 prise en charge des notifications par 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 de Toast (l’utilisateur qui clique sur votre toast ou sur les boutons du Toast), consultez Envoyer un toast local.