Click here to Skip to main content
12,998,875 members (31,621 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.2K views
Posted 24 Feb 2016

How to Build a Simple Toast Notification in #UWP Apps? (Part 2, integrating buttons)

, 24 Feb 2016
Rate this:
Please Sign up or sign in to vote.
How to build a simple Toast Notification in #UWP apps? (Part 2)

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


I hope you read my previous post on “Building a Toast Notification with text for apps targeting Universal Windows Platform”. There we learned how to create a very basic toast notification. Continuing the series of posts, today we will learn how to add buttons within the notification.

Let’s begin with building toast notification with text and buttons. Stay tuned to learn creating more complex notifications in next blog posts of this series.

https://www.codeproject.com/KB/WinRT/1080882/header.Png

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 the days are passing by, there is a need to do all the things quickly without launching apps and thus there is a need to inject more contents to the notification. For example, you are building an app that sends a notification to perform some specific operation, can be done directly from the notification message. User will not have to launch the app to perform it.

If you read my previous blog post on creating a simple toast notification, you have already learned how to implement it. Once your basic code block is ready, you can now enhance it to add one or two buttons into that. To do this, you need to add action within the notification template. These are specified under the <actions> element. When you specify <action>, this appears as a button on Desktop and Mobile. A developer can specify up to 5 custom or system actions inside a toast notification.

Below is the code snippet that we are using to demonstrate here. Please have a look into it and proceed next to understand it better.

// template to load for showing Toast Notification
var template = "<toast launch=\'app-defined-string\'>" +
                "<visual>" +
                 "<binding template =\'ToastGeneric\'>" +
                  "<text>Sample Notification</text>" +
                  "<text>" +
                   "Would you like to visit kunal-chowdhury.com?" +
                  "</text>" +
                 "</binding>" +
                "</visual>" +
                "<actions>" +
                 "<action activationType=\'background\' 
                 content=\'yes\' arguments=\'yes\'/>" +
                 "<action activationType=\'background\' 
                 content=\'no\' arguments=\'no\'/>" +
                "</actions>" +
               "</toast>";

// load the template as XML document
var xmlDocument = new XmlDocument();
xmlDocument.LoadXml(template);
 
// create the toast notification and show to user
var toastNotification = new ToastNotification(xmlDocument);
var notification = ToastNotificationManager.CreateToastNotifier();
notification.Show(toastNotification);

The “activationType” specified in action tag can be of foreground, background, protocol or system. This is optional and set as “foreground” by default. If you want to launch a different app, set it to “protocol”. In case it is a system define action, set it as “system”.

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 or has buttons, user can expand it to see the entire content. Once you expand, you will be able to perform actions on the button specified.

https://www.codeproject.com/KB/WinRT/1080882/toast-1.Png          https://www.codeproject.com/KB/WinRT/1080882/toast-2.Png

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 buttons with text as content. In the next post, we will go a little bit deeper and discuss building a little complex toast notification message with text message, input box and 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 have 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 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»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer 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 Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170622.1 | Last Updated 24 Feb 2016
Article Copyright 2016 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid