Silverlight is the cross-browser plug-in that brings the power of Windows Presentation Foundation (WPF) to ASP.NET and even plain HTML pages. Put another way, Silverlight is a tool to create more interactive and rich user interfaces for the Web. It allows you run a WPF application represented by a XAML document in the context of a Web browser in a cross-platform manner. (Note, though, that Silverlight is currently limited to Windows and Mac platforms.)
A Silverlight-enabled ASP.NET page contains a system script file named silverlight.js, which represents the client side portion of the Silverlight engine. That script file is included in the Silverlight SDK. You just copy it somewhere in your site and link it to pages. Some handwritten JavaScript code is required to incorporate Silverlight in an ASP.NET page. If you have an ASP.NET 3.5 page, you can use the following code for a sample page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="Silverlight.js" />
<asp:ScriptReference Path="Test.aspx.js" />
</Scripts>
</asp:ScriptManager>
In older versions of ASP.NET, you can use the plain <script> tag to reference any Silverlight scripts. The Silverlight.js file defines the Sys.Silverlight class that represents the engine. The other script file you see in the code snippet is a script file specific to a page and contains some boilerplate code to initialize the Silverlight plug-in within that page.
function createSilverlightHost()
{
Sys.Silverlight.createObject(
"xaml/test.xaml",
$get("placeholder"),
"SilverlightControl1",
{
width:'100',
height:'100',
},
{
onError:null,
onLoad:null
},
null);
}
As a result of this script, the Silverlight engine is embedded in the host page as an external object through a dynamically generated <object> tag. Where exactly? It will be injected in the host page as a child of the specified placeholder element—normally a <div> tag.
The content of the Silverlight block is fully determined by the referenced XAML document. The XAML document can be a static server resource or a dynamic endpoint that generates XAML content on the fly. What really matters is that you make the Silverlight engine point to a URL that returns XAML contents.
You can programmatically access the contents of the XAML document using JavaScript through the following syntax:
var host = $get("SilverlightControl1");
var element = host.content.findName("TextBlock1");
SilverlightControl1 is simply the ID you assign to the Silverlight block when you create it in the preceding createSilverlightHost function. A Silverlight object has a content property to access its internal tree of objects. Once you have retrieved a given element, you can modify its state and appearance through the XAML object model. Programmable XAML elements have the x:Name attribute set to a unique name. You retrieve these elements passing the name attribute to the findName method.
The elements in the XAML document can be scripted too. For example, in the XAML file you can attach some JavaScript functions to events such as mouse-enter and mouse-leave. JavaScript, however, is the only programming language that can be used to make Silverlight more dynamic.
In the upcoming ASP.NET 3.5 Extensions, Microsoft introduces a new server control—the Silverlight manager—that saves you from writing most of the preceding JavaScript code. All that you have to do is adding this new control to the ASP.NET page and work with its exposed set of properties.
It is essential to note that all the Silverlight capabilities mentioned in this article refers to Silverlight 1.0, released last September. Silverlight 1.0 supports only a small subset of the WPF syntax and is mostly limited to media and graphics capabilities. In a few months, a new version of Silverlight will be out with a largely enhanced set of features. The new version of Silverlight, labeled with a 2.0 version number, will support the full WPF syntax, incorporate a CLR instance and provide support for managed languages and a subset of the .NET Framework.
