Integrating Silverlight Plug-ins into Web Pages

A Silverlight plug-in can be incorporated into a web page using two main techniques:

-Contrary to what you might believe, you are *not* required to build the hosting web site using ASP.NET.
-You can manually author the required HTML / JavaScript.

This is useful if you are building a web site not making use of ASP.NET. You can use the ASP.NET Silverlight web control. If you are using ASP.NET to build the site, this is the easiest approach, as all the necessary HTML and JavaScript will be generated for you.

You simply place and configure a Silverlight control into your *.aspx / *.master / *.ascx files. In a nutshell, working with the Silverlight control is really no different than working with an ASP.NET Button control. As you have seen, when you build a new Silverlight Application with Visual Studio, you must select how to host the plug-in. Via an autogenerated web page. This option does not use the ASP.NET Silverlight web control.

Via an ASP.NET web application project. This option adds an ASP.NET web application into your project, containing a configured ASP.NET Silverlight web control. The ASP.NET web application project option also adds a simple *.html file which hosts the same Silverlight web plug-in using simple HTML / JavaScript.

While the "autogenerated page" option is typically fine during for testing and development, you will eventually need to host your Silverlight applet within a ‘real’ web site. Therefore be aware that when you build a new ASP.NET web application, the Visual Studio toolbox will contain the Silverlight server web control. This is the same control used when you select the Silverlight ASP.NET web application project option.

The ASP.NET MediaPlayer control lets you integrate media sources such as audio (WMA) and video (WMV) into a Web site, without requiring any knowledge of XAML or JavaScript.

In this article, you will focus on hosting Silverlight web plug-ins using the ASP.NET controls. If you are unable to use ASP.NET for your web sites, remember you can manually author the necessary HTML / JavaScript. Look up the topic "Adding Silverlight to a Web Page using HTML or JavaScript" in the Silverlight 2.0 SDK documentation.

The ASP.NET Silverlight Web Control

The ASP.NET Silverlight control enables you to integrate XAML and any supporting code (such as a .NET code library) into a Web site. Web pages that use the Silverlight server control must include a ScriptManager control. The ScriptManager manages ASP.NET AJAX script libraries and script files, partial-page rendering, and client proxy class generation for Web and application services. The Source property of the Silverlight control should be set to the location of the *.xap file, relative to the web app’s location. By default, the *.xap file is copied to a sub-folder named ClientBin. However, the name of the subdirectory can be anything you choose.

Assume you have created a new Silverlight Application, which is hosted by a ASP.NET web application project. Notice that the Visual Studio IDE automatically copies the *.xap to the \ClientBin folder.

The markup being the *.aspx file, initially looks like so:

-Note a reference is made to the System.Web.Silverlight.dll assembly.
-Also note a component has been declared, as this will be used by the control.
-Finally, notice the control as set the Source property to point to the local copy of the *.xap.
<%@ Page Language="C#" AutoEventWireup="true" %>

The web page designer renders the Silverlight control using a general placeholder. Like any other ASP.NET control, you may use the Properties window to further configure the component.

By default, the Height and Width of the component are set to 100%, which will cause the IDE to render the component within the entire area of the page designer. However, the actual size of the control will depend on the size of the UserControl.

If the Height and Width properties are smaller than that of the Height and Width of the UserControl, the control will be clipped.
The Height and Width properties of the ASP.NET Silverlight control can be set to percentages or pixels.

The above is based on Silverlight Training offered by Intertech.