Join Scott Peterson for an in-depth discussion in this video Working with toasts, part of Developing UWP Apps: 7 Toasts, Tiles, and Push Notifications.
- [Instructor] Okay, we're back, we're in Visual Studio 2017 in our universal Windows platform app tagger, that we've been working on throughout this entire series. And just as a refresher let's take a look at where we're at at the beginning of this, load that up. And so you'll recall thus far through the previous sessions we've added adaptive layout, navigation, we've created basic and advanced controls and we've adapted those controls, we've added face detection, we've added printing, we've added tagging to call cognitive services, we've added text-to-speech.
All kinds of great stuff there. But now we're going to look at the idea of adding Toast notifications into our app. But before we do that, let's just take a look at what a Toast notification really looks like. As a developer it might be helpful to get an idea of what we're looking at when we send a Toast notification. So I'm just going to open up my server explorer and go to my notification hub, and we're not going to be using the notification hub necessarily, but I've got a notification hub tagger, and part of the server explorer experience is the ability to send test notifications.
So, I'm just going to select a Toast notification, and we can just look at what a Toast notification looks like. So this is just plain XML. This is just about as basic as you can get. So if I were to take that Toast notification, we can just paste that in to an XML file and see how simple it really is. We just have a Toast element and inside that a visual element, inside that a binding element, and we give it a template. This one by default is using the old-fashioned Toast Text 01 which is really just for legacy support, we don't even really need that.
Typically what we use now is just like a Toast generic, and then everything else that we put inside will be up to date and will use the adaptive concepts. So if we were to send this message, just take a look at what that would look like. (notification sound) See that we just get this blank test message, nothing really is happening there at all. Let's load up Windows phone emulator as well, because remember, we're working with the universal Windows platform, everything that we're doing is going to work across devices.
So let's load up that phone emulator. And notice we have an experience that makes sense on a mobile device. If we go over to the start screen, we can go ahead and send a Toast now, (notification sound) and notice that we get that same Toast now on our mobile device.
And it's just as boring as you can get. So if we were to drag down the notifications area on our mobile device, you see that we just have those test messages there. So, sending a Toast notification is as simple as sending an XML payload across. Now some people ask why these aren't JSON payloads, and I don't know all of the reasons, but I do know that in general, XML, although it's a little heavier, tends to be a little bit more readable, it's a little bit easier with the element attribute concept. Maybe one day we will see these as JSON, but not necessarily today.
So let's go ahead and take a look at a couple more templates that are a little bit more robust, that are using this concept of adaptation. So if we were to close that, I've created a few templates here, these XML templates, let's take a look at what the XML might look like there. So, here's an example of a comprehensive sort of weather Toast. Notice that we're using a binding template of Toast generic. So if you're using templates that say Text 01, or anything that's a variation of that, those are leftovers from the Windows 8, Windows Phone 8, Windows and Windows Phone 8-1 worlds, and we're really in the UWP world typically going to use this Toast generic, not always.
And then notice that I've just got a text label that says today will be sunny, and now I've got these groups, this is a cool thing that we can do, is set these groups, and show how they're aligned on an actual Toast notification. So you notice that I've got these five or six different groups and we've got, that one is Monday with an image, and Tuesday, Wednesday, Thursday, on and on. Notice also that we're using hint styles that we're going to talk about a little bit later. And hint alignment, that we're also going to talk about a little bit later.
I'm also adding an image to each one of these subgroups, but I'm only referring to that as, for example, mostly cloudy dot png or cloudy dot png, we're not giving that a full URI. The reason that we can do that here is because I'm specifying a base URI, and this is going to essentially say, where does this reside in your application itself. So under images slash toasts, I'll have an image that is mostly cloudy dot png, cloudy dot png. If we didn't have the base URI, we'd have to refer to it like this, MS app X slash slash slash image, Toast, sunny png.
As a note, these can also be remote, and we'll see that a little bit later. So this could be a URL that's, you know, http colon slash slash something remote, or, you know, this can go to a back end service that will generate an image, it doesn't matter. So let's see what it would take to call that, if we were to copy and paste this, into this template. We could just actually test it right from here. Let's see what this might look like. (notification sound) Okay, so see how extremely well formatted this is.
So we have each one of these subgroups is available, we have this nice caption up here. You can see how this really is just a mini-app in itself. And of course we can click on these elements and we can take action on these elements as well. Let's take a look at what that might look like on the phone. If we pull our notifications down, notice that by default since we're on a mobile device I just have that small version of the notification. And then if I pull it down, look how it got all of that great content right in my notification hub. And this is going to be true as well if we're on a laptop or desktop.
See how we've got these great notifications that we can send out. So that's pretty cool, let's take a look at a couple more variations of these. And since it's so simple to create these XML payloads, I just want to kind of wet your whistle on the different types of content that we could have there. So one that I like is just this idea that we can put actions in. So if we take a look at this template, now I'm saying that I want a launch event, and I'm passing a parameter.
So I'm saying action equals, this looks just like a query stream would look in web development. And then I'm saying, in my binding I want to have these three text lines. Surface Watch launch party. So Surface Watch is my hope for the next Microsoft band, would be the Surface Watch, we're going to have that launch party in October, but now I'm adding a series of actions. So first I've got this input action, and this is actually a drop-down combo box. Yes, no, maybe and the labels are going, maybe, decline. And then I have three actions here and these actions are actually buttons.
So I've got three different variations of buttons, one of them is an activation type foreground, one is an activation type background, one is an activation type dismiss. Foreground is going to pull up the app in the foreground, the background will process an event in a background task, so we haven't implemented that yet, we'll do that later on in this series. But in general, we're able to now say hey, when a user clicks this button do this or go here and pass these parameters. So let's take a look at what this might look like.
If we were to test it here. Just copy that, paste that, and we'll say send. (notification sound) So now notice that we've got this Surface Watch launch party, we've got this great drop down going, maybe, decline, and we have more info, RSVP, and dismiss. So dismiss is just going to be a system dismiss so I could just say dismiss and it'll just go away. Let's look at one more that is kind of my favorite one, I love this concept of being able to fake a phone call. You can pretend in this example that Bill Gates is calling us.
Now I demonstrate this, again, so that you can kind of in your brain say, wow, I can put all of this content in a Toast, and it can be actionable, you know, I can interact with these things? And the answer really is yes. So if I just wanted to send something that looks like a phone call coming in, we'll copy and paste that in and I'll say send. (notification sound) And notice how I've got Bill Gates calling me, notice that I've got a ring coming in as well. So I can go ahead and dismiss that. So you can see how that's super powerful to be able to just do that.
Let's take a look at that phone call XML to see how we made those changes. So, in this example, I've got launch parameters that are coming, the scenario is incoming call, and we're going to talk about these special scenarios a little bit later. But the scenario is incoming call, this could be an alarm or reminder or other various special scenarios. I'm just setting the binding, I'm saying that I want it to have an image, and the hint crop is going to be circle. I'm going to pass it that Bill Gates JPEG.
And then I've got these actions that are just going to, now instead of having a label, necessarily, they're going to have an image UI. So that's just going to be message ping, reminder ping, cancel ping, and telephone ping. And we could of course trap those values in the foreground. So I prefer to create XML. I like to just create these XML payloads, because this is what needs to be passed around. When we're creating these and sending these, they're always going to be XML payloads for Toast and Tiles.
This is true even if it's a push notification that sends a Toast. But if you don't want to create this XML, if you'd rather just have some strongly typed object, we can do that as well. But in order to do that easily, we need to add a NuGet package. So say manage NuGet packages and I'll say browse. And if we browse for the Microsoft toolkit UWP notifications package, we can install that package.
And this is going to give us the ability to spin up objects that will create Toast notification XML payloads for us. So if I go in here to helpers, I've got this Toast helper. We'll just scroll down here. And let me bring in this method create generic Toast, and we'll take a look at that. So it says it doesn't understand what we're doing here, wants to add a using to the Microsoft toolkit UWP dot notifications, that's fine, we'll do that.
So now instead of creating XML, now we're actually creating a Toast content object. And we're just setting things that map back to those XML elements and attributes. So, we're spinning up a new visual. Inside that visual, I'm doing a binding generic, which is going to be the same thing as Toast generic when it gets rendered. And I'm going to say I want two children in there, I want text that says sample, text that says this is a simple notification example, I'm going to override the app logo and I'm going to say point to this alarm image.
And I'm going to add a couple of actions here. I'm going to say I want a button that says check and the argument will be check and a button that says cancel, the argument will be cancel, and I'll pass those two images. And then I'm going to create some audio effect. For this one it's going to be using the notification dot reminder. Now there's an enumeration for this, we can send over 10 or 12 different sound events here, if we want to, and that's not a problem at all. So, once we've created this, we could just call this method to create Toast content.
So let's just pull this up in a page and see how this might look. I'm just going to go over here to page two, and we'll just add a button in here. And we'll just say the content is send a Toast. And we'll add a click event here, send Toast click. And we'll go over to that event.
The first thing I'm going to do is I'm going to say, helpers dot Toast, helper dot create generic Toast. And we'll say that's the payload. And then I'm just going to call a method programmatically that I created that is sending the Toast. So Toast helper, send Toast. And watch, notice that if I pass in that payload, it's going to say hey, that payload isn't the right object, that payload is coming back as Toast content, but I can't take Toast content.
That's because we always need to pass the XML. Remember, these Toast, and this is true for Tiles as well, but the Toasts are always XML. So let's put a break point there. And let's go into that send Toast and see how simple this is. So that payload's going to come across and I'm just going to spin up a new Toast notification. And I'm going to pass it that XML payload, and then I'm just going to call the create Toast notifier show method on that notification. So let's just try that, we'll just load that up.
On our desktop. Go to that page two. I'll navigate there and I'll say send a Toast, and let's take a look at that payload that comes back, if I clear that out and say payload, notice how it's coming back as Toast content, but if I say get XML, notice how I'm getting back an XML document. So if you've been doing XML document development for very long, that should look familiar to you, and we could even iterate through this just like we would in any XML document.
So now I'm going to send that over to the send Toast method. It's going to spin up a notification. So now we've got a notification object that gets created and it's got that content, and when we say create Toast notifier show, it's just going to show that notification. (notification sound) And there we go. So see how we have all that content in there, the check box, the cancel button, we've got this little alarm image, we've got sample, this is a sample Toast notification. So extremely simple to send these, but we can also do this on a scheduled basis.
So let's say we wanted to send it 15 seconds, or 15 minutes from now, or on some specific time. Let's go back and change this to send scheduled Toast, and I've just got this method then that will take some number of seconds. So if I say 20 seconds there, we'll go ahead and load that up. We'll say send a Toast, so now it's going to send that payload over. And I'm just doing a date time now add seconds, interval of 20 seconds, and now if we wait a short period of time we're just, (notification sound) there, we're able to see that we're able to schedule that.
So you see how that could work for alarms or any kind of reminders, anything that we want to do where we just want to send some of these scheduled, and this can be far in the future. It doesn't have to be seconds, this could be minutes, hours, days, whatever. And we can even go in and manage these, we can remove these scheduled notifications all we want. So that's pretty cool, but that's not really valuable in our app per se. Let's just pull that up and try and decide what might make sense in our tagger app, what would be helpful in our tagger app.
So one thing that I thought is we had from earlier in this series, when we tagged an image we were able to convert that text to speech, I thought it might be helpful now if we just tagged that image and have it send us a Toast notification instead. So let's go back into that command that we created earlier in this series. And instead of creating text to speech and having audio playback, let's just send a Toast directly here. So, now what I'm going to do is actually get a template, and since I mentioned that I prefer working with XML, I've just got this little helper method that just pulls up a template, so I've got a template that's called caption.
If I go down to templates and we take a look at that caption XML, you'll notice that this is just XML. And I'm just going to pass this content over to it. And so that payload that comes back is going to be an XML document, and then it's going to pass the payload to it. So effectively what this will do is that after that image is captioned, it's going to send us a Toast that says that that image has been captioned and the cool thing here is that it's going to give the image as the parameter for what's considered a hero image, which is new to the universal Windows platform.
So let's just put a break point there, load up our app. And let's go ahead and tag this image here. And we've got the payload back. (notification sound) And so notice how cool this is, we've got this cool hero image up here, and it says your image has been captioned as a large brick building with green grass in front of a house. So can see just how cool visually this is, but of course this is also interactive as well.
And if we go to our action center you see how great it looks in there also. So we'll kind of clear those out. But you know these are adaptive, Tiles and Toast, how is this going to look on a mobile device? Well let's just pull that up in the emulator. For a phone, and take a look at that same thing.
Okay, so we've pulled that up, let's go ahead and grab another one, we'll just do this skateboarder here. And we've got that back. (notification sound) so now since we're on this device it's not going to show us the whole hero image unless we pull down. And look how cool that is, we've got that cool image that shows as the hero image, your image has been captioned as a man riding a skateboard down a ramp. But notice now when I tap it, it doesn't really do anything, it doesn't go anywhere.
It's not really helpful. Another cool thing about Toast and the universal Windows platform is that we can respond to those events. So the way that the response happens is through an on activated event in our app dot XAML dot CS. And by default we don't have an on activated event so we can just simply add one. I can say override, on activated. Let's take a look at how that might look, if we load that up.
So now if we caption an image, it's going to send that Toast. And now if we click on it, we can click on it from here, and notice how we get the on activated event, and we can even take a look at the args. So there we see that it's a Toast notification that's coming through. So we can get real granular with this on activated, so we could for example, var Toast args, equals args as Toast notification activated event args, and then we could do something like say, if Toast args dot kind equals activated kind Toast notification, do something here.
So let's just go ahead and put a break point there and run this. So go ahead and caption this one here. (notification sound) And now if I select it, there we go, Toast args and it says it is a Toast notification and I can just look at the argument, we've got action equals image captioned there. So that's pretty cool, and you know realistically then, what we'd want to do maybe is send them to a detail of that image or take some kind of an action, do a redirect somewhere.
The bottom line is, we can respond to actions there, and if this were a button, we could then just check the value of the button. So in earlier examples we saw, we had a cancel button and the action was cancel, we could say hey if the argument equals cancel, then cancel or do something else. So we could really respond to any of the events that are in these elements, because remember, Toasts are controls. So all of this is true as well for Tiles. So why don't we go back to the slide deck and take a look at some of the nuances for Tiles in the universal Windows platform.
Note: This course was created by Wintellect. We are pleased to host this training in our library.