Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Introducing InteractiveToastExtensions for Universal Windows Apps

One of the new ways users can interact with your app is through notifications. Now, notifications are nothing new, for either Phone or Desktop, however, what’s been added to 10 is new. With Universal Windows Apps, you can now have interactive toast notifications. So what are these? They are like regular toast notifications only they can have elements that the user can interact with, maybe make a selection, or type in a response to something.

There’s an excellent blog post on MSDN that covers all the different types of interactions you can have within your app’s toasts, along with all the xml elements that are required in order to build your toast notification, but that does mean dealing with xml, and who likes that?!

The Solution

As always, I like to make things easy, and not having to deal with xml is high up on my list. So I’ve done the grunt work and created this little helper library that will more easily allow you to create your notifications.

So let’s look at a sample. I’m going to use one of the examples given in the aforementioned blog post so that there’s an easy point of reference for comparison.

This is the XML from the blog post:

    <binding template="ToastGeneric">
      <text>Spicy Heaven</text>
      <text>When do you plan to come in tomorrow?</text>
      <image placement="appLogoOverride" src="A.png" />
    <input id="time" type="selection" defaultInput="2" >
  <selection id="1" content="Breakfast" />
  <selection id="2" content="Lunch" />
  <selection id="3" content="Dinner" />
    <action activationType="background" content="Reserve" arguments="reserve" />
    <action activationType="background" content="Call Restaurant" arguments="call" />

And this is the same notification created using the helper library:

var toast = new InteractiveToast();
var visual = new Visual();
visual.AddText(new Text("Spicy Heaven"));
visual.AddText(new Text("When do you plan to come in tomorrow?"));
visual.AddImage(new VisualImage("ms-appx:///Assets/Deadpool.png")
    ImagePlacement = ImagePlacement.AppLogoOverride


var input = new ToastInput("time", ToastInputType.Selection)
    DefaultInput = "2"
input.AddSelection("1", "Breakfast");
input.AddSelection("2", "Lunch");
input.AddSelection("3", "Dinner");


toast.AddActionItem(new ToastAction("Reserve", "reserve")
    ActivationType = ActivationType.Foreground
toast.AddActionItem(new ToastAction("Call Restaurant", "call")
    ActivationType = ActivationType.Foreground

var notification = toast.GetNotification();


As you can see, certainly a lot friendlier. So what does that notification then look like?

On Desktop:

On Phone:

And there we have it.




2 responses to “Introducing InteractiveToastExtensions for Universal Windows Apps

  1. Jon Stødle (@jonstodle) July 6, 2015 at 08:34

    This is awesome. Was not looking forward to that xml work. Thank you, good sir.

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: