Toast-Benachrichtigungen mit C#, WPF &amp; MVVM
Published: 2023-12-01 12:07:43

Haben Sie schon bemerkt, dass [Desktop-Benachrichtigungen](https://www.pubnub.com/use-case/alerts-and-push-notifications/) in [ereignisgesteuerten](https://www.pubnub.com/guides/event-driven-architecture/) Echtzeitanwendungen zu einem notwendigen Merkmal geworden sind? Webdienste müssen Benutzer über Back-End-Signale oder Nachrichten von anderen Benutzern benachrichtigen, sobald diese auftreten.

Wenn Sie ein Software-Ingenieur oder ein Full-Stack-Software-Entwickler sind, der eine Windows-Desktop-Anwendung mit **C#** und **WPF**, **Windows Forms** oder **UWP** erstellen möchte, führt Sie dieser Leitfaden durch den Aufbau des **Front-End- und Back-End-Codes** für Desktop-Push-Benachrichtigungen mit dem **MVVM-Designmuster**.

Die Hauptrolle spielt dabei die[**Echtzeit-Messaging-API**](https://www.pubnub.com/docs/channels/overview) **von PubNub** , die es Clients oder Servern ermöglicht, von überall auf der Welt Echtzeitsignale an eine beliebige Anzahl von Geräten, Webanwendungen und mobilen Anwendungen zu senden.

**Überblick über die für Toast-Benachrichtigungen benötigten Programmiersprachen**
----------------------------------------------------------------------------------

In diesem Tutorial werden wir eine Reihe von Programmier- und Algorithmussprachen verwenden. Zu Beginn werden wir eine kurze Definition dieser Programmiersprachen geben und dann in den Workflow-Prozess eintauchen.

**Was ist WPF?**
----------------

Das Codebeispiel, das wir gemeinsam durchgehen werden, wurde mit [Windows Presentation Foundation](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/introduction-to-wpf-in-vs?view=netframeworkdesktop-4.8) oder WPF geschrieben. In den letzten zehn Jahren war WPF das bevorzugte Subsystem für die Entwicklung von Windows-Desktop-Webanwendungen mit **C# und dem .NET Framework**. Es ähnelt Windows Forms mit seiner Verwendung von [XAML](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/fundamentals/xaml?view=netdesktop-5.0) für die Entwicklung der Benutzeroberfläche und C# [Code Behinds](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/code-behind-and-xaml-in-wpf?view=netframeworkdesktop-4.8) für jede Ansicht.

**Kurzer Tipp:**

In diesem Tutorial werden wir so viel Code wie möglich außerhalb des Code Behinds halten, da wir das MVVM-Muster verwenden werden. Aus diesem Grund wird der Code, der normalerweise in den Code Behind-Klassen erscheinen würde, **stattdessen in die ViewModel-Klassen verschoben**.

**Was ist die MVVM-Architektur?**
---------------------------------

**Model-View-ViewModel** oder MVVM ist ein Entwurfsmuster für die **Trennung** von UI-Entwicklung und Backend-Entwicklung in einer benutzerorientierten Anwendung. Es besteht aus **drei Komponenten**, aus denen sich das Muster zusammensetzt.

### Was sind die Komponenten von WPFApps?

Für WPFapps sind diese Komponenten:

-   Ansichten - [XAML und CodeBehinds](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/code-behind-and-xaml-in-wpf?view=netframeworkdesktop-4.8)
    
-   ViewModels - C#-Code für die Zustandsverwaltung und die Steuerung von Daten, die sich zwischen Model und View bewegen.
    
-   Models - C#-Klassen, Datenspeicherung, Geschäftslogik.
    

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

**C# Desktop-Benachrichtigungen**
---------------------------------

Eine Windows-Desktop-Lösung für betriebssystemspezifische Benachrichtigungen ist die **Toast-Benachrichtigungsklasse**. Toast-Benachrichtigungen sind in die Windows UI-Benachrichtigungsklasse integriert.

### Was ist eine Toast-Benachrichtigung?

Für dieses Beispiel werden wir eine Toast-Benachrichtigung verwenden. Eine Toast-Benachrichtigung ist ein kleines Popup, das so programmiert ist, dass es automatisch erscheint und abläuft. Sie ist in der Regel unaufdringlich und erfordert keine Aktion des Benutzers. Sie unterbricht auch nicht die Benutzeraktivität.

Diese Art der automatischen Push-Benachrichtigung ist ideal für Desktop-Popups. Allerdings ist die Unterstützung für Toast mit WPF nicht sehr umfangreich.

#### **Toast-Benachrichtigung Profi-Tipp:**

Der Workaround für dieses Szenario besteht darin, eine eigene Toast-Desktop-Benachrichtigungs-Benutzeroberfläche zu erstellen, damit die WPF-App Benachrichtigungen enthalten kann. Eine solche Benachrichtigung kann jederzeit mit einem herkömmlichen C#-Ereignis im ViewModel-Code **ausgelöst** werden.

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

Das Beispiel, das wir zusammen bauen werden, ist eine WPFapp mit C#-Benachrichtigung.

Es wird **ein übergeordnetes Fenster** mit einer einzelnen Schaltfläche geben. Ein Klick auf die Schaltfläche löst eine [PubNub-Veröffentlichung](https://www.pubnub.com/docs/sdks/c-sharp/) von **JSON-Daten** an das Netzwerk aus. Die Anwendung wird auch PubNub **abonnieren**, indem sie **denselben Kanal und dieselben API-Schlüssel** wie der Veröffentlichungscode verwendet (freie [PubNubAPI-Schlüssel](https://dashboard.pubnub.com/signup)).

Der PubNub-Abonnement-Code löst das **C#-Ereignis** aus, das die Popup-Push-Benachrichtigung auf dem Desktop erzeugt, sobald eine neue Nachricht veröffentlicht wird. Die Latenzzeit für PubNub-Nachrichten beträgt **im Allgemeinen 80 bis 100 Millisekunden**, unabhängig von der Entfernung zwischen Publisher und Subscriber.

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

PubNub verfügt über mehr als **70** [**Client-SDKs**](https://www.pubnub.com/docs/sdks), so dass jedes internetfähige Gerät in dieses Diagramm eingefügt werden kann.

WPFTutorial Benachrichtigungs-Tutorial-Projekt mit C# und MVVM
--------------------------------------------------------------

Wir werden unsere eigene C#-Benachrichtigungs-App erstellen, um die Leistungsfähigkeit von PubNub Messaging und eine Lösung für WPF-Desktop-Benachrichtigungen zu demonstrieren. Hier ist die Dateistruktur des MVVM-Projekts:

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

Der_gesamte Code, auf den in diesem Tutorial verwiesen wird_ , ist als**_Open Source auf_** [**_GitHub_**](https://github.com/ajb413/wpf-pubnub-desktop-notifications)**_verfügbar_** _._

Um_die App zum Laufen zu bringen, müssen Sie Ihre_ **_kostenlosen_**[**_PubNubAPI-Schlüssel_**](https://dashboard.pubnub.com/signup)**_für immer_**_erhalten_ _._

Stellen Sie sicher, dass Sie **Ihre Publish- und Subscribe-Schlüssel** zum Quellcode **hinzufügen**!

**Aufbau einer Desktop-Benachrichtigung beginnend mit MVVM**
------------------------------------------------------------

1\. Wenn Sie bei Null anfangen, öffnen Sie Visual**Studio**[(kostenlos](https://visualstudio.microsoft.com/vs/community/)) und erstellen Sie eine neue **WPFweb-Anwendung**. **Klicken Sie auf Datei -> Neu -> Projekt**.

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

2\. Klicken Sie mit der rechten Maustaste auf die neue Projektdatei im **Projektmappen-Explorer** und klicken Sie auf **Manage NuGet Packages**. Wir müssen **PubNub installieren**, um fortzufahren.

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

3\. Erstellen Sie die Ordner im **Stammverzeichnis des Projekts**, wie im **Screenshot** von vorhin gezeigt. Diese Ordner sind **Model, View und ViewModel**. Erstellen Sie im Ordner View 2 neue XAML-Fenster, das **Hauptfenster** und das **Benachrichtigungsfenster**.

**Fortsetzen der Erstellung der Benachrichtigung mit XAML**
-----------------------------------------------------------

Hier ist die XAML für die 2 View-Dateien, die Sie erstellt haben. Dies wird **die Benutzeroberfläche** unseres Haupt- und Benachrichtigungsfensters **bilden**.

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="{Binding ButtonHeight}" Content="{Binding 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> <!-- Benachrichtigungsbereich --> <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>

### C# Codebeispiel für ein Benachrichtigungsfenster

Hier ist der **C# Code Behind** Code für das [Benachrichtigungsfenster](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/View/NotificationWindow.xaml.cs). Der gesamte Code ist UI-spezifisch. Er soll der "Toast"-Benachrichtigung ähneln.

using System; using System.Windows; using System.Windows.Threading; namespace Toast { /// <summary> /// Interaktionslogik für 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; })); } //Schließen des Benachrichtigungsfensters private void Button\_Click\_Close(object sender, RoutedEventArgs e) { Close(); } } }

**Letzter Schritt zur Erstellung Ihrer C#-, WPF- und MVVM-Benachrichtigung**
----------------------------------------------------------------------------

1.  Erstellen Sie im ViewModel-Ordner eine Klasse **PubNubVM.cs**, die als Vermittler zwischen dem **Model-Code** und dem **View-Code** fungiert. Der Code für diese Datei [kann hier gefunden werden](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/ViewModel/PubNubVM.cs).
    
2.  Erstellen Sie im Ordner Model eine Klasse **PubNubHelper.cs**, die mit der PubNub publish/subscribe API interagiert. **Achten Sie darauf, dass Sie Ihre eigenen freien** [**PubNubAPI-Schlüssel**](https://dashboard.pubnub.com/signup) **in den PubNub-Initialisierungscode** **eingeben** .
    
3.  Sie können die "\_\_YOUR\_PUBNUB\_PUBLISH\_KEY\_HERE\_\_" und "\_\_YOUR\_PUBNUB\_SUBSCRIBE\_KEY\_HERE\_\_" in der Datei sehen. Ersetzen Sie diese String-Literale durch Ihre Schlüssel.
    

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(); } //Publizieren einer Nachricht public void Publish() { JsonMsg Person = new JsonMsg { Name = "John Doe", Description = "Beschreibung", Date = DateTime.Now.ToString() }; //Konvertierung in String string arrayMessage = JsonConvert.SerializeObject(Person); pubnub.Publish() .Channel(ChannelName) .Message(arrayMessage) .Async(new PNPublishResultExt((result, status) => {})); } //auf den Kanal hören public void Listen() { SubscribeCallbackExt listenerSubscribeCallack = new SubscribeCallbackExt( (pubnubObj, message) => { //Aufruf der Benachrichtigungsfenster vom UI-Thread Application.Current.Dispatcher.Invoke(new Action(() => { //Die Nachricht als WPF-Fenstermeldung anzeigen wie WIN-10 toast NotificationWindow ts = new NotificationWindow(); //Die Nachricht in JSON konvertieren JsonMsg bsObj = JsonConvert.DeserializeObject<JsonMsg>(message.Message.ToString()); string messageBoxText = "Name: " + bsObj.Name + Environment.NewLine + "Beschreibung: " + bsObj.Description + Environment.NewLine + "Date: " + bsObj.Date; ts.NotifText.Text = messageBoxText; ts.Show(); })); }, (pubnubObj, presence) => { // eingehende Präsenzdaten behandeln }, (pubnubObj, status) => { // das zurückgegebene Statusobjekt bezieht sich immer auf subscribe, kann aber // Informationen über subscribe, heartbeat oder Fehler enthalten // verwenden Sie den PNOperationType, um verschiedene Optionen einzuschalten }); pubnub.AddListener(listenerSubscribeCallack); } } }

**Pro-Tipp: Im Model-Ordner benötigen Sie auch die Klasse JsonMsg.cs, die** Sie[**hier finden**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/Model/JsonMsg.cs)**.** Stellen Sie **sicher, dass Sie alle NuGet-Pakete hinzufügen, auf die in der** [**WPF-Projektdatei**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/blob/master/WPF_PubNub/WPF_PubNub.csproj) **verwiesen wird** **.** **Außerdem gibt es einige JPG-Bilddateien für** den[**Ordner View**](https://github.com/ajb413/wpf-pubnub-desktop-notifications/tree/master/WPF_PubNub/View)**. Diese Bilder werden in dem benutzerdefinierten Benachrichtigungsfenster angezeigt. Achten Sie darauf, dass Sie sie zum Projektordner View hinzufügen.**

4\. Starten Sie das Projekt! Klicken Sie auf die Schaltfläche "Benachrichtigungsfenster auslösen". Sie werden feststellen, dass eine benutzerdefinierte Benachrichtigung in der unteren rechten Ecke Ihres Desktops erscheint! Diese Benachrichtigung wird von PubNub unterstützt. Wenn Sie also diese Anwendung auf mehreren Rechnern laufen lassen, wird die Benachrichtigung auf jedem Rechner für jeden einzelnen Button-Klick erscheinen.

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

Durch die Verwendung anderer [PubNubSDKs](https://www.pubnub.com/docs/sdks) und Client-Geräte ist das Benachrichtigungssystem sprach- und geräteunabhängig.

### **Erste Schritte mit Desktop-Toast-Benachrichtigungen**

Dieses Desktop-Benachrichtigungsmuster kann für benutzerdefinierte Push-Benachrichtigungen modifiziert werden, um das Benutzererlebnis zu verbessern. Dies kann durch die Verwendung mehrerer Kanäle und auch mit [Access Manager](https://www.pubnub.com/docs/security/access-control) erreicht werden, um sicherzustellen, wer bestimmte Kanäle lesen/schreiben kann.

Für weitere C#-Code-Beispiele wenden Sie sich bitte an [devrel@pubnub.com](mailto:devrel@pubnub.com) oder schauen Sie sich unsere [Dokumente](https://www.pubnub.com/docs) und [Entwickler-Ressourcen](https://www.pubnub.com/developers/) an, um Ihre App-Entwicklung zu beschleunigen!

Wie kann PubNub Ihnen helfen?
=============================

Dieser Artikel wurde ursprünglich auf [PubNub.com](https://pubnub.com/blog/c-sharp-desktop-notifications-wpf-mvvm/) veröffentlicht.

Unsere Plattform hilft Entwicklern bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben
--------------

Sehen Sie sich die [Live Tour](https://www.pubnub.com/tour/introduction/) an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten
----------

Melden Sie sich für einen [PubNub-Account](https://admin.pubnub.com/signup/) an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie
------------

Mit den [PubNub-Dokumenten](https://www.pubnub.com/docs) können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder [SDK](https://www.pubnub.com/docs)