Toast Notifications with C#, WPF & MVVM

Have you noticed, desktop notifications have become a necessary feature in realtime, 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-stack software 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 MVVM design 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 languages needed for toast notifications

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.

What is WPF?

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.

What is 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.

What are the components of WPFApps?

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.

C# Desktop Notifications

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

Talk to an Expert

Let's connect to discuss your real-time project.

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 automated push notification is ideal for desktop popups. However, the support for Toast with WPF is not abundant.

Toast notification pro tip:

The workaround for this scenario is to build your own toast 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.

The example we are going to build together is a WPFapp with C# notification.

There will be one parent window with a single button. Clicking the button will trigger a PubNub publish 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 has more than 70 client SDKs so any internet-capable device can be interchanged into this diagram.

WPFTutorial Notification Tutorial Project With C# and MVVM

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

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!

Building a desktop notification starting with MVVM

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

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

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.

Continuing the notification build with XAML

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

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>
            <!-- 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"/>
                </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# notification window code example

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()
        {
            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;
            }));
        }
 
        //Close the notification window
        private void Button_Click_Close(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}

Last step to building your C#, WPF, and MVVM notification

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.
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.
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()
        {
            //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();
        }
        //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);
            pubnub.Publish()
                .Channel(ChannelName)
                .Message(arrayMessage)
                .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;
                    ts.Show();
                }));
            },
            (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
            });
 
            pubnub.AddListener(listenerSubscribeCallack);
        }
    }
}

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.

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 Access Manager, to secure who can read/write to specific channels.

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