RSS

The Definite Guide to Notification Window in Silverlight 4.0

10 Apr

By: pluginbaby

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.

Silverlight Notification Window
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);

alt

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.
alt

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.

Interactions: 
You can interact with a Notification Window but only with the mouse, no keyboard events. Also you can’t run actions like navigating from a HyperlinkButton, using SaveFileDialog or OpenFileDialog, accessing the Clipboard or switch to full-screen mode.

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

Download the code

https://skydrive.live.com/redir.aspx?cid=0e564ed4426a5ecc&resid=E564ED4426A5ECC!5407&parid=E564ED4426A5ECC!5370&authkey=!

Referenced by: http://weblogs.asp.net/lduveau/archive/2010/12/10/the-definite-guide-to-notification-window-in-silverlight-4.aspx

Advertisements
 
Leave a comment

Posted by on April 10, 2012 in Silverlight

 

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: