创建具有交互功能的 Silverlight 1.0 站点

项目
10/11/2017

此页仅适用于 Silverlight 1 项目

Microsoft Silverlight 1.0 应用程序中的交互功能是用 XAML 文档（可用于设计用户界面）的 JavaScript 代码隐藏文件中的事件处理程序创建的。以下过程说明如何让应用程序播放动态显示的 Storyboard 以响应鼠标单击事件。

创建具有交互功能的 Silverlight 1 站点

在 Microsoft Expression Blend 中，单击“文件”菜单上的“新建项目”。

此时，将显示“新建项目”对话框。
在“选择项目类型”下，单击“Silverlight 1.0 站点”。其他字段将显示项目名称和位置的默认值。可以保留这些字段中的默认值不变，并单击“确定”。

此时将创建一个新的 Silverlight 项目，并打开启动页 Page.xaml 以供编辑。
从工具箱中选择“笔” 工具。通过单击来创建点并对其进行拖动以创建曲线，从而绘制出曲线形状。单击第一个点以闭合形状。

有关使用鼠标修改路径的方法列表，请参阅笔和路径选择的使用。
右键单击“对象和时间线”下的新路径对象，单击“重命名”，再输入名称“MyPath”。

如果打算从代码隐藏文件引用一个对象，则该对象需要一个名称。将需要在代码中引用此对象以便挂钩“Click”事件处理程序。
在“对象和时间线”下，单击“新建” 按钮。此时，将显示“创建 Storyboard”对话框。保留“名称”字段中的值“Storyboard1”并保持选中“创建为资源”复选框，然后单击“确定”。

此时，将新建一个 Storyboard 并打开时间线录制。
将时间线播放指针放置在 0 秒标记处，单击“记录关键帧”按钮以记录“MyPath”对象的当前位置。
将时间线播放指针移动到 1 秒标记处，然后使用“选择”工具来移动“MyPath”对象。将在 1 秒标记处设置一个关键帧来记录“MyPath”对象的新位置。
在“项目”面板中，双击“Page.xaml.js”文件以将其打开以供编辑。
通过移除 // 字符来取消对以下代码行的注释：
```
                // this.control.content.findName("Storyboard1").Begin();
```
Expression Blend 2 将生成初始 JavaScript 代码，以向您显示如何将一个事件处理程序与对根元素的鼠标按钮单击挂钩。该事件处理程序会调用 Storyboard1 的 Begin 方法，这正是前面创建 Storyboard 时不更改“名称”字段的原因。有关 Silverlight 1.0 脚本的详细信息，请参阅 Silverlight 脚本和鼠标事件（该链接可能指向英文页面）。
通过按 F5 并在浏览器窗口单击以触发动画 Storyboard 来测试 Silverlight 1.0 站点。