Toast Notification For Windows Phone 8.1

As we know a Toast Notification is a pop-up message that appears in the top area of the screen and remains in the Notification list until you clear it manually or programmatically. Toast Notification can be scheduled to appear at a specific time. It is used to communicate with the user at that specified time. Toast Notifications can appear when the user is doing something in another app or in the current app or while playing a game or on the Start Screen or lock screen.

NOTE: Before starting with Toast Notifications, for more details check the Toast Notification overview.

So here a simple procedure is available for Toast Notification for Windows Phone 8.1

In this DEMO app you can add 3 types of text for Toast Notification using a simple button click event. Basically when we click on a Toast Notification we navigate to a specific page of the app, so you will able to add a different page navigation using this DEMO.

1. Create a new WP8.1 project and go to Solution Explorer then select Package.appxmanifest [1] to enable Toast Notification capability [2].

2. Go to MainPage.xaml and add 4 Buttons and a button click event.

<Button Name="b1" Click="b1_Click" Height="94" Content="Simple Toast" Margin="107,74,0,472" Width="211"/>
<Button Name="b2" Click="b2_Click" Height="94" Content="Heading Toast" Margin="107,189,0,357" Width="211"/>
<Button Name="b3" Click="b3_Click" Height="94" Content="Detail Toast" Margin="107,307,0,239" Width="211"/>
<Button Name="b4" Click="b4_Click" Height="94" Content="New Page" Margin="107,466,0,80" Width="211"/>

3. Go to MainPage.xaml.cs and add the required namespaces for Toast Notification [1].

using Windows.UI.Notifications; //New namespace
using Windows.Data.Xml.Dom;

4. Write code for the button click event in the MainPage.xaml.cs file [2,3].

Simple Text Toast Notification:
1. private void b1_Click(object sender, RoutedEventArgs e)
2. {
3. XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
5. XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text"); //Text Notification
7. IXmlNode toastNode = toastXml.SelectSingleNode("/toast"); //Create toast node so you can add separete audio and duration
9. ((XmlElement)toastNode).SetAttribute("duration", "long"); //Toast Duration short or long [optional]
11. ToastNotification toast = new ToastNotification(toastXml); //create object of toast notificaion
13. toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600); //Auto remove Notificaiton [Optional]
15. ToastNotificationManager.CreateToastNotifier().Show(toast); //Show toast notification.
16. }
Heading Text Toast Notification:
1. private void b2_Click(object sender, RoutedEventArgs e)
2. {
3. XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
5. XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text"); //Text Notification
6. toastTextElements[0].AppendChild(toastXml.CreateTextNode("WOW Heading")); //Heading text of Notification
8. IXmlNode toastNode = toastXml.SelectSingleNode("/toast"); //Create toast node so you can add separete audio and duration
10. ((XmlElement)toastNode).SetAttribute("duration", "long"); //Toast Duration short or long [optional]
12. ToastNotification toast = new ToastNotification(toastXml); //create object of toast notificaion
14. toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600); //Auto remove Notificaiton [Optional]
16. ToastNotificationManager.CreateToastNotifier().Show(toast); //Show toast notification.
17. }
Heading with Body Text Toast Notification:
1. private void b3_Click(object sender, RoutedEventArgs e)
2. {
3. XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
5. XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text"); //Text Notification
7. toastTextElements[0].AppendChild(toastXml.CreateTextNode("WOW Heading")); //Heading text of Notification
9. toastTextElements[1].AppendChild(toastXml.CreateTextNode("WOW Toast Body")); //Body text of Notification
11. IXmlNode toastNode = toastXml.SelectSingleNode("/toast"); //Create toast node so you can add separete audio and duration
13. ((XmlElement)toastNode).SetAttribute("duration", "long"); //Toast Duration short or long [optional]
15. ToastNotification toast = new ToastNotification(toastXml); //create object of toast notificaion
17. toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600); //Auto remove Notificaiton [Optional]
19. ToastNotificationManager.CreateToastNotifier().Show(toast); //Show toast notification.
20. }
You can add an image Toast Notification too, for more details go to the Quickstart: Sending a Toast Notification.
Second Page Navigation: This button click event [3] is for navigation to a sub page. We need this to add sub page navigation using Toast Notification.
1. private void b4_Click(object sender, RoutedEventArgs e) //Navigation code for second page navigation
2. {
3. this.Frame.Navigate(typeof(BlankPage1));
4. }

5. Add a new blank page for testing subpage navigation using Toast Notification.

Right-click the project in Solution Explorer then select Add >> New Item >> Blank Page.

6. Add one button to the new page.

<Button Click="b1_Click" Height="94" Content="Second Page Toast" Margin="95,224,0,322" Width="211"/>

7. Write same code for subpage Toast Notification. It automatically adds the current page, in other words subpage navigation. No need to do extra coding for this.

using Windows.UI.Notifications; //New namespace
using Windows.Data.Xml.Dom;
ToastTemplateType toastTemplate = ToastTemplateType.ToastText02;
private void b1_Click(object sender, RoutedEventArgs e)
{
XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
toastTextElements[0].AppendChild(toastXml.CreateTextNode("Toast From Second Page"));
toastTextElements[1].AppendChild(toastXml.CreateTextNode("Click to Navigate"));
IXmlNode toastNode = toastXml.SelectSingleNode("/toast");
((XmlElement)toastNode).SetAttribute("duration", "long");
ToastNotification toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

8. Test your app and see the output.

Download Source code from here.

4 Comments

Join the conversation! Your thoughts help the community grow.

Syed Jawad Gilani11y ago
Good One ,
Kinjan Bhavsar11y ago
How to show toast notifications when we receive push notifications from our server and the app is in background.
WP Dev11y ago
How can we direct Toast notification to specific page.
Vithal Wadje11y ago
always new learning from your article ,keep it up