Display local toast notification in Windows Universal App

Do you want to develop a universal app for Windows Phone 8.1 and Windows 8.1 which contains a local “Notification” as the picture above ?

I’m going to show you how to display all messages to the user (error, information, warnings) in a kind of toast control. Everything is done locally without going through the standard notification system.

 

Introduction :

Before universal apps, several solutions could display local notifications as :

• TOASTINET (http://www.nuget.org/packages/ToastinetWP/)
• CONDING4FUN toast prompt (https://coding4fun.codeplex.com/wikipage?title=Toast%20Prompt&referringTitle=Documentation)

But those solutions was only made for Windows Phone Silverlight apps and it’s not possible to add these librairies on Windows phone 8.1 WinRT project.

But universal applications make available a tool : ToastNotification !

 

Display local toast notifications :

Following the MSDN documentation, it’s possible to display a local notification that appears when your app is running.

ToastTemplateType toastTemplateXml = ToastTemplateType.ToastImageAndText01;
XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplateXml);

You’ll then need to populate the XML returned by GetTemplateContent:

<toast>
    <visual>
        <binding template="ToastImageAndText01">
            <image id="img" src=""/>
            <text id="txt"></text>
        </binding>
    </visual>
</toast>

But, how to do it ?
By getting elements by tag name and supply the content of your toast in the XML DOM.
Don’t worry, here is an example :

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
((XmlElement)toastImageAttributes[0]).SetAttribute("src", "ms-appx:///Images/myImg.png");

You can then create the toast notification based on the XML content you’ve specified :

ToastNotification toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);

 

The secret method :

To help you, I created a small method to generate local notification with a text passed as parameter :

private void ShowToastNotification(String message)
{
    ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;
    XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);

    // Set Text
    XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
    toastTextElements[0].AppendChild(toastXml.CreateTextNode(message));

    // Set image
    // Images must be less than 200 KB in size and smaller than 1024 x 1024 pixels.
    XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
    ((XmlElement)toastImageAttributes[0]).SetAttribute("src", "ms-appx:///Images/myImg.png");
    ((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "logo");

    // toast duration
    IXmlNode toastNode = toastXml.SelectSingleNode("/toast");
    ((XmlElement)toastNode).SetAttribute("duration", "short");

    // toast navigation
    var toastNavigationUriString = "#/MainPage.xaml?param1=12345";
    var toastElement = ((XmlElement)toastXml.SelectSingleNode("/toast"));
    toastElement.SetAttribute("launch", toastNavigationUriString);

    // Create the toast notification based on the XML content you've specified.
    ToastNotification toast = new ToastNotification(toastXml);

    // Send your toast notification.
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

You can change several things on this method :

• Default image by setting the source : “ms-appx:///Images/myImg.png”
  • note : Windows Phone 8.1 does not display the image, instead replacing it with the app’s logo.
• Toast duration : There are two values: “short” (the default) and “long”.
• Toast navigation : to define url page to open chen user click on notification

And don’t forget to edit “Package.appxmanifest” and activate notifications. The capability to raise toast notifications is declared in your app’s package.appxmanifest file.
If you use the Microsoft Visual Studio manifest editor, simply set the Toast capable option to “Yes” in the Notification section of the Application tab.

You can find more informations in MSDN documentation : https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868254.aspx