Notifications Toast en C#, WPF et MVVM
Published: 2023-12-01 12:12:44

Vous l'avez remarqué, les [notifications](https://www.pubnub.com/use-case/alerts-and-push-notifications/) sur le bureau sont devenues une fonctionnalité nécessaire dans les applications en temps réel, [pilotées par des événements](https://www.pubnub.com/guides/event-driven-architecture/). Les services web doivent alerter les utilisateurs des signaux de l'arrière-plan ou des messages d'autres utilisateurs, dès qu'ils se produisent.

Si vous êtes un ingénieur logiciel ou un développeur de logiciels complet cherchant à construire une application Windows Desktop en utilisant **C#** et **WPF**, **Windows Forms**, ou **UWP**, ce guide vous guidera dans la construction du **code front-end et back-end** pour les notifications push de bureau avec le **modèle de conception MVVM**.

L'acteur principal ici est l'[**API de messagerie en temps réel**](https://www.pubnub.com/docs/channels/overview) **de PubNub** , qui permet aux clients ou aux serveurs d'envoyer des signaux en temps réel à un nombre illimité d'appareils, d'applications web et d'applications mobiles, depuis n'importe où dans le monde.

**Aperçu des langages de programmation nécessaires pour les notifications de toasts**
-------------------------------------------------------------------------------------

Pour ce tutoriel, nous utiliserons divers langages de codage et d'algorithme. Pour commencer, nous allons donner une brève définition de ces langages de programmation, puis nous plongerons dans le processus de travail.

**Qu'est-ce que WPF ?**
-----------------------

L'exemple de code que nous allons parcourir ensemble est écrit en utilisant [Windows Presentation Foundation](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/introduction-to-wpf-in-vs?view=netframeworkdesktop-4.8) ou WPF. Au cours de la dernière décennie, WPF a été un sous-système de premier choix pour le développement d'applications web pour le bureau Windows avec **C# et le cadre .NET**. Il ressemble à Windows Forms par son utilisation de [XAML](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/fundamentals/xaml?view=netdesktop-5.0) pour le développement de l'interface utilisateur et de C# [Code Behinds](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/code-behind-and-xaml-in-wpf?view=netframeworkdesktop-4.8) pour chaque vue.

**Petite astuce :**

Dans ce tutoriel, nous allons garder autant de code que possible en dehors du Code Behind parce que nous allons utiliser le modèle MVVM. Pour cette raison, le code qui apparaîtrait normalement dans les classes du Code Behind **ira à la place dans les classes du ViewModel**.

**Qu'est-ce que l'architecture MVVM ?**
---------------------------------------

**Model-View-ViewModel** ou MVVM est un modèle de conception qui permet de **séparer** le développement de l'interface utilisateur et le développement du back-end dans une application orientée vers l'utilisateur. Il y a **trois composants** qui constituent ce modèle.

### Quels sont les composants de WPFApps ?

Pour WPFapps, ces composants sont :

-   Vues - [XAML et CodeBehinds](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/code-behind-and-xaml-in-wpf?view=netframeworkdesktop-4.8)
    
-   ViewModels - Code C# pour la gestion de l'état et le contrôle des données qui se déplacent entre le modèle et la vue.
    
-   Modèles - Classes C#, stockage des données, logique commerciale.
    

![](https://images.ctfassets.net/3prze68gbwl1/655JWYGQsi4tlNkqAhlEYq/197b20ffa25e393fc71d3959804c5d13/pubnub-mvvm-diagram.png)

**Notifications de bureau en C#**
---------------------------------

La classe de **notification Toast** est une solution de bureau Windows pour les notifications adaptées au système d'exploitation. Les notifications Toast sont intégrées à la classe de notification de l'interface utilisateur Windows.

### Qu'est-ce qu'une notification Toast ?

Pour cet exemple, nous utiliserons une notification Toast. Une notification Toast est une petite fenêtre contextuelle programmée pour apparaître et expirer automatiquement. Elle est généralement discrète et n'exige aucune action de la part de l'utilisateur. Elle n'interrompt pas non plus l'activité de l'utilisateur.

Ce type de notification push automatisée est idéal pour les fenêtres contextuelles de bureau. Cependant, la prise en charge de Toast par WPF n'est pas abondante.

#### **Astuce pour les notifications Toast :**

La solution pour ce scénario est de créer votre propre interface utilisateur de notification de bureau Toast afin que l'application WPF puisse inclure des notifications. Une notification de ce type peut être **déclenchée à tout moment** à l'aide d'un événement C# conventionnel dans le code du ViewModel.

![](https://images.ctfassets.net/3prze68gbwl1/5xBfgEWMPTg4WpQKODQXXq/080ec85b78673760b19f4091be8f608d/pubnub-wpf-notification.png)

L'exemple que nous allons construire ensemble est une WPFapp avec une notification C#.

Il y aura **une fenêtre parentale** avec un seul bouton. Un clic sur le bouton déclenchera une [publication](https://www.pubnub.com/docs/sdks/c-sharp/) PubNub de **données JSON** sur le réseau. L'application **s'abonnera** également à PubNub en utilisant le **même canal et les mêmes clés API** que le code de publication ( [clés PubNubAPI](https://dashboard.pubnub.com/signup) gratuites).

Le code d'abonnement à PubNub déclenchera l'**événement C#** qui crée la notification push popup sur le bureau, chaque fois qu'un nouveau message est publié. La latence des messages PubNub est **généralement** de **80 à 100 millisecondes**, quelle que soit la distance entre l'éditeur et l'abonné.

![](https://images.ctfassets.net/3prze68gbwl1/3867ZSWtcQs2csl35ZvUzr/5b32af712a7a3656089dd5d837f4ad74/pubnub-desktop-notification.png)

PubNub dispose de plus de **70** [**SDK**](https://www.pubnub.com/docs/sdks) **clients** , de sorte que n'importe quel appareil compatible avec Internet peut être interchangé dans ce diagramme.

WPFTutorial Notification Tutorial Project With C# and MVVM
----------------------------------------------------------

Nous allons construire notre propre application de notification en C# pour démontrer la puissance de la messagerie PubNub et une solution pour les notifications de bureau WPF. Voici la structure du fichier du projet MVVM :

![](https://images.ctfassets.net/3prze68gbwl1/FfGomoqHd2m9ZGyqYvFQS/dcd2e6ffe9856e1842f7b227573db292/wpf-pubnub-project.png)

_Tout le code référencé dans ce tutoriel est_ **_disponible en open source sur_** [**_GitHub_**](https://github.com/ajb413/wpf-pubnub-desktop-notifications)_._

Afin de_faire fonctionner l'application, vous devez obtenir vos_ [**_clés PubNubAPI_**](https://dashboard.pubnub.com/signup)**_gratuites à vie_**_._

Assurez-vous d'**ajouter vos clés Publish et Subscribe** au code source !

**Construire une notification de bureau en commençant par MVVM**
----------------------------------------------------------------

1\. Si vous partez de zéro, ouvrez Visual**Studio**[(gratuit](https://visualstudio.microsoft.com/vs/community/)) et créez une nouvelle application **WPFweb**. **Cliquez sur Fichier -> Nouveau -> Projet**.

![](https://images.ctfassets.net/3prze68gbwl1/Cy9BHqBZ6O23j8ntXQ5xG/cd1c8e30743790662c6639dcf7d44116/wpf-new-project-1.png)

2\. Cliquez avec le bouton droit de la souris sur le nouveau fichier de projet dans l'**explorateur de solutions** et cliquez sur **Manage NuGet Packages**. Nous devons **installer PubNub** pour continuer.

![](https://images.ctfassets.net/3prze68gbwl1/33PqCdHI6MLEgUWfIqjKec/eb638d0eb4b331ea3efd210d13eaed9c/install-pubnub-sdk-csharp.png)

3\. Créez les dossiers à la **racine du projet** comme indiqué dans la **capture d'écran** précédente. Ces dossiers sont **Model, View et ViewModel**. Dans le dossier View, créer 2 nouvelles fenêtres XAML, la **fenêtre principale** et la **fenêtre de notification**.

**Poursuite de la construction de la notification avec XAML**
-------------------------------------------------------------

Voici le XAML pour les deux fichiers de vue que vous avez créés. Il s'agit de l **'interface utilisateur de** la fenêtre principale et de la fenêtre de notification.

MainWindow.xaml

<Window x:Class="WPF\_PubNub.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:WPF\_PubNub.VM" xmlns:local="clr-namespace:WPF\_PubNub" mc:Ignorable="d"        
  
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" Title="{Binding WindowName}" Height="300" Width="400"> <Window.DataContext> <vm:PubNubVM /> </Window.DataContext> <i:Interaction.Triggers> <i:EventTrigger EventName="Loaded"> <ei:CallMethodAction TargetObject="{Binding}" MethodName="MainWindowLoaded"/> </i:EventTrigger> </i:Interaction.Triggers> <!--Loaded="{Binding OnWindowLoaded}"--> <Grid > <StackPanel Name="stackPanel2" Grid.Column="1" Grid.Row="0" Background="White" > <Border CornerRadius="5" BorderBrush="Gray" BorderThickness="2" HorizontalAlignment="Center" > <Button Width="{Binding ButtonWidth}" 
                Height="{ButtonHeight}" Content="{ButtonContent}" Background="#FFF3F0F0"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:CallMethodAction TargetObject="{Binding}" MethodName="PublishMessage"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Border> </StackPanel> </Grid> </Window>

**NotificationWindow.xaml**

<Window x:Class="Toast.NotificationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" WindowStyle="None" 
        Height="116.783" Width="319.93" Background="#FF110505" > <Grid> <Grid RenderTransformOrigin="0,1" > <!-- Animation --> <Grid.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/> <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> <SplineDoubleKeyFrame KeyTime="0:0 :4" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Grid.Triggers> <Grid.RenderTransform> <ScaleTransform ScaleY="1" /> </Grid.RenderTransform> < !-- Zone de notification --> <Border BorderThickness="1" Margin="0,0,0,10" Background="#FF17161F" BorderBrush="Black" CornerRadius="10"> <StackPanel Margin="20,9"> <TextBlock TextWrapping="Wrap" Margin="21,5,23,5" x :Name="NotifText" Foreground="White" Background="Black" Height="75"/> </StackPanel> </Border> <Image HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="42" Source="iconMail.JPG" Margin="0,16,0,0"/> </Grid> <Button BorderThickness="0" HorizontalAlignment="Left" Margin="270,0,0,0" Click="Button\_Click\_Close" VerticalAlignment="Top" Background="{x:Null}" Width="42" Height="43"> <Image Source="CloseBtn.JPG" Height="39" Width="28" /> </Button> </Grid> </Window>

### Exemple de code C# pour la fenêtre de notification

Voici le code **C#** de la [fenêtre de notification](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/View/NotificationWindow.xaml.cs). Tout le code est spécifique à l'interface utilisateur. Il est censé ressembler à la notification "Toast".

using System ; using System.Windows ; using System.Windows.Threading ; namespace Toast { /// <summary> /// Logique d'interaction pour NotificationWindow.xaml /// </summary> public partial class NotificationWindow : Window { public NotificationWindow() { InitializeComponent() ; Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() => { var workingArea = System.Windows.Forms.Screen.PrimaryScreen.WorkingArea ; var transform = PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice ; var corner = transform.Transform(new Point(workingArea.Right, workingArea.Bottom)) ; Left = corner.X - ActualWidth ; Top = corner.Y - ActualHeight ; })) ; } //Fermer la fenêtre de notification private void Button\_Click\_Close(object sender, RoutedEventArgs e) { Close() ; } } }

**Dernière étape de la construction de votre notification C#, WPF et MVVM**
---------------------------------------------------------------------------

1.  Dans le dossier ViewModel, créez une classe **PubNubVM.cs**, qui servira de facilitateur entre le **code du modèle** et le **code de la vue**. Le code de ce fichier se [trouve ici](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/ViewModel/PubNubVM.cs).
    
2.  Dans le dossier Model, créez une classe **PubNubHelper.cs** pour interagir avec l'API PubNub publish/subscribe. Veillez à **saisir vos propres** [**clés PubNubAPI**](https://dashboard.pubnub.com/signup) **dans le code d'initialisation de PubNub**.
    
3.  Vous pouvez voir les clés "\_\_YOUR\_PUBNUB\_PUBLISH\_KEY\_HERE\_\_" et "\_\_YOUR\_PUBNUB\_SUBSCRIBE\_KEY\_HERE\_\_" dans le fichier. Remplacez ces chaînes par vos clés.
    

using Newtonsoft.Json ; using PubnubApi ; using System ; using System.Windows ; using Toast ; namespace WPF\_PubNub.Model { public class PubNubHelper { Pubnub pubnub ; private readonly string ChannelName = "win-notification" ;
        public void Init() { //Init PNConfiguration pnConfiguration = new PNConfiguration { PublishKey = "\_\_YOUR\_PUBNUB\_PUBLISH\_KEY\_HERE\_\_", SubscribeKey = "\_\_YOUR\_PUBNUB\_SUBSCRIBE\_KEY\_HERE\_\_", Secure = true } ; pubnub = new Pubnub(pnConfiguration) ; //Subscribe pubnub.Subscribe<string>() .Channels(new string\[\] { ChannelName }) .WithPresence() .Execute() ; } //Publier un message public void Publish() { JsonMsg Person = new JsonMsg { Name = "John Doe", Description = "Description", Date = DateTime.Now.ToString() } ; //Convertir en string arrayMessage = JsonConvert.SerializeObject(Person) ; pubnub.Publish() .Channel(ChannelName) .Message(arrayMessage) .Async(new PNPublishResultExt((result, status) => {})) ; } //écouter le canal public void Listen() { SubscribeCallbackExt listenerSubscribeCallack = new SubscribeCallbackExt( (pubnubObj, message) => { //Appeler les fenêtres de notification depuis le thread de l'interface utilisateur Application.Current.Dispatcher.Invoke(new Action(() => { //Afficher le message comme un message de fenêtre WPF comme le toast WIN-10 NotificationWindow ts = new NotificationWindow() ; //Convertir le message en JSON JsonMsg bsObj = JsonConvert.DeserializeObject<JsonMsg>(message.Message.ToString()) ; string messageBoxText = "Name : " + bsObj.Name + Environment.NewLine + "Description : " + bsObj.Description + Environment.NewLine + "Date : " + bsObj.Date ; ts.NotifText.Text = messageBoxText ; ts.Show() ; })) ; }, (pubnubObj, presence) => { // gérer les données de présence entrantes }, (pubnubObj, status) => { // l'objet status renvoyé est toujours lié à subscribe mais peut contenir // des informations sur subscribe, heartbeat, ou des erreurs // utiliser le PNOperationType pour activer différentes options }) ; pubnub.AddListener(listenerSubscribeCallack) ; } } }

**Astuce : Dans le dossier Model, vous aurez également besoin de la classe JsonMsg.cs, qui** peut être[**trouvée ici**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/Model/JsonMsg.cs)**.** **Assurez-vous d'ajouter tous les paquets NuGet qui sont référencés dans le** [**fichier de projet WPF**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/WPF_PubNub.csproj)**.** **Il y a également quelques fichiers d'images JPG pour le** [**dossier View**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/tree/master/WPF_PubNub/View)**. Ces images apparaissent dans la fenêtre de notification personnalisée. Veillez à les ajouter au dossier View du projet.**

4\. Exécutez le projet ! Cliquez sur le bouton "Déclencher la fenêtre de notification". Vous remarquerez qu'une notification personnalisée apparaît dans le coin inférieur droit de votre bureau ! Cette notification est alimentée par PubNub, donc si vous avez cette application fonctionnant sur plusieurs machines, la notification apparaîtra sur chaque machine, pour chaque clic de bouton individuel.

![](https://images.ctfassets.net/3prze68gbwl1/6uxw74cdFfaWHFIVIeT1a/ab14d1b074bda88a5d335a8069df95bc/pubnub-wpf-window.png)

En utilisant d'autres [PubNubSDKs](https://www.pubnub.com/docs/sdks) et appareils clients, le système de notification est agnostique en termes de langue et d'appareil.

### **Démarrer avec les notifications Toast de bureau**

Ce modèle de notification de bureau peut être modifié pour des notifications push personnalisées destinées à améliorer l'expérience de l'utilisateur. Pour ce faire, il est possible d'utiliser plusieurs canaux, ainsi que le [gestionnaire d'accès](https://www.pubnub.com/docs/security/access-control), afin de sécuriser les personnes autorisées à lire/écrire sur des canaux spécifiques.

Pour plus d'exemples de code C#, contactez [devrel@pubnub.com](mailto:devrel@pubnub.com) ou consultez notre [documentation](https://www.pubnub.com/docs) et nos [ressources pour développeurs](https://www.pubnub.com/developers/) afin d'accélérer le développement de votre application !

Comment PubNub peut-il vous aider ?
===================================

Cet article a été publié à l'origine sur [PubNub.com](https://pubnub.com/blog/c-sharp-desktop-notifications-wpf-mvvm/)

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub
----------------

Découvrez le [Live Tour](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/signup/) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs) vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre [SDK](https://www.pubnub.com/docs).