Essential Silverlight翻译连载---第五章 交互和事件处理

第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）

<Canvasxmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        MouseLeftButtonDown="mouseClick">

 <RectangleWidth="200"Height="75"Stroke="Orange"StrokeThickness="15"

             MouseLeftButtonDown="mouseClick" />

 <TextBlockFontFamily="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）

<Canvasxmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

 <RectangleWidth="200"Height="75"Stroke="Orange"StrokeThickness="15" />

 <TextBlockFontFamily="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';

}