Desktop Toast Notifications with C#, WPF & MVVM

6 min read Michael Carroll on Sep 27, 2022
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

This guide will walk you through building the front-end and back-end code for desktop notifications with the MVVM design pattern.

Have you noticed, desktop notifications have become a necessary feature in real time, event-driven apps. Web services need to alert users of back-end signals, or messages from other users, as they happen.

If you’re a software engineer or full-stacksoftware developer looking to build a Windows Desktop application using C# and WPF, Windows Forms, or UWP, this guide will walk you through building the front-end and back-end code for desktop push notifications with the MVVMdesign pattern.

The star player here is PubNub’s real-time messaging API, which allows clients or servers to fire real-time signals to any number of devices, web apps, and mobile apps, from anywhere in the world.

Overview of programming language

For this tutorial, we'll be using a variety of coding and algorithm languages. To start, we’ll give a brief definition of those programmer languages and then we’ll dive into the workflow process.


The code example that we are going to run through together is written using Windows Presentation Foundation or WPF. For the past decade, WPF has been a best-choice subsystem for developing Windows Desktop web apps with C# and the .NET Framework. It resembles Windows Forms with its employment of XAML for user interface development and C# Code Behinds for every view.

Quick Tip:

In this tutorial, we are going to keep as much code as we can outside of the Code Behind because we will be using the MVVM pattern. For this reason, code that would normally appear in the Code Behind classes will instead go in ViewModel classes.

MVVM Architecture

Model-View-ViewModel or MVVM is a design pattern for separation of UI development and back-end development in a user-facing application. There are three components that make up the pattern. For WPFapps, these components are:

  • Views – XAML and CodeBehinds

  • ViewModels – C# code for state management and controlling data that moves between Model and View.

  • Models – C# classes, Data Storage, Business logic.

MVVM Model-View-ViewModel Pattern Diagram

Desktop Notifications with C# Events

A Windows Desktop solution for OS aware notifications is the Toast Notification class. Toast notifications are integrated into the Windows UI Notification class.

What is a Toast notification?

For this example, we’ll be using a Toast notification. A Toast notification is a small popup that is programmed to appear and expire automatically. It is usually unobtrusive and doesn’t require any action from the user. It also won’t halt user activity.

This type of automation push notification is ideal for desktop popups. However, the support for Toast with WPF is not abundant.

Pro Tip:

The workaround for this scenario is to build your own desktop notification user interface so the WPFapp can include notifications. A notification like this can be triggered at any time using a conventional C# event in the ViewModel code.

Custom Windows Notification UI

The sample we are going to build together is a WPFapp with C#. There will be one parent window with a single button. Clicking the button will trigger a PubNubpublish of JSON data to the network. The application will also subscribe to PubNub using the same channel and API keys as the publish code (free PubNubAPI keys).

The PubNub subscribe code will trigger the C# event that creates the popup push notification on the Desktop, whenever a new message is published. The latency for PubNub messages is generally 80 to 100 milliseconds, regardless of publisher and subscriber distance.

PubNub Publish Desktop Notification Diagram

PubNub has more than 70 client SDKs so any internet-capable device can be interchanged into this diagram.

WPFTutorial Project

We are going to build our own C# app to demonstrate the power of PubNub messaging and a solution for WPF desktop notifications. Here is the file structure of the MVVM project:

WPF project file structure

All of the code referenced in this tutorial is available open source on GitHub.

In order to get the app running, you need to get your forever free PubNubAPI keys.

Be sure to add your Publish and Subscribe keys to the source code!

First Step | MVVM Process

1. If you’re starting from scratch, openVisual Studio (free), and create a new WPFweb application. Click File -> New -> Project.

New Project in Visual Studio

2. Right Click on the new project file in the Solution Explorer and click Manage NuGet Packages. We have to install PubNub to continue.

Install PubNub for C# with Visual Studio

3. Create the folders in the root of the project like referenced in the screenshot from earlier. These folders are Model, View, and ViewModel. In the View folder, create 2 new XAML windows, the Main Window and the Notification Window.

Next Step | XAML

Here is the XAML for the 2 view files that you created. This will make the UI of our parent and notification windows.


<Window x:Class="WPF_PubNub.MainWindow"
        xmlns:local="clr-namespace:WPF_PubNub"  mc:Ignorable="d"        
        Title="{Binding WindowName}" Height="300" Width="400">
        <vm:PubNubVM />
        <i:EventTrigger EventName="Loaded">
            <ei:CallMethodAction TargetObject="{Binding}" MethodName="MainWindowLoaded"/>
    <!--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:EventTrigger EventName="Click">
                            <ei:CallMethodAction TargetObject="{Binding}" MethodName="PublishMessage"/>


