#UWP Tips: Building a simple Toast Notification with text (Part 1)


If you are a developer and building apps or games for Windows 10, targetting Universal Windows Platform (aka. UWP), you might want to show toast notifications to the user of your app/game. You might also want to provide some additional content like textbox, button etc. to get specific inputs.

 

As part of this tutorial series, we are going to learn how to show custom toast notifications. Today let’s begin with building simple toast notification with text. Stay tuned to learn complex notifications in next blog posts.

 

#UWP Tips: Building a simple Toast Notification with text (www.kunal-chowdhury.com)

 

Day by day uses of smart devices are increasing, as well as the use of notifications, be it notification about birthday reminder, facebook post or comment, retweets on twitter, mail or sms. Simply we can say that, people have adopted getting notifications on everything they are very fond of or useful in day-2-day life.

 

Second best Mobile Article of January 2016 from CodeProject.com

 

If you are building apps/games, you must want to keep your user always up-to-date and/or interactive with your application. It’s very rare case when you need to show a complex toast notifications and retrieve some inputs from user. Most of the cases we just need to show a simple one or two liner text messages to keep them informed about some topics.

 

Hence, start with very basic and create our first simple toast notification. Before starting, you need to structurize your content that you want to display to your user. For this, you need to create the template. A very basic toast notification template consists of visual bindings with one or two lines text strings.

 

Here you can find a simple toast notification template (xmlToastTemplate) that we used to create the demo for this blog post and I hope that, it will be self explanatory:

 

// template to load for showing Toast Notification
var xmlToastTemplate = "<toast launch=\"app-defined-string\">" + 
                         "<visual>" +
                           "<binding template =\"ToastGeneric\">" +
                             "<text>Sample Notification</text>" +
                             "<text>" +
                               "This is a sample toast notification from kunal-chowdhury.com" +
                             "</text>" +
                           "</binding>" +
                         "</visual>" +
                       "</toast>";
 
// load the template as XML document
var xmlDocument = new XmlDocument();
xmlDocument.LoadXml(xmlToastTemplate);
 
// create the toast notification and show to user
var toastNotification = new ToastNotification(xmlDocument);
var notification = ToastNotificationManager.CreateToastNotifier();
notification.Show(toastNotification);

 

Once you have structurized your content and created the template, you need to load it as an XML document. inside your UWP app. Use LoadXml method of the Windows.Data.Xml.Dom.XmlDocument object to load the XML template into memory and pass it to the ToastNotification object.

 

Then call the Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier() method to get the handle and call the Show method on top of it, passing the toastNotification object. This when called, will show the toaster to the user and if not attempted, will reside in the Windows Notification Center.

 

Here you can see how our demo code create the Toast Notification inside a Windows 10 Mobile (Screenshot #1) and how it looks in the notification center if not attempted by the user (Screenshot #2). If there’s a bigger content, user can expand it to see the entire content. But it is always advisable to keep the content within a default range so that, it should not overlap the entire UI.

 

Windows 10 Universal App - Toast Notification (www.kunal-chowdhury.com)    Windows 10 Universal App - Toast Notifications in Notification Center (www.kunal-chowdhury.com)

 

I hope that, the post was simple and easy to understand, if you are a beginner with building Universal Windows apps. The demo that shown above works on any UWP app as it shares the same SDK and platform code.

 

It was definitely a simple one with one or two text as content. In the next post, we will go a little bit deeper and discuss building a little complex toast notification message with buttons inside it. Till that time, happy coding and read my other posts related to building apps for Universal Windows Platform.

 

Don’t just stop here. If you are available on Twitter, Facebook, Google+ and not yet connected with me, do so now and get all the updates/posts that I share over those social networking sites. You can also subscribe to my blog’s RSS feed and Email newsletter to get the immediate notification of new posts.

 


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

2 comments

  1. This is useful when we have certain action on that notification. But what if we just need to display a message for say 3 seconds and auto-dismiss the view. Like Toasts in android.

    ReplyDelete
    Replies
    1. Add: toastNotification.ExpirationTime = DateTime.Now.AddSeconds(5); // dissmiss after 5 seconds

      Delete


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top