Silverlight 支持 JavaScript 编程,这允许你给你的内容添加交互性。 本文档包含以下章节。 脚本和事件当一个事件发生时,Silverlight 允许你运行 JavaScript 代码, 比如当一个对象被读取或者鼠标进入一个对象。 这样一个脚本被称作 "event handler". 要定义一个 event handler,遵照如下三步。
现在试一下示例。在 Silverlight 中, 所有 Canvas 和形状元素都有一个叫 MouseLeftButtonDown 的事件, 当鼠标指针在元素上时你(用户)按下鼠标左键触发该事件。 你将写一个事件函数,使用 JavaScript 的 alert 函数创建一个对话框。 [隐藏 XAML] <Canvas Height="300" Width="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="transparent" MouseLeftButtonDown="helloworld"> <TextBlock Text="click me" FontSize="50"/> </Canvas> [隐藏 JavaScript] function helloworld() { alert("hello world"); } [隐藏] [重新开始] 当你声明一个事件处理函数时,你没有一个明确的参数。
但如果你指明参数,第一个参数, 设置属性你可以使用 JavaScript 设置 Silverlight 对象的属性。 当一个属性的值是字符串或数字,你可以在 JavaScript 中像平常一样设置。 如果属性是 Silverlight 对象,就需要类型转换, 比如一个 SolidColorBrush 或 Point, 你可以使用一个字符串来设置值。 否则,你需要使用 createFromXaml 方法来实例化一个新的属性值。 下面的示例注册 Canvas 的 MouseLeftButtonDown 事件。 在事件处理中,sender 参数提供访问 Canvas。 示例设置 Canvas 的 Background 属性为红色并显示当前 Height 属性的值。 [隐藏 XAML] <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent" MouseLeftButtonDown="changecolor"> <TextBlock Text="click me" FontSize="50"/> </Canvas> [隐藏 JavaScript] function changecolor(sender, args) { sender.background = "red"; alert("Height is " + sender.Height); } [隐藏] [重新开始] 设置附加属性要为附加属性设置值,比如 Canvas.Top,在 JavaScript 中, 你使用下面的语法。
这里 下面的示例当鼠标左键按下时设置一个 TextBlock 的 Canvas.Top 属性为 70。 [隐藏 XAML] <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent"> <TextBlock Text="click me" FontSize="50" MouseLeftButtonDown="changelocation" /> </Canvas> [隐藏 JavaScript] function changelocation(sender, args) { sender["Canvas.Top"] = 70; } [隐藏] [重新开始] 常用鼠标事件UIElement 对象提供许多不同的鼠标事件供你处理: MouseLeftButtonDown、 MouseLeftButtonUp、 MouseEnter(当鼠标移入元素时触发)、 MouseLeave 和 MouseMove(当鼠标在元素内移动时触发)。 当事件发生时鼠标事件有一个“args”对象提供鼠标位置的 x 和 y, 一般你将在鼠标事件处理中引用。 下面的示例使用这里每一个鼠标事件来修改 Ellipse 的显示。 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse x:Name="e1" MouseMove="e1Move" MouseEnter="e1Enter" MouseLeave="e1Leave" MouseLeftButtonDown="e1Down" MouseLeftButtonUp="e1Up" Height="100" Width="100" Canvas.Left="80" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas> [隐藏 JavaScript] function e1Enter(sender, args) { sender.stroke = "red"; } function e1Leave(sender, args) { sender.stroke = "black"; } function e1Down(sender, args) { sender.fill = "Green"; } function e1Up(sender, args) { sender.fill = "LightBlue"; } function e1Move(sender, args) { sender.fill = "yellow"; } [隐藏] [重新开始] 对 Silverlight 来说,另一个非常有用事件是 Loaded 事件。
通常你在根元素声明中注册该事件处理,
但 Loaded 可以在任意 UIElement 中标明,
不只是根元素。
Loaded 事件提供一个好的机会接收 Silverlight 内容显示后的任何最后改变。
下面的示例使用一个 Loaded 事件处理来改变一个 Ellipse 的 Fill 从 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Loaded="ellipse_loaded" Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas> [隐藏 JavaScript] function ellipse_loaded(sender, args) { sender.Fill = "Red"; } [隐藏] [重新开始] 给对象命名并取回前面的示例使用 JavaScript 事件处理来改变触发事件的对象,
但是,如果你使用对象的方法或设置其属性而不是 sender,将会发生什么?
Silverlight 元素提供一个叫 FindName 的方法,
这样你可以从 Silverlight 内容的任何框架引用中取得 Silverlight 对象。
要使用 FindName 来取得对象,
当你在 XAML 中声明对象时,你必须首先标明 下面的示例当在父级 Canvas 中按下鼠标左键时,改变了 Ellipse 的 Fill 属性。
当 Canvas 触发事件时,
[隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent" MouseLeftButtonDown="changeEllipseColor"> <TextBlock Text="click me" FontSize="50"/> <Ellipse x:Name="myEllipse" Height="200" Width="200" Canvas.Left="30" Canvas.Top="80" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas> [隐藏 JavaScript] function changeEllipseColor(sender, args) { sender.findName("myEllipse").Fill = "red"; } [隐藏] [重新开始] 动态创建 Silverlight 对象你可以使用 CreateFromXaml 在 JavaScript 中创建一个新的 Silverlight 对象。 但是当你使用 CreateFromXaml 方法之前, 你必须获得 Silverlight 插件实例的引用。
下面的示例每次鼠标左键按下时创建一个新的 Ellipse 对象并将其添加到一个 Canvas。 注意,虽然你点击多次会添加多个对象,但你只会看到一个椭圆, 那是因为所有的椭圆看起来都完全一样,并且绘画在其它椭圆的上面。
[隐藏 XAML] <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent" MouseLeftButtonDown="createEllipse"> <TextBlock Text="click for circle" FontSize="40"/> </Canvas> [隐藏 JavaScript] function createEllipse(sender, args) { var slControl = sender.getHost(); var e = slControl.content.createFromXaml( '<Ellipse Height="200" Width="200" Fill="Blue"/>'); var canvas = sender; canvas.children.Add(e); } [隐藏] [重新开始] 注意,JavaScript 要求你将字符串放在一行,
除非你使用 使用 XAML 字符串处理动态创建 Silverlight 对象当多次添加同样的 XAML 到页面时,前面的示例展示潜在着不合适的效果。 如果你真的想要使用 XAML 添加对象, 通常每次通过一些方法改变 XAML 是较合适的。 你可以在每次调用前通过立即调整 XAML 字符串来实现。 下面的示例每次鼠标左键按下时创建一个新的 Ellipse 对象并添加到一个 Canvas, 但这回,每次创建时 Ellipse 的三个属性将会改变, 以便你可以真正的看到多个对象被添加到页面中了。 [隐藏 XAML] <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent" MouseLeftButtonDown="createEllipse2"> <TextBlock Text="click for Lots of circles" FontSize="20"/> </Canvas> [隐藏 JavaScript] var opacitychange = 1; var canvastop = 0; var canvasleft = 0; function createEllipse2(sender, args) { var slControl = sender.getHost(); xamlstring = '<Ellipse Height="10" Width="10" Fill="Red"'; xamlstring += " Opacity = '" + (opacitychange-=0.1) + "'"; xamlstring += " Canvas.Left = '" + (canvasleft+=15) + "'"; xamlstring += " Canvas.Top = '" + (canvastop+=15) + "'"; xamlstring += "/>"; var e = slControl.content.createFromXaml(xamlstring); var canvas = sender; canvas.children.Add(e); } [隐藏] [重新开始] 控制动画交互你可以使用事件处理来控制 animations。 给你想要控制的 Storyboard 添加名字, 然后你可以使用它的 begin、 Stop、 Pause 和 Resume 方法来控制其交互性。 如果你不想让 Storyboard 自动开始, 将其声明为一个资源,而不是在 EventTrigger 中声明。 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Resources> <Storyboard x:Name="animation" Storyboard.TargetName="e1" Storyboard.TargetProperty="(Canvas.Left)"> <DoubleAnimation RepeatBehavior="Forever" To="300"/> </Storyboard> </Canvas.Resources> <Ellipse x:Name="e1" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="Black" Offset="0.5" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Canvas MouseLeftButtonDown="animation_stop" Canvas.Left="20" Canvas.Top="60"> <Rectangle Stroke="Black" Height="40" Width="40" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas> <Canvas MouseLeftButtonDown="animation_pause" Canvas.Left="70" Canvas.Top="60"> <Rectangle Stroke="Black" Height="40" Width="50" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas> <Canvas MouseLeftButtonDown="animation_begin" Canvas.Left="130" Canvas.Top="60"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="40" Width="50"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">begin</TextBlock> </Canvas> </Canvas> [隐藏 JavaScript] function animation_stop(sender, args) { sender.findName("animation").stop(); } function animation_pause(sender, args) { sender.findName("animation").pause(); } function animation_begin(sender, args) { sender.findName("animation").begin(); } [隐藏] [重新开始] 使用 getElementById 方法获得和创建对象当你在写不被 Silverlight 事件(比如一个 HTML 事件处理)触发的脚本时,
你将不会有 sender 参数提供 FindName 或 GetHost 方法的访问。
在这种情况下,
你可以使用 下面的示例使用了 [隐藏 XAML] <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Transparent" MouseLeftButtonDown="changeEllipseColor2"> <TextBlock Text="click me" FontSize="50"/> <Ellipse x:Name="myEllipse" Height="200" Width="200" Canvas.Left="30" Canvas.Top="80" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas> [隐藏 JavaScript] function changeEllipseColor2() { var sl9 = document.getElementById("sl9"); sl9.content.findName("myEllipse").fill = "red"; } [隐藏] [重新开始] In the previous example,
// Retrieve the div element you created in the previous step.
var mySilverlightPluginHost = document.getElementById("sl9Host");
createMySilverlightPlugin();
Silverlight.createObject(
"sl9.xaml",
sl9Host,
"sl9",
{
width:'300',
height:'300',
inplaceInstallPrompt:false,
background:'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'1.0'},
{onError:null, onLoad:null},
null);
Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices. 千一网络 译 |