Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink
	TABLE OF CONTENTS Introduction Windowless Interoperability Bringing the Canvas to Life

Windowless Interoperability

To truly integrate Silverlight into an AJAX application, the pieces must all work together cohesively. One of the problems with browser plug-ins of the past has been deep in their implementation as a Windowed control. An example of this can be seen with the Internet Explorer implementation of a DropDown (HTML Select Element). The DropDown bleeds through any HTML element placed over top of it. This is because the DropDown was initially implemented as a Windowed control in Internet Explorer. This has recently been changed with Internet Explorer 7. Because windowed controls will always be drawn over non-windowed controls, setting the z-index has no effect. Luckily the Silverlight host provides the Windowed property to allow you to toggle this behavior to suit your needs. In my case, I want the Silverlight host to interact at the element level so that I can skin existing elements, so I set the Windowless property to true as in Example 1.

Piecing it Together

The ability to layer a Xaml canvas over existing HTML elements makes it possible to strategically add the enhanced Silverlight User Experience to your applications in a piecemeal fashion. This strategy lets you implement Silverlight at your own pace, rather than being forced to go with an all or none approach. Using CSS to position the canvas, and JavaScript to make your canvas come to life, the only unfamiliar piece for AJAX developers is the XAML itself. Luckily the concept of a declarative markup language is nothing new to ASP.NET developers, and Microsoft's Expression Blend 2 makes creating animations a simple point and click exercise.

Creating the Canvas

With the basic concepts and tools in place, you can easily build a Silverlight interactive layer for your existing AJAX applications. One control that can certainly use some dressing up is the classic TextBox. Not only is this control rather bleak in its standard appearance, it looks different according to the operating system and browser. This is a nightmare for designers who want the interfaces that they create to look the same no matter what the environment. CSS becomes the least common denominator for styling, but you end up with boring square borders. Silverlight is a great way to remedy this situation. The first step is to create the xaml skin for the textbox. Remember, you're creating an adornment layer what will be placed on top of the existing HTML element, so using varying levels of opacity is important. Creating the Xaml markup is done by drawing a rectangle and adding a storyboard for some visual appeal as in Example 2. This task is accomplished quickly with Expression Blend 2. Remembering that the Silverlight canvas will be layered over top of an existing HTML TextBox, it is important that the dimensions of our textbox and our canvas match up precisely.

<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Name="Scene" 
	Width="120" Height="20"
	>
	<Canvas.Resources>
		<Storyboard x:Name="animation">
			<ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
				Storyboard.TargetName="rectangle" 
				Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
					<SplineColorKeyFrame KeyTime="00:00:00" Value="#00FFFFFF"/>
					<SplineColorKeyFrame KeyTime="00:00:01" Value="#991E1C1C"/>
				</ColorAnimationUsingKeyFrames>
			<ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
				Storyboard.TargetName="rectangle" 
				Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
				<SplineColorKeyFrame KeyTime="00:00:01" Value="#FFFFF9F9"/>
			</ColorAnimationUsingKeyFrames>
		</Storyboard>
	</Canvas.Resources>
	<Rectangle Width="120" Height="20" Fill="#FFFFFFFF" 
		Stroke="#FF000000" Canvas.Left="0" Canvas.Top="0" 
		MouseEnter="MouseEnter" x:Name="rectangle"/>
</Canvas>

Positioning The Canvas

With the Xaml layer complete, it's time to position the canvas over top of our existing TextBox using some CSS styling. By placing both the TextBox and our Xaml control inside of a relatively positioned container, you can layer one over the other as in Example 3. Once the Canvas is layered over the TextBox, it's important to work with the background colors in order to enable transparency. Along with the traditional CssClass property available on WebControls, the Xaml control also has a SilverlightBackColor property. This property must be set to transparent to reveal the layer beneath it.

Dynamic Insertion

If you want to avoid modifying your existing ASPX/HTML, you can dynamically add the Xaml control to your page. This is accomplished by extending the TextBox control, and adding the Xaml control to the controls collection. Because a TextBox doesn't normally have children, you'll also need to override the Render method and explicitly call RenderControl on the Xaml control. The Render method is also where you can add the containing DIV element which will encapsulate both the TextBox and the Xaml elements.

Rather than manually updating your markup to use the newer derived TextBox you can force ASP.NET to automatically replace the framework's TextBox with your own type automatically. This is done by using the TagMappings section of the web.config file. Following this approach will allow you to keep all of your Silverlight specific code completely separate from your existing project. Not only does this make maintenance easier, but it also allows you to add smart switching logic into your page which will only load the Silverlight layers if certain conditions are met, making opt-in "beta" versions of the page a breeze.

<div style="width:120px;height:20px;position:relative;">
        <asp:TextBox ID="TextBox1" runat="server" CssClass="txtBox">
</asp:TextBox>
        <asp:Xaml XamlUrl="default.xaml" runat="server" 
            CssClass="txtBoxWrapper" Width="120px" Height="20px" 
            BackColor="transparent" SilverlightBackColor="transparent" 
            Windowless="true" ClientType="Wrappers.TextBox">
            <Scripts>
                <asp:ScriptReference Path="default.xaml.js" />
            </Scripts>
        </asp:Xaml>
    </div>

Previous Page | 1 Introduction | 2 Windowless Interoperability | 3 Bringing the Canvas to Life Next Page

RELATED ARTICLES Securing the Java Core Petascale Tools and Genomic Evolution Legal Compliance: Open Source and Quality Assurance SEI, Army Team Up on Software Testing Nozzle: Counteracting Memory Exploits		TOP 5 ARTICLES No Top Articles.