WPF/E CTP Quick Start - 第十部分：脚本和鼠标事件（翻译）

　　WPF/E支持使用JavaScript进行编程，能够使您为WPF/E内容增加交互性。

　　这篇文档包含了如下部分：

• 脚本与事件 
• 设置属性 
• 设置附加属性 
• 为对象命名并重新获取它们 
• 动态创建WPF/E对象 
• 交互地控制动画 
• 下面该做什么呢？

 

脚本与事件

　　WPF/E能够让您在事件触发时执行JavaScript代码，例如一个对象被加载之后，或者鼠标进入了一个对象。这样的脚本被称之为“Event Handler”。

　　为了定义一个“Event Handler”，您需要执行以下两步：

• 在一个XAML文件里，添加下面的属性，使对象能够触发您的函数。
  someEvent="javaScript:myFunction"
  其中someEvent是您希望响应的事件名，而myFunction是您希望处理该事件的函数。
• 在您的JavaScript文件中定义该函数。（关于建立一个JavaScript文件，请参照《WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目》。）

　　让我们来尝试写一个示例。在WPF/E中，所有的 Canvas和形状元素都有一个事件叫做 MouseLefButtonDown，它会在用户鼠标在元素之上，并且左键被按下时被触发。让我们来为这个事件写一个Event Hander，调用JavaScript的alert函数来创建一个对话框。

<Canvas Height="300" Width="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="transparent"
    MouseLeftButtonDown="javascript:helloworld">
   
    <TextBlock Text="click me"  FontSize="50"/>
</Canvas>

function helloworld() {
    alert("hello world");
}

重新开始 隐藏内容

　　您在声明一个Event Handler时不需要指定参数，但是如果您确实需要的话，您可以使用第一个参数“sender”作为触发事件的元素，而第二个参数“args”是一个包含了事件信息的对象。

 

设置属性

　　您可以使用JavaScript来设置WPF/E对象的属性。当一个属性为一个字符串或一个数字时，您可以简单地使用JavaScirpt设置它。如果属性为一个WPF/E对象，但是它有个类型转换器，例如一个 SolidColorBrush，您可以用字符串形式来设置它。否则，您必须使用 createFromXaml方法来实例化一个新的属性值。

　　下面的例子响应了 Canvas的 MouseLeftButtonDown事件。在这个Event Handler中，通过sender参数访问了 Canvas对象。在示例中将 Canvas的 Background属性设为了红色，并且显示了它的 Height属性。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Transparent"
    MouseLeftButtonDown="javascript:changecolor">
   
    <TextBlock Text="click me"  FontSize="50"/>
</Canvas>

function changecolor(sender, args) {
    sender.background = "red";

    alert("Height is " + sender.Height);
}

重新开始 隐藏内容

 

设置附加属性

　　如果要使用JavaScript设置一个附加属性，例如 Canvas.Top，您可以使用下面的语法：

　　object[attachedPropertyName] = value;

　　其中attachedPropertyName您想设置的附加属性的名称。

　　下面的示例在左键被点击之后，将设置 TextBlock的 Canvas.Top属性设为了70。

<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="javascript:changelocation" />
</Canvas>

function changelocation(sender, args) {
    
    sender["Canvas.Top"] = 70;
}

重新开始 隐藏内容

 

公有鼠标事件