Toast Notification in Windows 8 XAML Application (Windows Store)


Introduction

Toast Notifications is another feature of Windows 8. Using Toast Notifications, a notification message could be displayed to the user. Normally a Toast Notification is displayed on the top right side.

Enabling Toast Notification

The Toast Notification is not enabled by default, which can be enabled based on the requirement. To enable Toast Notification; you need to enable Toast capable of the application in Application manifest. As you see in the following image.

The value that should enable Toast Notification is “Yes”.

Displaying Toast Notification

To use Toast Notification we need to use “Windows.UI.Notifications”. As you see in the following image.

There are few Toast Templates available, out of which we could select one and display the Toast Notification.

As you see in the following image, we have 8 types of Toast Templates, this is grouped into two categories such as:

  1. Toast Text
  2. Toast Image and Text

Text Toast Notifications

Text Toast Notifications are for displaying simple text messages. A sample Text Notification is displayed below. As you see; we have a Text and an Image at the bottom.

The bottom image is one time configurable; as it is taken by “SmallLogo.ong” file from Assets.

So when I change the image to something else. It has changed in the Toast Notification as well.

ToastText01

This is the first Text Toast Template; it displays a single text, which can be wrapped up to three lines. As you see in the below we are getting the xml elements already defined by the templates. And assigning values.

The first Text Toast Template would look like following.

ToastText02

The second Text Toast Template; displays two texts. First Text would be displayed in line 1; however the second text would be displayed in 2nd line and could be wrapped up to 3rd line.

The second Text Toast Template would look like following.

ToastText03

The Third Toast Notification Template; displays two texts; the first one displays the text in bold in the first line and could be wrapped up to 2nd line. However the 2nd text would be at 3rd line.

The third Text Toast Template would look like following.

ToastText04

The fourth Text Notification Template; displays three texts. That’s right each in each line. And each text could be wrapped in its own line.

The fourth Text Toast Template would look like following.

Image and Text Toast Notifications

This is the second type of Toast Notification that could be displayed. As it says; it consists of an image element.

ToastImageAndText01

This is the first Image and Text Toast Notification Template; this is a simple one, where it displays image on the left side of the message and the normal text on the right side. As you see in the below image, the image element could also be found using the tag name “image”.

The following notification is of first Image and Text Toast Notification.

ToastImageAndText02

This is the Second Image and Text Notification Template, the image stays on the left side, where as there are two texts could be displayed in two lines.

The following notification is of second Image and Text Toast Notification.

ToastImageAndText03

This is the Third Image and Text Notification Template; displays image on the left side, however two texts are displayed on the right side. The first one could be wrapped up to 2nd line. And the second text would be on 3rd line.

The following notification is of third Image and Text Toast Notification.

ToastImageAndText04

This is the Fourth Image and Text Notification Template available; the image stays on the left side, and there could be three texts in each line. The texts could be wrapped in its own line.

The following notification is of fourth Image and Text Toast Notification.

Maximum Toasts

Well, you could have any number of notifications, but only three could be displayed at once. Each notification has it’s own time to display and after that it would be faded away.

Hope this article helps; thanks for reading.

Source Code: Click Here

Try out my Codeplex Projects: