Adding Toast Messages to WPF Apps

As part of my job, I maintain a c# WPF app that we run on developers desktops.  This app does things in the background for a while and if you have the app open then you get some feedback on where it is up to. But if you don’t have it open in front of you then you get nothing, so I went and added a toast notification and Taskbar Progress

Starting with the simple part, Taskbar Progress. When you download a file in Chrome or copy files from one folder to another, you see a little green progress bar on the icon.

For my app, when it is open in front of you, you can see the progress. It gives you a rough percentage of what is done. How can I show this on the toolbar? Well it turns out it’s rather simple.

In my model, I need 2 properties. The first is a percentage that says how much has been processed. I already had a property for this called StepsProcessed. The second property is the state that my app is in. This property needs to return System.Windows.Shell.TaskbarItemProgressState.  Normally the Progress State is “None”.

When my app starts processing, I set ProgressState = Indeterminate. This causes the icon on the taskbar to pulse, showing that it is doing work but no indication of how much work is done.

Once I am able to calculate how much work needs doing, I set ProgressState = Normal. This causes it to set a progress bar based on my percentage of work done.

Finally, when the work is complete, I set the status back to None to remove the progress bar.

In the xaml of the window, I simply add:

<Window.TaskbarItemInfo>
	<TaskbarItemInfo ProgressValue="{Binding StepsProcessed}" ProgressState="{Binding ProgressState}" />
</Window.TaskbarItemInfo>

Done! Now when the application is running, a progress bar appears over the icon on the taskbar.

The second task was to add a little toast icon to the Windows Action Center – the little icon that appears near the clock. For example: Image from StackOverflow

I wanted to add one of these when the process started and when the processed finished. Again, this turned out to be pretty simple, although it took a lot more work to actually get it to happen.

private void GenerateToast(string title, string message, string imagePath)
{
	var template = ToastTemplateType.ToastImageAndText02;
	var toastXML = ToastNotificationManager.GetTemplateContent(template);
 
	var images = toastXML.GetElementsByTagName("image");
        var imagePath = "file://" + imagePath;
	images[0].Attributes[1].NodeValue = imagePath;
 
	var textNodes = toastXML.GetElementsByTagName("text");
	
	textNodes[0].AppendChild(toastXML.CreateTextNode(title));
	textNodes[1].AppendChild(toastXML.CreateTextNode(message));
 
 
 
	ToastNotificationManager.CreateToastNotifier("Application Name").Show(new Windows.UI.Notifications.ToastNotification(toastXML));
}

This method will accept the title, the message and a path to an image to use for the icon. Call the method, pass in all of the fields and a toast message pops up in the action center.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.