Toast-Benachrichtigungen mit C#, WPF & MVVM

PubNub Developer Relations - Dec 1 '23 - - Dev Community

Haben Sie schon bemerkt, dass Desktop-Benachrichtigungen in ereignisgesteuerten 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 dieEchtzeit-Messaging-API 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 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 für die Entwicklung der Benutzeroberfläche und C# Code Behinds 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

  • 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.

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.

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 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).

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.

PubNub verfügt über mehr als 70 Client-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:

Der_gesamte Code, auf den in diesem Tutorial verwiesen wird_ , ist als*Open Source auf* GitHubverfügbar .

Um_die App zum Laufen zu bringen, müssen Sie Ihre_ kostenlosenPubNubAPI-Schlüsselfür immererhalten .

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) und erstellen Sie eine neue **WPFweb-Anwendung. **Klicken Sie auf Datei -> Neu -> Projekt*.

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.

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>
Enter fullscreen mode Exit fullscreen mode

NotificationWindow.xaml

Height="116.783" Width="319.93" Background="#FF110505" > <!-- Animation --> <!-- Benachrichtigungsbereich -->

C# Codebeispiel für ein Benachrichtigungsfenster

Hier ist der C# Code Behind Code für das Benachrichtigungsfenster. Der gesamte Code ist UI-spezifisch. Er soll der "Toast"-Benachrichtigung ähneln.

using System; using System.Windows; using System.Windows.Threading; namespace Toast { /// /// Interaktionslogik für NotificationWindow.xaml /// 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.

  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 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() .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(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 Siehier finden. Stellen Sie sicher, dass Sie alle NuGet-Pakete hinzufügen, auf die in der WPF-Projektdatei verwiesen wird . Außerdem gibt es einige JPG-Bilddateien für denOrdner 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.

Durch die Verwendung anderer PubNubSDKs 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 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 oder schauen Sie sich unsere Dokumente und Entwickler-Ressourcen an, um Ihre App-Entwicklung zu beschleunigen!

Wie kann PubNub Ihnen helfen?

Dieser Artikel wurde ursprünglich auf PubNub.com 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 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 an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie

Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .