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:

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

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
});

toast.SetVisual(visual);

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

toast.AddActionItem(input);

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

var notification = toast.GetNotification();

ToastNotificationManager.CreateToastNotifier().Show(notification);

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

On Desktop:
DesktopNotification

On Phone:
PhoneNotification

And there we have it.

Nuget: https://www.nuget.org/packages/InteractiveToastExtensions/
Source: https://github.com/ScottIsAFool/InteractiveToastExtensions

SL

Advertisements

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:

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

%d bloggers like this: