Click here to Skip to main content
14,266,079 members

How to Build a Simple Toast Notification in #UWP Apps? (Part 1)

Rate this:
5.00 (1 vote)
Please Sign up or sign in to vote.
5.00 (1 vote)
21 Jan 2016CPOL
How to build a simple Toast Notification in #UWP apps? (Part 1)

Blog Reference: Building a simple Toast Notification with text (Part 1)


If you are a developer and building apps or games for Windows 10, targeting 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.

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 a very rare case when you need to show a complex toast notifications and retrieve some inputs from user. In most of the cases, we just need to show 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 creates 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 is 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury «IN»
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
QuestionToast notification for incoming calls for UWP desktop apps hosted in windows store Pin
rjax8728-Apr-19 23:11
memberrjax8728-Apr-19 23:11 
SuggestionFormat issues.. Pin
Afzaal Ahmad Zeeshan21-Jan-16 3:00
mveAfzaal Ahmad Zeeshan21-Jan-16 3:00 
AnswerRe: Format issues.. Pin
Kunal Chowdhury «IN»21-Jan-16 5:50
mentorKunal Chowdhury «IN»21-Jan-16 5:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 21 Jan 2016

Stats

21.5K views
2 bookmarked