<Window x:Class="Toast.NotificationWindow"
        mc:Ignorable="d"  WindowStyle="None" 
        Height="116.783" Width="319.93" Background="#FF110505" >
        <Grid RenderTransformOrigin="0,1" >
            <!-- Animation -->
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                <SplineDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                <ScaleTransform ScaleY="1" />
            <!-- Notification area -->
            <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"/>
            <Image HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="42" Source="iconMail.JPG" Margin="0,16,0,0"/>
        <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" />

Here is the C# Code Behind code for the notification window. All of the code is UI specific. It is meant to resemble the “Toast” notification.

using System;
using System.Windows;
using System.Windows.Threading;
namespace Toast
    /// <summary>
    /// Interaction logic for NotificationWindow.xaml
    /// </summary>
    public partial class NotificationWindow : Window
        public NotificationWindow()
            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;
        //Close the notification window
        private void Button_Click_Close(object sender, RoutedEventArgs e)

Final Step | PubNubAPI

  1. In the ViewModel folder create a PubNubVM.cs, class which will be the facilitator between the Model code and View code. The code for that file can be found here.

  2. In the Model folder, create a PubNubHelper.cs class to interact with the PubNub publish/subscribe API. Be sure to input your own free PubNubAPI keys in the PubNub initialization code.

  3. You can see the “__YOUR_PUBNUB_PUBLISH_KEY_HERE__” and “__YOUR_PUBNUB_SUBSCRIBE_KEY_HERE__” in the file. Replace those string literals with your keys.

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()
            PNConfiguration pnConfiguration = new PNConfiguration
                PublishKey = "__YOUR_PUBNUB_PUBLISH_KEY_HERE__",
                SubscribeKey = "__YOUR_PUBNUB_SUBSCRIBE_KEY_HERE__",
                Secure = true
            pubnub = new Pubnub(pnConfiguration);
           .Channels(new string[] {
        //Publish a message
        public void Publish()
            JsonMsg Person = new JsonMsg
                Name = "John Doe",
                Description = "Description",
                Date = DateTime.Now.ToString()
            //Convert to string
            string arrayMessage = JsonConvert.SerializeObject(Person);
                .Async(new PNPublishResultExt((result, status) => {}));
        //listen to the channel
        public void Listen()
            SubscribeCallbackExt listenerSubscribeCallack = new SubscribeCallbackExt(
            (pubnubObj, message) => {
                //Call the notification windows from the UI thread
                Application.Current.Dispatcher.Invoke(new Action(() => { 
                    //Show the message as a WPF window message like WIN-10 toast
                    NotificationWindow ts = new NotificationWindow();
                    //Convert the message to 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;
            (pubnubObj, presence) => {
                // handle incoming presence data
            (pubnubObj, status) => {
                // the status object returned is always related to subscribe but could contain
                // information about subscribe, heartbeat, or errors
                // use the PNOperationType to switch on different options

Pro Tip: In the Model folder, you will also need the JsonMsg.cs class, which can be found here. Be sure to add any NuGet packages that are referenced in the WPF project file. There are also some JPG image files for the View folder. These images appear in the custom-made notification window. Be sure to add them to the project View folder.

4. Run the project! Click the “Trigger Notification Window” button. You will notice a custom notification appear in the lower right-hand corner of your desktop! This is powered by PubNub, so if you have this application running on multiple machines, the notification will appear on every machine, for each individual button click.

PubNub WPF Windows Desktop App

By using other PubNubSDKs and client devices, the notification system is language/device agnostic.

Getting Started with Desktop Toast Notifications

This desktop notification pattern can be modified for custom push notifications intended to improve the user experience. It can be achieved by using multiple channels, and also with PubNub Access Manager, to secure who can read/write to specific channels.

For more C# code examples, reach out to or check out our docs and developer resources to help speed up your app development!

More from PubNub

How to Add a Notification Badge to Icons in React Native
Real-time Chat BlogDec 19, 20226 min read

How to Add a Notification Badge to Icons in React Native

Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...

Michael Carroll

Michael Carroll

Digital Twins and the Future of Real-Time Data
InsightsDec 6, 20224 min read

Digital Twins and the Future of Real-Time Data

The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...

Michael Carroll

Michael Carroll

How Many Text Characters Fit in a 32KB PubNub Message?
Real-time Chat BlogNov 24, 20224 min read

How Many Text Characters Fit in a 32KB PubNub Message?

Learn the ins-and-outs of PubNub message size and get a better idea of how many text characters fit in a single message.

Michael Carroll

Michael Carroll