Windows 8 demo-Toast notifications

I have had requests to share the Windows 8 demos that I gave at the Windows 8 Developer camp. The source code for this blog post is available on Github at https://github.com/DavidBurela/Win8Demo-Notifications

Toast notifications allow your application to prompt your users when something has happened in your application that may not be currently viewable on the screen. An example being an auction application. The user flags to watch an item. The user than navigates away and looks at other items. Later the application can show a toast notification warning the user that there is only 5 minutes of bidding remaining.

IMPORTANT

Ensure that go into your application manifest and set Toast Enabled to Yes. If you are submitting a ToastNofication to the ToastNotificationManager and see no error messages, but toasts are failing to show. Then you have probably not enabled toasts in your application.

Simple text toast notification

Notification toasts in your application can be created by sending a formatted XML message to the ToastNotificationManager. The easiest way to achieve this is to get a base template for the notification style that you want (Text only, Image, Image and Text, etc) then modifying the Text or Image elements of the XML template. The code below shows how a XML template can be taken and updated with custom text. The XML document is then used to create a ToastNotification which is then sent to the ToastNotificationManager.

/// <summary>
/// Raises a text toast notification locally.
/// IMPORTANT: if copying this into your own application, ensure that “Toast capable” is enabled in the application manifest
/// </summary>private void NotificationTextButton_Click(object sender, RoutedEventArgs e)
{
// Toasts use a predefined set of standard templates to display their content.
// The updates happen by sending a XML fragment to the Toast Notification Manager.
// To make things easier, we will get the template for a toast iwth text as a base, and modify it from there
var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);

// Find the ‘text’ element in the template’s XML, and insert the text “A sample toast” into it.
var elements = toastXml.GetElementsByTagName(“text”);
elements[0].AppendChild(toastXml.CreateTextNode(“A sample toast”));

// Create a ToastNotification from our XML, and send it to the Toast Notification Manager
var toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

image

Toast notification with a local image and text

Images can be shown in the toast notification easily by create a Image element in the XML document. The templates can be used again as a base to start with, but this example will construct the XML document from scratch by creating a ToastImageAndTest01 toast. The image and text elements are created, finally the XML document is chained together. The XML is used to create a ToastNotification which is passed to the ToastNotificationManager

private void NotificationImageButton_Click(object sender, RoutedEventArgs e)
{
// It is possible to start from an existing template and modify what is needed.
// Alternatively you can construct the XML from scratch.
var toastXml = new XmlDocument();
var title = toastXml.CreateElement(“toast”);
var visual = toastXml.CreateElement(“visual”);
visual.SetAttribute(“version”, “1”);
visual.SetAttribute(“lang”, “en-US”);

// The template is set to be a ToastImageAndText01. This tells the toast notification manager what to expect next.
var binding = toastXml.CreateElement(“binding”);
binding.SetAttribute(“template”, “ToastImageAndText01″);

// An image element is then created under the ToastImageAndText01 XML node. The path to the image is specified
var image = toastXml.CreateElement(“image”);
image.SetAttribute(“id”, “1”);
image.SetAttribute(“src”, @”Assets/DemoImage.png”);

// A text element is created under the ToastImageAndText01 XML node.
var text = toastXml.CreateElement(“text”);
text.SetAttribute(“id”, “1”);
text.InnerText = “Another sample toast. This time with an image”;

// All the XML elements are chained up together.
title.AppendChild(visual);
visual.AppendChild(binding);
binding.AppendChild(image);
binding.AppendChild(text);

toastXml.AppendChild(title);

// Create a ToastNotification from our XML, and send it to the Toast Notification Manager
var toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

image

More toasts

Images from remote web servers can be used. This can be done easily by specifying a remote URI instead of the local path within the application.

To get the XML required for other templates, download the official SDK sample, run the application, click the type of notification you would like, and take note of the outputted XML on the screen http://code.msdn.microsoft.com/windowsapps/Toast-notifications-sample-52eeba29

By David Burela

About these ads

8 Responses to “Windows 8 demo-Toast notifications”

  1. Windows 8 demo-Toast notifications Says:

    […] Read original post by David Burela at Burela's house-o-blog […]

  2. Windows 8 Developer Links – 2012-05-10 | Dan Rigby Says:

    […] a program manager on our core system team, authored this post.”Metro App DevelopmentWindows 8 demo-Toast notifications (David Burela)“I have had requests to share the Windows 8 demos that I gave at the Windows 8 […]

  3. Saurabh Sharma Says:

    Any method to do it with VB?
    i am trying it from 2 days and still unable to make it happen. please share the way if you know

    • David Burela Says:

      My first guess would be that you haven’t done this bit:
      IMPORTANT: if copying this into your own application, ensure that “Toast capable” is enabled in the application manifest

      • Saurabh Sharma Says:

        Its Already Enabled, and i am new to Toast notifications i haven’t done anything which required toast notifications. but its the very 1st time i am working with Toast Notifications and my project is in VB so i need help with the implementation using VB

  4. Marc Doyle Says:

    Thanks for the extremely useful code! I was trying to figure out how to modify the xml template in vb.net but couldn’t find an example that worked as the setattribute command isn’t in vb for getelementbytag etc but converting your code worked perfectly :)

    And for Saurabh, although it’s a little late, here is the code converted to vb.net:

    Dim toastXml = New XmlDocument()
    Dim title = toastXml.CreateElement(“toast”)
    Dim visual = toastXml.CreateElement(“visual”)
    visual.SetAttribute(“version”, “1”)
    visual.SetAttribute(“lang”, “en-US”)

    ‘ The template is set to be a ToastImageAndText01. This tells the toast notification manager what to expect next.
    Dim binding = toastXml.CreateElement(“binding”)
    binding.SetAttribute(“template”, “ToastImageAndText01″)

    ‘An image element is then created under the ToastImageAndText01 XML node. The path to the image is specified
    Dim image = toastXml.CreateElement(“image”)
    image.SetAttribute(“id”, “1”)
    image.SetAttribute(“src”, “Assets/logo.png) ‘ change this to any path your app can access – you may need to add a non-asset file to the futureaccess list to be able to use it.

    ‘ A text element is created under the ToastImageAndText01 XML node.
    Dim text = toastXml.CreateElement(“text”)
    text.SetAttribute(“id”, “1”)
    text.InnerText = “Another sample toast. This time with an image”

    ‘ All the XML elements are chained up together.
    title.AppendChild(visual)
    visual.AppendChild(binding)
    binding.AppendChild(image)
    binding.AppendChild(text)

    toastXml.AppendChild(title)

    ‘ Create a ToastNotification from our XML, and send it to the Toast Notification Manager
    Dim toast = New ToastNotification(toastXml)
    ToastNotificationManager.CreateToastNotifier().Show(toast)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: