The Best of Both Worlds - 30 Oct 2009

Introducing the ASP.NET Silverlight Controls





The Best of Both Worlds

Introducing the ASP.NET Silverlight Controls


By Austin Avrashow


Silverlight 2 has been released. For you as an ASP.NET developer, is that ho-hum or hurrah? They both create visible programs that run in a browser, so are they competing or complementary technologies? Are they like oil and water interfering with each other and best used separately? Or are they like peanut butter and jelly both good, but better together?

It turns out that although some situations are best with one or the other, many scenarios benefit from both technologies used together. And as we ll see in this article, using them together couldn t be easier.

Getting the ASP.NET Silverlight Controls

There are two new ASP.NET server controls in the ASP.NET toolbox that open up possibilities previously difficult or impossible to do on an ASP.NET page:

§  The ASP.NET Silverlight control lets you embed compiled Silverlight content into an ASP.NET Web page.

§  The ASP.NET MediaPlayer control provides an easy way to add audio or video playback capabilities to an ASP.NET Web page.

To get these controls, you need to download and install the Microsoft Silverlight Tools for Visual Studio 2008 Service Pack 1 ( Be sure to uninstall any earlier CTP or beta versions before installing the Silverlight Tools for Visual Studio 2008 SP1.

This also installs the Silverlight 2 runtime you ll need to test your project, as well as a Silverlight 2 project template for Microsoft Expression Blend 2 Service Pack 1, although Blend is not required to create Silverlight content.

After you install the Silverlight tools, two new controls are available in the Toolbox in Visual Studio 2008, as shown in Figure 1.

Figure 1: Toolbox with Silverlight controls.
Figure 1: Toolbox with Silverlight controls.

Adding the Silverlight Control to a Web Page

With the ASP.NET Silverlight control, you can easily integrate Silverlight content into any ASP.NET Web page.

Let s add a Silverlight application to an existing ASP.NET page. To follow along on your computer, download the accompanying files for this article (see end of article for download details). All you need for this procedure is the MoodIndicator.xap file.

Compiling a Silverlight project produces a .xap file as the output. This file combines all the scripts and resources and assemblies into a single file. This file (in zip format) is what the Silverlight control uses to display Silverlight content on an ASP.NET page.

First, create a new Web site or Web project with Visual Studio 2008 SP1. You also can use Visual Web Developer 2008 Express Edition with SP1. On the Default.aspx page, add a ScriptManager control between the opening and closing tags for the form element. This control is necessary because the Silverlight server control creates an AJAX client control in the HTML sent to the browser. The ScriptManager control is located in the AJAX Extensions area of the Toolbox. Next, drag a Silverlight control from the Toolbox below the ScriptManager control and before the closing form tag. The Silverlight control is located in the Silverlight area of the Toolbox, as shown in Figure 1. This adds a Register directive to the page for the Silverlight assembly and also sets references to the Silverlight DLL added to the Bin folder. Then right-click on the Web site in Solution Explorer. Choose Add an Existing Item, then navigate to the MoodIndicator.xap file in the source files that accompany this article and add it to the project. Set the Source property of the Silverlight control to the MoodIndicator.xap file. Change the Width and Height properties of the Silverlight control to 400px (the default is 100 pixels). Press F5 to view the page in the browser. Interact with the buttons to indicate your current mood (see Figure 2).

Figure 2: Silverlight content in an ASP.NET Web page.
Figure 2: Silverlight content in an ASP.NET Web page.

This scenario (where you have a compiled Silverlight application to place on an .aspx page) happens more often than you might think. If a designer or a different group is responsible for creating the Silverlight application, they will provide you with a single .xap file that you will add to an ASP.NET Web site using the steps described in the previous procedure. That s all you need to do.

And even if you are the person developing the Silverlight application, it s helpful that the only point of contact between Silverlight and ASP.NET is a single .xap file. This allows you to work on the Silverlight application or ASP.NET page independently without affecting the other.

The users viewing the page will need to have the Silverlight plug-in installed, but the control detects whether the Silverlight plug-in is installed (and whether the required minimum version is present) and displays an image that prompts the user to download the Silverlight plug-in or update the plug-in to the required version.

That functionality is provided automatically, but you can customize the experience for users who do not have the Silverlight plug-in installed. You might provide a different graphic than the default image for users who don t have Silverlight installed, perhaps displaying an image showing what they ll see on the page if they download and install the plug-in.

To customize the experience for users who don t have the plug-in installed, set the PluginNotInstalledTemplate property on the ASP.NET Silverlight control to indicate the HTML to display rather than display the standard Install Silverlight graphic.

Creating Silverlight Content and Testing It on an ASP.NET Page

You may need to create the Silverlight application for use with ASP.NET. Visual Studio 2008 SP1 not only lets you create Silverlight content, but also can provide a test project to host the Silverlight application development.

Let s create a Silverlight project and test it on an ASP.NET page:

  1. Create a Silverlight Application project with Visual Studio 2008 SP1. Choose either C# or Visual Basic as the language. Name the project MoodIndicator.
  2. When prompted whether to create a Web project to host the Silverlight application, click OK. Visual Studio creates a solution with two projects (see Figure 3).
  3. Open Page.xaml. Delete its existing content and replace it with the code in Figure 4. Notice that the Path element has a name assigned to it (Name= mouth ). This is so we can access that element in code in the next step.
  4. Open the Page.xaml.cs or Page.xaml.vb code-behind file (depending on your language choice). Add the code for the two button click event handlers for C# (see Figure 5) or Visual Basic (see Figure 6). These event handlers apply a transform to the mouth when someone clicks on one of the Silverlight application buttons.
  5. Choose Rebuild Solution from the Build menu. This compiles the project and copies the compiled MoodIndicator.xap Silverlight application to the ClientBin folder of the MoodIndicator.Web project (the test project).
  6. Press F5 to run the test .aspx page of the MoodIndicator.Web project.
  7. The MoodIndicatorTestPage.aspx file is displayed in the browser. Use the buttons to indicate your mood. Notice that Silverlight buttons display a hover effect when the mouse is over them.

Figure 3: Solution Explorer with two projects.
Figure 3: Solution Explorer with two projects.



Width="300" Height="280">

Fill="#FFFFFF00" VerticalAlignment="Stretch"/>

Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.