第5章 交互和事件处理
Silverlight交互
声明式语言表示XAML提供了很多可能,包括创建所有类型的形状(见第4章),动画元素(见第6章),播放声音视频数据(见第7章)。但如果您在Silverlight中加入少量JavaScript代码,将会释放出它的真实的力量。JavaScript本身是一个强大的语言,但开发者也可以在Silverlight中使用JavaScript API。本书第三部分,特别是第8章,将更详细地讲述JavaScript访问。虽然本书主要关注的是声明式语言XAML,但没有脚本,很多事将不能做。
这一章解释Silverlight事件处理。特别是什么是事件,怎么获取和处理它们。大部份的事件处理代码都以“XAML code-behind”的方式存在于Filename.xaml.js文件中。从技术手段上来说,javaScript代码可以放置在任何JavaScript文件中,只需要在主HTML文件中通过<
script>标签来引用就行了。如果在.xaml.js文件中使用触发XAML的JavaScript代码,而在html.js文件中加入触发JavaScript代码的HTML页面,就可以使应用程序更易于打包和开发。
大部份的文件清单最少有三个文件---HTML文件,XAML文件,一个或多个JavaScript文件。部分文件的内容总是很相似,例如createSilverlight()方法的代码。从下一个例子开始,我们将调整内含的XAML文件的,将不再给出createSilverlight()方法的代码。就好象之前没有给出HTML文件的代码一样。尽管如此,您也可以在本书配套的代码(
http://www.oreilly.com/catalog/9780596516116)中找到例子的完整代码。
提示:如果对
HTML,XAML和JavaScript文件的作用有任何疑问,请复习第2章的基本概念。
事件和事件处理
Silverlight事件是当Silverlight应用程序运行时会发生某些事情。这些事情可能是鼠标单击,鼠标移动,键盘输入,应用程序接受或失去焦点,应用程序开始完全载入或是其他类似的事情。所有事件依赖于一个对象,这样不管鼠标指针在矩形之上还是文本之上,单击时都会有所不同。
Silverlight现在支持超过24个事件,将来的版本可能会更多。本章只关心最重要的一些事件,并提供之前不曾提及到的事件的相关背景知识。
事件处理是一个代码块,在事件发生(或叫触发)时被执行。这里所说的事件和事件处理和HTML中的JavaScript事件概念非常接近。
声明事件处理
有两种途径给一个事件分配一个事件处理---使用声明式方法或使用代码。让我们从第一个选项开始,并使用鼠标事件。Silverlight支持几种鼠标事件,其中之一是用户单击鼠标左键时发生的
MouseLeftButtonDown(在鼠标被释放前发生)。
让我们回顾一下第二章的第一个例子“Hello World”,它包含了三个元素,外层的<
Canvas>,一个<
Rectangle>和一个<
TextBlock>。我们给这三个元素添加事件处理。添加一个事件处理非常容易:添加一个和事件名称相同的属性(在此例中,使用
LeftMouseButtonDown而不是JavaScript中的
OnLeftMouseButtonDown)。这个属性的值是JavaScript的方法名称。当事件触发时将调用这个方法一次。例5-1显示了这个包括三个事件处理的XAML文件:
例5-1
使用事件处理,XAML
文件(MouseClick.xaml
)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
MouseLeftButtonDown
=
"mouseClick">
<
Rectangle
Width
=
"200"Height="75"Stroke="
Orange
"StrokeThickness="15"
MouseLeftButtonDown
=
"mouseClick" />
<
TextBlock
FontFamily
=
"Arial"FontSize="32"Canvas.Left="30"Canvas.Top="20"
Foreground
=
"Black"Text="Silverlight"
MouseLeftButtonDown
=
"mouseClick" />
</
Canvas
>
JavaScript事件处理方法存在于MouseClick.js.xaml文件内,它象ASP.NET事件处理方法一样接收两个参数:
sender
接收到事件的那个对象的引用,并会调用事件处理。
eventArgs
事件的信息,例如,当处理一个鼠标事件时,可以得到当前鼠标的位置。简单的事件处理方法所做的是显示哪个元素触发了事件。为了实现这个功能,需要使用到
sender参数的字符串表达。例如,当<
TextBlock>元素触发了事件,
sender.toString()所返回的是
TextBlock。例5-2中的.xaml.js文件中的“XAML code-behind”代码演示了这项功能。
例5-2
使用事件处理,XAML JavaScript
文件(MouseClick.xaml.js
)
function mouseClick(sender, eventArgs)
{
alert('Ouch, says ' + sender.toString() + 'l');
}
现在,当您单击文本块时,将会弹出两个JavaScript窗口:一个是文本块的,另一个是canvas的(图5-1)。这叫做“事件浮升机制”。无论何时,当一个元素接收到一个事件,它会把事件向上传播到父节点(在本例中,<
TextBlock>把事件传播给<
Canvas>)。如果父节点本身还有父节点,事件还会继续向上传播。这种机制和JavaScript在Explorer浏览器里的事件机制很相似,它经常用于嵌套的XAML结构,并且需要为几个对象添加事件处理。当然例5-1的这种机制是很少使用的,一般只给一个元素添加事件处理。
译者注:由于使用了XAML
的代码隐藏文件,所以这个例子需要的是四个文件,除了前面一章所讲的三个文件外,还多了一个xaml.js
文件。例5-2
所演示的就是这个文件。这样就需要在html
文件内多加一行代码引用这个文件。在html
文件中的
<script type="text/javascript" src="MouseClick.html.js"></script>
代码后面添加一行
<script type="text/javascript" src="MouseClick.xaml.js"></script>
这样就可以正常运行程序了。后面的例子也是这样处理。
当您想改变触发事件的对象时,把Sender属性赋给事件处理方法非常方便。 一般的规则是把每个属性(例如<Rectangle>对象的Foreground)暴露给JavaScript。实际上,当JavaScript试图访问属性时,Silverlight会从中截取这些请求并进行转换,使得Silverlight属性可以正确地被获取。这些请求不是大小写敏感的,您可以使用Foreground或foreground。本书使用驼峰命名法:Foreground变为foreground,FontSize变为fontSize。下面再介绍两个鼠标事件:MouseHover(当鼠标指针移动至元素的显示区域之上)和MouseLeave(当鼠标指针离开元素显示区域时)。例5-3创建了一个XAML文件,它使用了这两种事件,并指定了前景色。
例5-3 改变事件目录属性,XAML文件(MouseHover.xaml)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle
Width
=
"200"Height="75"Stroke="
Orange
"StrokeThickness="15" />
<
TextBlock
FontFamily
=
"Arial"FontSize="32"Text="Silverlight"
Canvas.Left
=
"30"Canvas.Top="20"
Foreground
=
"LightGray"MouseEnter="high"MouseLeave="low" />
</
Canvas
>
XAML的代码隐藏的JavaScript文件(例5-4)访问sender参数并设置foreguound属性。结果显示为文本首先显示为亮灰色,但当鼠标移动到它上面时,它会变为黑色。当鼠标离开文本显示区域时,它又变回为亮灰色。图5-2显示了文本的两种状态。
例5-4 改变事件目标属性,XAML JavaScript文件(MouseHover.xaml.js)
function
high(sender, eventArgs) {
sender.Foreground = 'Black';
}
function
low(sender, eventArgs) {
sender.Foreground = 'LightGray';
}
![](https://p-blog.csdn.net/images/p_blog_csdn_net/xushen8314/5.jpg)