MSDN Magazine - January 2008 - (Page 127)

Encapsulating Silverlight with ASP.NET Controls FRITZ ONION M any ASP.NET developers around the world are wondering how and where they should incorporate Silverlight™ into their applications. The answer isn’t obvious because there is a wide range of approaches you can take. You can make your entire page a Silverlight control and do everything there or, the more likely approach, you can identify portions of your pages that would benefit from Silverlight and integrate rich UI elements where they add the most benefit, leaving the underlying application structure the same. The latter approach is sometimes referred to as “adding islands of richness” to your pages. And with Silverlight, those islands have many possible bridges to the surrounding content via scriptable methods and events. In this month’s column, I’m going to explore techniques for building custom server controls that encapsulate Silverlight content. Wrapping Silverlight content into a custom ASP.NET control has several advantages that make it an especially appealing technique. It makes integrating Silverlight content as easy as using any other server-side control, which greatly increases the chances of adoption. The process of adding handlers, setting properties, and calling methods on the Silverlight control is exactly the same as with any other control. And this approach keeps pages free from the clutter of Silverlight-specific JavaScript, making it easier to maintain and deploy. to host this XAML in Silverlight and then use JavaScript handlers to set the title text and invoke the animations as the user clicks on the rendered sphere. To incorporate this XAML into a Web page, I first need to create the Silverlight plug-in. The simplest way to do this is to add a reference to the Silverlight.js script file that is included with the Silverlight 1.0 SDK. This file defines a method called Silverlight.createObject, which you can use to create the plug-in. The Silverlight plug-in needs to be associated with an HTML element on the page Figure 1 Sphere.xaml File Using Silverlight Before I jump into the details of building a custom control to host Silverlight content, I should describe precisely what needs to be in place for Silverlight content to render to the client. So I will begin by showing you how to host a XAML file in an ASP.NET page and add interaction between the page and the rendered Silverlight content. It will be clearer how to put the pieces of the control together once I have a page that exhibits the behavior I ultimately want to encapsulate with a control. The first step is to write a XAML file to be rendered by Silverlight. My goal is to keep the XAML simple enough to be unobtrusive in presenting the control but complex enough to be interesting. So I have chosen to render a single sphere with a title. The XAML shown in Figure 1 defines a TextBlock used as a title and an Ellipse painted with a radial gradient brush. This XAML also defines two Storyboards in the resources portion of the Canvas, describing two animations that will cause the sphere to grow and shrink, respectively, over durations of two seconds each. Ultimately, I want january2008 127

Table of Contents Feed for the Digital Edition of MSDN Magazine - January 2008

MSDN Magazine - January 2008 Contents Toolbox CLR Inside Out Data Points Advanced Basics Cutting Edge IIS 7.0 - Enhance Your Apps with the Integrated ASP.NET Pipeline World Ready - Around the World with ASP.NET AJAX Applications WCF Syndication - HTTP Programming with WCF and the .NET Framework 3.5 Wicked Code Foundations Extreme ASP.NET {End Bracket}

MSDN Magazine - January 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.