Post
Ask Question

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.

notification temp

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].

Toast Notification capability

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

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

3. Go to MainPage.xaml.cs and add the required namespaces for Toast Notification [1]. 
  1. using Windows.UI.Notifications; //New namespace   
  2. using Windows.Data.Xml.Dom;   
4. Write code for the button click event in the MainPage.xaml.cs file [2,3]. 
  1. Simple Text Toast Notification:
    1. private void b1_Click(object sender, RoutedEventArgs e)    
    2. {    
    3.      XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);    
    4.     
    5.      XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");          //Text Notification    
    6.               
    7.      IXmlNode toastNode = toastXml.SelectSingleNode("/toast"); //Create toast node so you can add separete audio and duration    
    8.     
    9.      ((XmlElement)toastNode).SetAttribute("duration", "long");     //Toast Duration short or long [optional]    
    10.             
    11.      ToastNotification toast = new ToastNotification(toastXml);                      //create object of toast notificaion     
    12.     
    13.      toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600);                  //Auto remove Notificaiton [Optional]    
    14.     
    15.      ToastNotificationManager.CreateToastNotifier().Show(toast);                     //Show toast notification.    
    16. }   
  2. Heading Text Toast Notification:
    1. private void b2_Click(object sender, RoutedEventArgs e)    
    2. {    
    3.        XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);    
    4.     
    5.        XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");          //Text Notification    
    6.        toastTextElements[0].AppendChild(toastXml.CreateTextNode("WOW Heading"));       //Heading text of Notification    
    7.                
    8.        IXmlNode toastNode = toastXml.SelectSingleNode("/toast"); //Create toast node so you can add separete audio and duration    
    9.   
    10.        ((XmlElement)toastNode).SetAttribute("duration", "long");   //Toast Duration short or long [optional]    
    11.              
    12.        ToastNotification toast = new ToastNotification(toastXml);                      //create object of toast notificaion     
    13.   
    14.        toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600);                  //Auto remove Notificaiton [Optional]    
    15.     
    16.        ToastNotificationManager.CreateToastNotifier().Show(toast);                     //Show toast notification.    
    17. }  
  3. Heading with Body Text Toast Notification:
    1. private void b3_Click(object sender, RoutedEventArgs e)    
    2. {    
    3.       XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);    
    4.     
    5.       XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");          //Text Notification    
    6.     
    7.       toastTextElements[0].AppendChild(toastXml.CreateTextNode("WOW Heading"));       //Heading text of Notification    
    8.     
    9.       toastTextElements[1].AppendChild(toastXml.CreateTextNode("WOW Toast Body"));    //Body text of Notification    
    10.     
    11.       IXmlNode toastNode = toastXml.SelectSingleNode("/toast");  //Create toast node so you can add separete audio and duration    
    12.     
    13.       ((XmlElement)toastNode).SetAttribute("duration", "long");        //Toast Duration short or long [optional]    
    14.               
    15.       ToastNotification toast = new ToastNotification(toastXml);   //create object of toast notificaion     
    16.     
    17.       toast.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(3600);        //Auto remove Notificaiton [Optional]    
    18.     
    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.

  4. 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. }  
Add new blank page

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.

add new item

blank page

6. Add one button to the new page.
  1. <Button Click="b1_Click" Height="94" Content="Second Page Toast" Margin="95,224,0,322" Width="211"/>   
button click

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.
  1. using Windows.UI.Notifications;     //New namespace    
  2. using Windows.Data.Xml.Dom;      
  3. ToastTemplateType toastTemplate = ToastTemplateType.ToastText02;    
  4. private void b1_Click(object sender, RoutedEventArgs e)    
  5. {    
  6.      XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);    
  7.     
  8.      XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");    
  9.      toastTextElements[0].AppendChild(toastXml.CreateTextNode("Toast From Second Page"));    
  10.      toastTextElements[1].AppendChild(toastXml.CreateTextNode("Click to Navigate"));    
  11.     
  12.      IXmlNode toastNode = toastXml.SelectSingleNode("/toast");    
  13.      ((XmlElement)toastNode).SetAttribute("duration", "long");    
  14.     
  15.      ToastNotification toast = new ToastNotification(toastXml);    
  16.      ToastNotificationManager.CreateToastNotifier().Show(toast);    
  17. }   
cs code

8. Test your app and see the output.

app and Output

Download Source code from here.


Similar Articles