Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
SilverLight supports several ways to show a dialog to the user. In the lynda.com Silverlight 3 Essential Training series I show how to create a pop-up window and how to work with dialogs. Today I want to show you the new Notification feature in Silverlight 4. It's important to know, however, that notification window can only be used in an out-of-browser application. A Notification is a window that animates into view, usually in the lower right-hand corner of your Windows desktop. It is customizable with your own UI.
As you can see, I'm inside Visual Studio and I have opened a project called AddNotificationWindow. In the code behind for this window, which I can see by pressing F7, I've created a timer using the DispatcherTimer, which is a thread-safe timer for Silverlight. And in the timer I am firing this code down here in the timer_Tick procedure. So what I do in here is I check first to see if I'm running out of browser because remember, I can only do notification windows if I am running out of browser.
And if so, I stop the timer. Do some work in here. In my case, I want to show this first demo, so I am going to comment out this code at the bottom of the page. Click here in this Comment button, and then I am going to uncomment this code up here in the first demo. What this is going to do is it's going to create a shell to put my content in. It's called the NotificationWindow.
I then specify the size of that window. Note here that I tell you the maximum size that you're allowed 400x100 pixels. So I picked a size that's smaller than that. And then I call win.Show and I pass in the number of milliseconds that I want this window to show on the screen. Let's try it out. I am going to press F5. Now because of the way I have configured my application--let me go to Properties > Debug and you see that I have out-of-browser application--it's automatically going to install the application every time I press F5.
So I will press F5. There is my out-of- browser window. And if you look in the lower right-hand corner you will see that this window pops up. And it's just this blank window. There's nothing in it. It stays up for six seconds. It's my job to write some XAML to create the UI and then load it into that notification window. Let's do that. Back to my code page. I am going to comment out this code. You can comment code and uncomment by using Ctrl+K, Ctrl+C and Ctrl+K, Ctrl+U to uncomment it, Ctrl+K, Ctrl+U. Now let's see what I am doing here.
This time I am starting the NotificationWindow and I'm instantiating a user control that I wrote that contains the UI that I want to show. That's over here, NotifyUser.xaml. I am thinking this as like a notification from my friends, let's say things like, "hey, I just found this new CD; what do you think of it?" or "I hear that this band is coming to town; let's go to the concert." It has a UI with an icon, a title bar, and a button that I can click on to buy the CD.
That's my UI. I am going to load that in via code by going over here and saying instantiate that user control, set the height of the NotificationWindow and the width to the matching size of the underlying control, put this message title in, and this message. Now I have created some dependency properties on the NotifyUser file. I encourage you to learn more about dependency properties. That's the correct way of exposing read and write data out of a user control. Here is the code for setting the message property.
I'll come back over here to MainPage.xaml.cs, and I'm setting this string on that dependency property. Then the key part here is I assigned that brand-new UI I just generated to the content of the NotificationWindow. And this is what it looks like. Press F5 again, wait a few seconds, and then look in the lower corner, and here comes a message from Amy. And this is interactive. While it's up onscreen, I can click on this button. I don't know if you saw that, but when I clicked on the button I had some code behind that actually changed the message on that NotificationWindow.
That proves that they are interactive. Now you can only have one NotificationWindow open at a time. If you want to, like, queue messages up from your friends, it's better if you create some sort of notification service and it does the automatic queuing. By default, Silverlight doesn't offer that, but it's not that hard to create. I have an example on how to do that. I have created something called NotifyService. NotifyService is a class that I wrote that basically queues up all those future notification windows.
Let's see how it works. We can come back to my MainPage.xaml.cs file, comment this code out Ctrl+K, Ctrl+C, uncomment this, Ctrl+K, Ctrl+U. And you can see that I am using AddNotificationWindow, which is a static method, and I am passing in two strings: the title and the content. Now if you press F12 while you are on this, it will take you over to the definition of that function. And that says that I want to add a NotificationWindow. Inside here you see here I am just creating that NotificationWindow; wiring up an event procedure that says when this window closes, run some code; create a brand-new notify UI--that's the same NotifyUser control I showed you earlier; same code down here; and then this is the key part--I call AddNotificationToQueue, which is down here.
So if there is no windows in the queue the first time this runs, it will show the NotificationWindow. However, if there already is a window in scope then instead what I do is I then queue the item into .NET queue. So those start stacking up. As soon as the window closes that's currently shown, it fires this event when closed and I set that to null. So you see what happens the next time I do an AddNotification; this would be set to null. So it showed the window immediately. If there are any items in the queue then they are going to get popped out, and that's what's happening down here in this code: if (_notifyQueue.Count > 0, then Dequeue.
Now it puts this code in here to simulate some space between the messages, but I'm not encouraging you to write a Thread.Sleep in your code because that will lock up your UI thread; it's not a good thing to do. Let's see what this looks like. Press F5 again to run the application. Keep your eye in that lower right-hand corner. Martin tells me something interesting. Then I get the next message and finally, some concert news. As I mentioned, there are some limitations to these notifications, or sometimes called toast windows. For one, you can only have one open at a time.
Still, I find they're very handy, and they give you an interesting mechanism to show instant alerts in your application.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92241 Viewers
82 Video lessons · 104072 Viewers
71 Video lessons · 75425 Viewers
56 Video lessons · 106806 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.