Universal Windows 10 Apps – Toast Notifications

Universal Windows 10 Apps – Toast Notifications

Win10Toast1

Short introduction

Nowadays mobile applications with great user experience and nice graphic layout is not enough. Users should have reason to get back to your application. How to keep their attention? Notifications are something that you really need. Inform user about new update or display information about new message – all of that can be done with Toast Notifications.

Let’s see how you can create such notification in the app and define different styles for it.

Please also note that the whole source code for this article is available on my Git Hub.

What do I need to start?

1) Visual Studio 2015 Community (for free) or higher

Let’s start

1) Open Visual Studio and create new blank Universal App project:

Win10Toast2

2) Add new folder to the project and give it a name “ToastTemplates”:

Win10Toast3

Win10Toast4

3) Now it’s time to add some templates for Toast Notifications:

Below I will try to describe each template and after that we will add them in the Visual Studio.

1. Reach Visual Content Notification

With this type of notification you are able not only to change the default app icon but also add image to the notification and show additional text with header.

Win10Toast4Rich_Visual_Content

2. Notification with action (sample 1):

With this type of notification you are able to display text information with two optional buttons to either confirm or dismiss operations – buttons can also have visual assets (like check and dismiss icons).

Win10Toast4ToastWithActionSample1

3. Notification with action (sample 2):

You can also display simple notification with two buttons and text. With this template you can for instance open the map or a list in the application.

Win10Toast4ToastWithActionSample2_2

4. Notification with text input and actions:

You can also customize the notification to enable user to prepare fast reaction. For example to answer immediately when message is received.

Win10Toast4ToastWithTextInputAndActions

5. Reminder notification:

In this case there is a large image added to fill the width of the notification. You are also able to add text and action buttons.

Win10Toast4ToastReminderNotification

4) How does it look in the Visual Studio?

1. To add Toast Notification template to your project “right” click on the “ToastTemplates” folder and select “add new item” ->choose xml file and type the name of the template like below:

Win10Toast5

2. Notification template looks like below:

Win10Toast6

3. To show notification you have to use ToastNotificationManager class and type the correct path to your XML Toast template:

Win10Toast7

Sum up

Now you know how to create different templates for the notifications in the Universal Windows 10 Application. In the next article I will try to explain how to handle activations from the Toast Notification in the app.

You can also read more about Toast Notifications under this link.

Advertisements