Floating FB popout byF5debug

Toast Notification in Windows Store App – Day 15

 

image

In this article we are going to see how to use the Toast Notification while developing your Windows Store application. In our previous article we have seen what are tiles and badges and how to send notification to the tiles for Live user interactions. Toast Notifications are basically text or image with text notifications that appear in the upper right corner of the screen to communicate to the end user about an important message from your application when the user is in other application or on the start screen or on the desktop. Toast notification can be of a simple text, a combination of text and an image with a background sound to indicate the end user there is a notification that is waiting from an application.      [more]

These notification can appear whether you are in the same app, or another app, or the start screen, or the lock screen or even on the desktop. Practically these notifications will be triggered automatically only when our app is not the active application in the foreground. The notification data can be either from the local storage or from the cloud. Toast notification can be activated, dismissed or even cancelled by tapping the notification event that will be raised at the upper right corner of the screen. Toast notifications are of two types as

Standard Toast – This is the most frequent used template where the notification will be shown for 7 seconds and play a background sound. This toast is really helpful to show when we develop some IM based chat application.

Long-duration Toast – This is also same like the standard toast but this will be shown for a max of 25 seconds and can play background sound for longer time and make it recurring. This toast is helpful for cases to have IM calls where the app caller is waiting for the end users interaction.

Microsoft has a predefined set of checklist that can be considered while developing your application with Toast Notification as an additional option. Also to understand the templates that are available to showcase the notification refer to the Catalog which has the examples on when to use the template as per the requirement. Let us see the step by step process on how to develop a Windows Store application that will be using the Toast Notification to show some information on users click events. Developing a Toast Notification events are bit difficult, Microsoft has a predefined set of libraries called NotificationExtensions that are really required on developing a notification app. With this library we get to have the option to work with less code by passing the appropriate parameters, so download and add the library to your application.

Let us create a project and see how to use the Toast Notification in the Windows Store application and later we will see how we can use the different templates that are available to showcase the different formats. Open Visual Studio 2012 IDE in administrator mode and create a new Windows Store application with C# and XAML with a valid project name as shown in the screen below.

image


Clicking on OK will create the project with the default files and folders, add some button which we will use to trigger the notification as being in the same application the Toast Notification need to manually triggered to showcase in this article. As we already discussed download and add the project NotificationExtensions which we will be using as the primary source library in this project. This library as suggested is from Microsoft and it has the predefined set of methods and properties that can be used without any hassle as shown in the screen below.

image


Let us add the code on the button click event which creates a basic Toast Notification with the sample text and without any images with the predefined templates. First add the namespace using Windows.UI.Notifications that will be used to manage the notification events that are required in the project. Also refer the NotificationExtensions project by referring from the main project and add the reference using NotificationsExtensions.ToastContent; to the project. In the code below we have used the Template CreateToastText01 which is a simple toast with text and implemented IToastNotificationContent interface which is referenced to the NotificationExtensions library.

C# Code:

[code:c#]

private void Button_Clcik(object sender, RoutedEventArgs e)
       {
           IToastNotificationContent toastContent = null;

           IToastText01 templateContent = ToastContentFactory.CreateToastText01();
           templateContent.TextBodyWrap.Text = "F5debug Sample Toast Notification, this is a lengthly description!!!";
           toastContent = templateContent;

           ToastNotification toast = toastContent.CreateNotification();

           ToastNotifier notifier = ToastNotificationManager.CreateToastNotifier();
           notifier.Show(toast);
       }

[/code]

Now build and execute the application and we can see the Notification triggered on the button click event of the application as shown in the screen below. Click on multiple times to get multiple notifications.

image


Now let us add some images and text to the Notification, this way the notification will have an image along with the text that will be showing the information to the end user. To use this format we need to use a different template like CreateToastImageAndText01 which showcase the image and text and it has different templates which you can see in the catalog to show multiple lines and messages. So to add it lets add one more button and write the below code in the button click event of that button as shown in the code below.

C# Code:

[code:c#]

private void Button_Clcik1(object sender, RoutedEventArgs e)
        {
            IToastNotificationContent toastContent = null;

            IToastImageAndText01 templateContent = ToastContentFactory.CreateToastImageAndText01();
            templateContent.TextBodyWrap.Text = "F5debug Sample Toast Notification with Image, Message from Admin!!!";
            templateContent.Image.Src = "Toastimage.png";
            templateContent.Image.Alt = "Message";
            toastContent = templateContent;

            ToastNotification toast = toastContent.CreateNotification();

            ToastNotifier notifier = ToastNotificationManager.CreateToastNotifier();
            notifier.Show(toast);
        }

[/code]

Here we have used a template which is CreateToastImageAndText01 which takes a string input and also a Image input, so we have added an image of size 184x184 pixel and in the image src property we have assigned to it and the Alt property is the alternate text property where we have specified an optional value. So now we are done with the code, build and execute the application and we can see the expected output.

C# Complete Code:

[code:c#]

using NotificationsExtensions.ToastContent;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Data.Xml.Dom;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ToastNotificationSample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void Button_Clcik(object sender, RoutedEventArgs e)
        {
            IToastNotificationContent toastContent = null;

            IToastText01 templateContent = ToastContentFactory.CreateToastText01();
            templateContent.TextBodyWrap.Text = "F5debug Sample Toast Notification, this is a lengthly description!!!";
            toastContent = templateContent;

            ToastNotification toast = toastContent.CreateNotification();

            ToastNotifier notifier = ToastNotificationManager.CreateToastNotifier();
            notifier.Show(toast);
        }

        private void Button_Clcik1(object sender, RoutedEventArgs e)
        {
            IToastNotificationContent toastContent = null;

            IToastImageAndText01 templateContent = ToastContentFactory.CreateToastImageAndText01();
            templateContent.TextBodyWrap.Text = "F5debug Sample Toast Notification with Image, Message from Admin!!!";
            templateContent.Image.Src = "Toastimage.png";
            templateContent.Image.Alt = "Message";
            toastContent = templateContent;

            ToastNotification toast = toastContent.CreateNotification();

            ToastNotifier notifier = ToastNotificationManager.CreateToastNotifier();
            notifier.Show(toast);
        }
    }
}

[/code]

image

image


Conclusion:

In this article we have seen how to use the Toast Notification to effectively utilize while developing your Windows store application, also we have seen the different templates and catalog that will be used based on the requirement on which type of notification that can be sent from the application.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter