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;}

重新开始隐藏内容 公有鼠标事件　　UIElement对象提供了一些不同的鼠标事件供您响应：MouseLeftButtonDown、MouseLeftButtonUp、MouseEnter（在鼠标进入元素时触发）、MouseLeave和MouseMove（鼠标在元素内移动时触发）。鼠标事件在触发之后，能够从args对象的x和y中获得鼠标的位置。　　下面的例子响应了这些鼠标事件，以改变Ellipse的属性。

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">       <Ellipse x:Name="e1"        MouseMove="javascript:e1Move"        MouseEnter="javascript:e1Enter"        MouseLeave="javascript:e1Leave"        MouseLeftButtonDown="javascript:e1Down"        MouseLeftButtonUp="javascript:e1Up"        Height="100" Width="100"        Canvas.Left="80" Canvas.Top="30"        Stroke="Black" Fill="LightBlue"        StrokeThickness="10" /></Canvas>

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";}

重新开始隐藏内容　　另一个非常有用的事件是Loaded事件。通常您会在根元素里声明响应该事件，但是Loaded事件可以在任何UIElement上响应。Loaded事件提供了一个非常好的机会，可以让您在WPF/E控件显示的最后进行一些最后的改变。下面的例子响应了Loaded事件，将Ellipse的Fill属性从Blue改成Red。

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Ellipse Loaded="javascript:ellipse_loaded"        Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"        Stroke="Black" StrokeThickness="10" Fill="LightBlue"/></Canvas>

function ellipse_loaded(sender, args) {    sender.Fill = "Red";}

重新开始隐藏内容 为对象命名并重新获取它们　　在之前的示例中，我们使用了JavaScript来修改发起事件的对象，但是如果您需要调用的方法或者修改的属性是属于其它对象的呢？WPF/E元素提供了一个方法叫做findName，可以使您获得子元素。在使用findName获得对象之前，您必须使用x:Name属性在申明XAML时为对象提供一个名字。　　下面的示例在鼠标点击Canvas时修改了Ellipse的Fill属性。当Canvas发起事件时，changeEllipseColor函数被调用，sender是Canvas对象。该函数调用了sender.findName()函数获得了myEllipse对象，并且将它的Fill属性设为了红色。

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Background="Transparent"    MouseLeftButtonDown="javascript: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>

function changeEllipseColor(sender, args) {    sender.findName("myEllipse").Fill = "red";}

重新开始隐藏内容　　当您编写的脚本代码并不是被WPF/E元素的事件触发时（例如一个普通的HTML事件），您就无法得到一个sender参数，用来使用findName以获得一个WPF/E对象了。在这个情况下，您可以使用document.getElementById()来获得WPF/E的ActiveX控件，然后可以使用ActiveX控件的findName方法。

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Background="Transparent"    MouseLeftButtonDown="javascript: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>

function changeEllipseColor2(sender, args) {    var ag6 = document.getElementById("ag6");    ag6.findName("myEllipse").fill = "red";}

重新开始隐藏内容　　在之前的例子里，ag6是您在HTML页面中创建WPF/E的ActiveX控件时，传入new agHost()ID，例如在文档中“第一部分：创建一个WPF/E项目”描述的那样：

<script language="javascript">    // 创建一个WPF/E的ActiveX控件，这里的    // 方法使您的WPF/E的内容在这个ActiveX控件    // 被点击之前就创建完毕。    new agHost(       // 用于插入WPF/E ActiveX控件的元素，一般会使用        // DIV元素，如果您在上一步改变了HTML元素的ID，        // 您在这里也必须相应的改变。        "agControl1Host",       // WPF/E ActiveX控件的ID       "ag6",        // 控件宽度        "300px",        // 控件高度        "300px",        // 控件的背景色        "#D6D6D6",        // 源元素（存放XAML内容的Script标签）        null,        // 存放WPF/E内容的XAML文件的URI        "myxaml.xaml",        // 是否是无窗的        "false",        // 最大帧率（Frame Rate）        "30",       // 处理错误的Handler，        // 您能够将其设为一个方法的引用。        null    );</script>

　　您可以在创建了ActiveX控件之后使用下面的代码，这使您能在以后不必再次获得ActiveX控件了。

// 方便起见，为WPF/E的ActiveX控件创建一个全局变量// 它能让我们调用findName方法。var ag6 = document.getElementById("ag6");

动态创建WPF/E对象　　您可以使用createFromXaml方法使用JavaScript来创建一个新的WPF/E对象。下面的示例在Canvas对象被鼠标左键被点击时，创建并添加了一个新的Ellipse对象。

<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:createEllipse">        <TextBlock Text="click for circle"  FontSize="40"/></Canvas>

