实例讲解Silverlight与AJAX的融合

你还记得在AJAX（异步JavaScript和XML）技术出现之前，Web应用程序是什么样子吗？尽管AJAX被广泛使用只有一年的时间，但现在人们已经不愿使用AJAX出现之前的Web应用程序。随着AJAX变得越来越像一个技术标准而不仅仅是昙花一现，Silverlight 正在对Web技术重新下定义。

对许多资深的技术开发人员来说，AJAX无非就是一个XMLHTTPRequest对象。不过，对最终用户而言，AJAX使用户于服务器的交互更加流畅，并且AJAX还具有一些新的功能，比如自动完成和动态显示，这些体验都是之前的网络浏览器所不能提供的。AJAX打破了用户体验（UX）的障碍，AJAX技术使得Web开发人员都成为了超级巨星。然而，就像DHTML以及过去的其它技术，AJAX的局限性很快也出现了。为了继续改善用户的Web应用的体验，我们必须再次突破目前的障碍，这也正是Silverlight准备要做的。

就其核心部分而言，Silverlight只不过一个浏览器插件。但是看过技术细节后，你就会开始明白这种技术是多么的强大。就像之前的技术一样，Silverlight是建立在AJAX之上，而不是要取代它。这个核心的概念非常重要，因为这可以让开发团队继续利用其现有的代码库，而不需要经历一个彻底的程序重写。当你想要修改一个现有的HTML元素让它更加吸引人时，这特别有用。通过将Silverlight背景层在你的现有元素上，你可以改善你应用程序的外观，而不必重新修改原有代码。Silverlight包含的一些重要功能，比如灵活的编程模型以及无窗口属性使得上述功能得以实现。

灵活的编程模型

将Silverlight集成到一个Web应用程序首先是Silverlight托管。该托管仅仅是Silverlight插件的一个展示。它负责将MAML内容输出到屏幕上。Silverlight的一个核心的功能，就是能够在多种语言环境下对XAML进行编程，包括Javascript、Jscript、C#、VB，甚至Iron Python。Silverlight对多种语言的支持的支持，使你可以根据自己的需要灵活选择合适的工作环境。既然你可以指定提供应用程序行为和事件处理的外部代码文件，所以你可以使Silverlight代码文件同工程的其它代码文件完全分开。这个功能很重要，因为它可以让你轻松的在现有的应用程序中添加Silverlight功能，同时又不改变现有的程序逻辑，或者因为意外更改代码而不至于很难找到由此带来的软件缺陷。

添加SilverLight

Silverlight Host对象可以用不同的方式添加到您的网页数上。当使用ASP.NET AJAX工作时，你最好的选择将是使用包含在ASP.NET Futures中的新的“Xaml”控件。该Xaml控件代表Silverlight host 对象，它还有一个XamUrl属性，该属性用来指出Xaml文件的位置，具体如何使用请见例子1。当网页在浏览器显示的时候，由XamUrl属性指示的Xaml文件会被Silverlight Host对象加载。

例子1

＜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＞

通过Xaml空间的脚本集合，你可以添加事件处理代码文件。这完全符合AJAX应用程序的共同编程风格，并且使你能够在客户端创建于服务器端某些功能相对的JavaScript控件。

无窗口互用性

要将Silverlight真正集成到AJAX应用程序，接口部分必须可以协调工作。过去的浏览器插件作为窗体控件执行时，一般会出问题。这方面的一个例子是Internet Explorer 的DropDown控件（HTML 元素）。DropDown可以透过任何放置在它上面的HTML元素。这是因为DropDown在Internet Explorer里一开始就是作为窗体控件。而在Internet Explorer 7中，这种情况已经发生了改变。因为窗体永远在非窗体控件之上绘制，设置z-index参数是没有效果的。幸亏地是，Silverlight托管提供了窗体属性，让你可以启动该功能，以满足您的需要。而我希望Silverlight托管在元素层上可以互动，因此，我在例子1中将Windowless属性设为true。

拼接起来

在现有的HTML元素上将Xaml背景分层，使得在应用程序上以增量方式增强Silverlight用户体验成为可能。这个方法可以让你按照自己的速度实施Silverlight，而不是被强迫一次完成所有工作或者什么都不敢干。使用CSS定位你的canvas背景，JavaScript使得你的背景显得很逼真，对于AJAX 开发人员来说，只有XAML是陌生的。幸运地是，陈述性标记语言对ASP.NET开发人员来说并不是什么新鲜事物，微软的Expression Blend 2使得仅仅通过简单的点击就能创建动画。

创建背景

掌握了基本概念和并拥有开发工具，你可以很容易地为你现有的AJAX应用程序建立一个Silverlight交互层。一个毫无疑问的可以进行一些装饰的控件是经典的TextBox控件。这不仅仅是因为该控件的标准外观相当灰暗，而且在不同的操作系统或者浏览器下，它的外观也是不同的。这对于那些希望自己设计的接口在任何环境下都看起来一样的设计师们来说简直就是噩梦。 CSS技术成为了最常见的式样标准，但它的分隔符最终会让你感到厌烦。 Silverlight是改变这种状况的一个有效的方法。第一步就是为TextBox控件创建一个XAML皮肤。请记住，你创造了一个装饰层，它会被放在现有的HTML元素之上，因此不同的层使用不同的透明度是很重要的。在例子2中，通过绘制矩形并为增加视觉效果添加了storyboard，这就创建了Xaml标记。请记住，Silverlight

背景将会被层叠在现有的HTML TextBox上面，TextBox与背景匹配的程度是很重要的。

例子2

＜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＞