Silverlight与AJAX的融合
创建背景
掌握了基本概念和并拥有开发工具，你可以很容易地为你现有的AJAX应用程序建立一个Silverlight交互层。一个毫无疑问的可以进行一些装饰的控件是经典的TextBox控件。这不仅仅是因为该控件的标准外观相当灰暗，而且在不同的操作系统或者浏览器下，它的外观也是不同的。这对于那些希望自己设计的接口在任何环境下都看起来一样的设计师们来说简直就是噩梦。 CSS技术成为了最常见的式样标准，但它的分隔符最终会让你感到厌烦。 Silverlight是改变这种状况的一个有效的方法。第一步就是为TextBox控件创建一个XAML皮肤。请记住，你创造了一个装饰层，它会被放在现有的HTML元素之上，因此不同的层使用不同的透明度是很重要的。在例子2中，通过绘制矩形并为增加视觉效果添加了storyboard，这就创建了Xaml标记。请记住，Silverlight
背景将会被层叠在现有的HTML TextBox上面，TextBox与背景匹配的程度是很重要的。
＜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＞
例子 2
定位背景
创建完Xaml层后，是时候使用一些CSS式样将背景放在现有的TextBox上了。通过把TextBox和Xaml控件放在一个相对位置容器中，你可以像例子3那样，将一个层叠在另一个上。一旦把背景层叠在TextBox上时，调整背景颜色增加透明度就很重要了。WebControls具有传统的CssClass属性 ，Xaml 同样有一个SilverlightBackColor属性。这个属性必须设置成透明，以揭示它下方的层。
动态插入
如果你想避免修改您现有的ASPX/HTML页面，你可以动态地向你的网页添加Xaml控制。这可以通过扩展TextBox控制，并在控制集合中添加Xaml控制来实现。因为一个TextBox一般没有子类，你还需要重载Render方法，并Xaml控制中显式调用RenderControl。你也可以在Render方法里添加DIV元素，这将会封装TextBox 和 Xaml元素。
你可以让ASP.NET自动将framework的TextBox控件替换成你自己编写的新派生的类，而不需要手工替换。通过使用web.config文件的TagMappings部分，可以实现上述功能。按照这一办法，你可以将你的所有Silverlight代码与项目现有的其它代码完全分开。这不仅使得维护方便，它还可以使您在网页中添加智能开关逻辑，如果某些条件得到满足，将只加载特定的SilverLight层。
＜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＞
例 3
赋予背景以新的生命
当完成HTML/ASPX 和XAML全部完成后，JavaScript就是唯一剩下的一部分了。如果你看回过头来看看例子2，你将通会发现添加了一个Storyboard对象，到目前为止它还没有被激活。你可以通过使用JavaScript 添加mouseEnter事件对它进行激活，这是通过JavaScript addEventListener函数实现的。你可以像例子4中那样，使用findName函数得到Storyboard对象的指针。一旦你获得了Storyboard对象的指针 ，通过调用开始方法你就可以绘制动画。JavaScript文件会由Silverlight Host对象自动加载，只要你在Xaml控件的Scripts集合中指明脚本指针就行了（见例子3 ）。在JavaScript文件文件里定义表示客户端的对象，Xaml控件中的 ClientType属性必须被设定为对JavaScript 文件 的registerClass调用中制定的类型，具体使用参见例子4的最后一行。
文章评论
共有 位CH网友发表了评论 查看完整内容