function createEllipse(sender, args) {    var agControl = document.getElementById("ag7");    var e = agControl.createFromXaml(        '<Ellipse Height="200" Width="200" Fill="Blue"/>');    var canvas = sender;    canvas.children.Add(e);}

重新开始隐藏内容　　请注意，JavaScript需要您将字符串放在同一行中，除非您用+连接多个字符串。还要注意的是在这里XAML单引号和双引号的使用：使用单引号来表示JavaScript字符串，在XAML字符串中使用双引号。 交互地控制动画　　您可以使用Event Handler来控制动画。将您希望控制的Storyboard给定一个名字，这样您就可以使用它的begin、stop、pause和resume方法来交互式地控制动画。

<Storyboard x:Name="animation"    Storyboard.TargetName="e1"    Storyboard.TargetProperty="(Canvas.Left)"    BeginTime="1">    <DoubleAnimation RepeatBehavior="Forever" To="300"/></Storyboard>

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();}

重新开始隐藏内容 下面该做什么呢？　　在下一部分“示例控件”中，您会看到几个例子，展示了如何使用WPF/E来创建交互式的控件。　　UIElement对象提供了一些不同的鼠标事件供您响应：MouseLeftButtonDown、MouseLeftButtonUp、MouseEnter（在鼠标进入元素时触发）、MouseLeave和MouseMove（鼠标在元素内移动时触发）。鼠标事件在触发之后，能够从args对象的x和y中获得鼠标的位置。　　下面的例子响应了这些鼠标事件，以改变Ellipse的属性。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <Ellipse x:Name="e1"
        MouseMove="javascript:e1Move"
        MouseEnter="javascript:e1Enter"
        MouseLeave="javascript:e1Leave"
        MouseLeftButtonDown="javascript:e1Down"
        MouseLeftButtonUp="javascript:e1Up"
        Height="100" Width="100"
        Canvas.Left="80" Canvas.Top="30"
        Stroke="Black" Fill="LightBlue"
        StrokeThickness="10" />
</Canvas>

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";
}

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Ellipse Loaded="javascript:ellipse_loaded"
        Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
        Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

function ellipse_loaded(sender, args) {
    sender.Fill = "Red";
}

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Transparent"
    MouseLeftButtonDown="javascript: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>

function changeEllipseColor(sender, args) {
    sender.findName("myEllipse").Fill = "red";
}

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Transparent"
    MouseLeftButtonDown="javascript: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>

function changeEllipseColor2(sender, args) {
    var ag6 = document.getElementById("ag6");
    ag6.findName("myEllipse").fill = "red";
}

<script language="javascript">
    // 创建一个WPF/E的ActiveX控件，这里的
    // 方法使您的WPF/E的内容在这个ActiveX控件
    // 被点击之前就创建完毕。
    new agHost(
       // 用于插入WPF/E ActiveX控件的元素，一般会使用
        // DIV元素，如果您在上一步改变了HTML元素的ID，
        // 您在这里也必须相应的改变。
        "agControl1Host",
       // WPF/E ActiveX控件的ID
       "", 
       // 控件宽度
        "300px", 
       // 控件高度
        "300px", 
       // 控件的背景色
        "#D6D6D6", 
       // 源元素（存放XAML内容的Script标签）
        null, 
       // 存放WPF/E内容的XAML文件的URI
        "myxaml.xaml", 
       // 是否是无窗的
        "false", 
       // 最大帧率（Frame Rate）
        "30",
       // 处理错误的Handler，
        // 您能够将其设为一个方法的引用。
        null
    );
</script>

　　您可以在创建了ActiveX控件之后使用下面的代码，这使您能在以后不必再次获得ActiveX控件了。

// 方便起见，为WPF/E的ActiveX控件创建一个全局变量
// 它能让我们调用findName方法。
var ag6 = document.getElementById("ag6");

<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:createEllipse">
    
    <TextBlock Text="click for circle"  FontSize="40"/>
</Canvas>

function createEllipse(sender, args) {
    var agControl = document.getElementById("ag7");
    var e = agControl.createFromXaml(
        '<Ellipse Height="200" Width="200" Fill="Blue"/>');
    var canvas = sender;
    canvas.children.Add(e);
}

<Storyboard x:Name="animation"
    Storyboard.TargetName="e1"
    Storyboard.TargetProperty="(Canvas.Left)"
    BeginTime="1">
    <DoubleAnimation RepeatBehavior="Forever" To="300"/>
</Storyboard>

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();
}

重新开始隐藏内容 下面该做什么呢？　　在下一部分“示例控件”中，您会看到几个例子，展示了如何使用WPF/E来创建交互式的控件。