Creating pop ups with the Silverlight Toolkit

In my first article I will demonstrate how simple it is to create a pop-up window in your Silverlight applications using the Silverlight 3 Toolkit.

This article assumes you have the following installed on your machine:

• Silverlight 3 developer runtime
• The July 2009 release of the Silverlight Toolkit for Silverlight 3
• Visual Studio 2008 SP1

If you don’t have the required Silverlight installs, you can download them from here.

The article also assumes you have some familiarity with working with Microsoft Silverlight projects.

Ok, now that we have the requirements out of the way, it’s ready to get dirty (well, so to speak anyway).

Create a Silverlight project in Visual Studio, and add a reference to the System.Windows.Controls assembly (should be located in your Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client directory if you have the toolkit installed).

Now add a new User Control to your Silverlight project (using the User Control template in Visual Studio). For this user control to function as a pop-up window, it needs to be panel-beated a bit. Don’t worry; it’s not as painful as it might sound!

Navigate to the new user control’s XMAL (which, in case you didn’t know, stands for eXtended Markup Application Language). Add an XML namespace definition so that it references the System.Windows.Controls as follows:

xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

and then change the opening UserControl tag to read Controls:ChildWindow. Also make sure you change the closing tag to match. Save, and then open the user control’s code-behind file (with the .cs file extension). You’ll notice that the user control currently inherits from the UserControl class. Change this so that it now inherits from the ChildWindow class. You will also have to include a using statement that references the System.Windows.Controls namespace in the user control’s code-behind.

The XAML and code-behind should look something like this:

That takes care of our new pop-up window definition. Now we need to make use of it.

Open your Silverlight application’s start up page (probably MainPage.xaml – did I guess it or did I guess it?), and navigate to the page’s code-behind. Create an instance of the pop up in the page’s constructor, and wire up an event handler for the pop up’s Closed event. After setting one or two properties, it is as simple as calling the pop up’s Show method to, well, show the pop up window. The ChildWindow class the pop up inherits from takes care of setting an opaque background, and animating the visual effect of showing the window (by using the VisualStateManager as you may have guessed).

The code-behind of MainPage.xaml looks like this:

For the purpose of the demo, I have added two buttons to demonstrate obtaining a result from the pop up after the user has closed it. The ChildWindow class provides a nullable bool property called DialogResult that can be used to determine a choice made by the user on the pop up (for example, checking whether the user clicked an Ok or Cancel button).

I have created a demo application that I will make available for download later this week. It covers the functionality described in this article, and although very simplistic, it will give you an idea of how to implement custom pop-up message boxes in your Silverlight 3 applications. The pop up in the demo looks as follows:

Happy coding