The definite guide to Notification Window in Silverlight 4

Note: This article was first published in Web Central Station, but code format has problem there, so I republish here.
When this article was written the latest version of Silverlight was Silverlight 4.

Notification Window is a Silverlight Out-of-Browser feature (among WebBrowser control, Elevated Trust and offline DRM) that allows your application to display a notification as a little pop-out window that disappear automatically. This is sometimes called a “toast”, and is similar to the Outlook live notification when new emails get in your inbox.

Usage

The Notification Window is only available in Out-of-Browser (OOB) mode. You can take advantage of this feature to display confirmation of user’s actions (“Product saved"), application status (“Application updated, please restart”) or warn the user that data were refreshed while he is working on another application.

Notification Window (”Now Playing”) used in a Silverlight Media Player app.

How to use the NotificationWindow?

1. Check if the app is running Out-of-Browser (with App.Current.IsRunningOutOfBrowser)
2. Instantiate a NotificationWindow object
3. Set its Height and Width
4. Set the Content property to something of type FrameworkElement (UserControl, TextBlock, …)
5. Use the Show() method

As mentioned on MSDN: “You must set Height and Width on a notification window before Show is called and the notification displays. Attempting to set the height/width of a displayed notification throws an exception.”

Notification layout

The typical usage for the NotificationWindow visual is to create a UserControl to serve as the NotificationWindow.Content, so you can design the UI of the notification in Blend. But it could be something as simple as a TextBlock, or you could use a custom control which comes with its whole XAML graph (Canvas, Grid, Button, …) and code.

Show me the code!

Code to create a simple Notification:

Assuming you have a NotificationWindow nw; defined in your class, you could add this code in the click event of a Button:

// If a notification is already opened, close it

if (nw != null)

    nw.Close();

// Create a new nofitication window

nw = new NotificationWindow();

nw.Width = 400;

nw.Height = 100;

// Create a new TextBlock

TextBlock text = new TextBlock();

text.Text = "Simple Notification";

text.FontSize = 26;

text.HorizontalAlignment = HorizontalAlignment.Center;

text.VerticalAlignment = VerticalAlignment.Center;

// Set the content of the notification with the TextBlock

nw.Content = text;

// Show the notification for 3 seconds

nw.Show(3000);

Code to create a custom Notification:

if (nw != null)

    nw.Close();

// Create a new nofitication window

nw = new NotificationWindow();

nw.Height = 100;

nw.Width = 400;

// Create a custom control for the Notification UI

CustomNotification customContent = new CustomNotification();

customContent.Header = "Custom Notification Header";

customContent.Text = "This is a custom Notification text.";

// Set the content of the notification with the control

nw.Content = customContent;

// Show the notification for 4 seconds

nw.Show(4000);

The code for the CustomNotification custom control is available with the source code linked below.

Things you need to know

Size:
Maximum size for a Notification Window is: 400x100px.

Appearance:
Currently (SL4) a Notification Window does not support transparency (for security reasons), no rounded corners as well.
You can only style inside the content of the Window with your own control. The notification default to a blank background.

Multiple notifications:
You can’t have more than 1 notification at the same time (or you’ll get an InvalidOperationException), and the API does not provide a built-in queue mechanism. But nothing prevent you from building your own system to queue several notifications, and it’s fairly easy, see Tim Heuer post.

Effect:
No fade in/fade out like in Outlook right now. No transition/animation possible for the Notification Window itself.

Position:
Silverlight always display the notification in the common location of your OS, on a Windows system it will appear in the lower right corner of the screen, on a Mac it is upper right.

Duration:
The maximum duration for a notification is 30 seconds so that is NotificationWindow.Show(30000).

Download the code