IN THIS ARTICLE
Desktop notifications have become a necessary feature in realtime, event-driven applications. Programs need to alert users of back-end signals, or messages from other users, as they happen. If you’re developing 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 notifications with the MVVM design pattern.
The star player here is PubNub’s realtime messaging API, which allows clients, or servers, to fire realtime signals to one or many devices, anywhere in the world.
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 applications 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.
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 WPF apps, 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.
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. However the support for Toast with WPF is not abundant.
The workaround for this scenario is to build your own desktop notification user interface so the WPF app can include notifications. A notification like this can be triggered at any time using a conventional C# event in the ViewModel code.
The sample we are going to build together is a WPF app with C#. 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 PubNub API keys).
The PubNub subscribe code will trigger the C# event that creates the popup 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. Check out the PubNub docs.
WPF Tutorial Project
We are going to build our own C# application 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 on GitHub.
In order to get the app running, you need to get your forever free PubNub API keys.
Be sure to add your Publish and Subscribe keys to the source code!
If you’re starting from scratch, open Visual Studio (free), and create a new WPF application. Click File -> New -> Project.
Right Click on the new project file in the Solution Explorer and click Manage NuGet Packages. We have to install PubNub to continue.
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.
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> 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();
}
}
} PubNub
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 PubNub API 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);
}
}
} 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.
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 PubNub SDKs and client devices, the notification system is language/device agnostic.
This desktop notification pattern can be modified for custom notifications intended for individuals. It can be achieved by using multiple channels, and also with PubNub Access Manager, to secure who can read/write to PubNub channels. For issues or more C# code examples, reach out to devrel@pubnub.com. We want to hear your feedback!
Try PubNub today!
