在 Silverlight 应用程序中创建控制 Storyboard 的按钮

在 Microsoft Silverlight 1.0 应用程序中创建一个按钮需要涉及以下工作：绘制构成按钮的元素，在一个版式面板中封装这些元素以便于复制，并编写在发生按钮事件（例如当某人单击按钮）时将执行某操作的 JavaScript 代码。

说明：
有关使用多个按钮事件的完整示例，请参阅“ButtonGallery”示例。通过单击“帮助”菜单上的“欢迎屏幕”，然后单击“示例”选项卡上的“ButtonGallery”，可以打开该示例。

绘制按钮元素

您可以使用任何元素来创建按钮的外观，包括形状、线条、文本和图像。下面的过程描述了如何绘制矩形和文本块，不过向 Silverlight 项目的 XAML 文档中添加元素主题中列出的任一过程均可使用。

绘制按钮元素

1. 在 Microsoft Expression Blend 2 中打开 Silverlight 1.0 项目，从“工具箱”中选择“矩形”工具。

   

   如果未显示“矩形”工具，请右键单击工具容器以找到并选择“矩形”工具。

   

2. 通过拖动指针在美工板上绘制矩形。在绘制过程中，指针将变成十字形光标 。

   

3. 在“对象和时间线”下选定新的矩形元素，更改其外观。例如，在“属性”面板中的“画笔”下，单击“渐变画笔” 选项卡上的“填充”，然后定义梯度停止点的颜色。

   

   说明：
   通过使用外观和转换中的过程，可以进一步更改矩形的外观。

4. 从“工具箱”中选择“TextBlock”控件。

   

5. 在矩形的上面绘制文本块元素。可能需要从“工具箱”中选择“选择” 工具，并在美工板上拖动元素周围的蓝色修饰工具，以此来调整矩形或文本块元素的大小或移动它们。

   

6. 在“对象和时间线”下选定新的文本块元素，按 F2 进入文本编辑模式，然后键入Button来更改元素中显示的文本。单击文本块元素的外部区域以退出文本编辑模式。

   说明：
   有关如何修改文本块的外观的详细信息，请参阅文本和版式下的主题。

7. 为了使按钮的外观更为精美，可以按照向 Silverlight 项目的 XAML 文档中添加元素中列出的过程进行操作，在美工板上绘制更多元素。

返回页首

在版式面板中封装按钮元素

通过将按钮元素封装到单个版式面板（Canvas 元素）中，可以简化复制按钮的过程。这是因为您可以直接复制并粘贴该版式面板，而不用选择构成按钮的所有元素然后复制它们。此外，将按钮元素封装在“画布”版式面板中还进一步简化了创建有关按钮事件处理程序的工作。例如，您可以创建一个事件处理程序以便在指针移过整个版式面板时进行响应，而不是在指针移过按钮的某个部分时进行响应。

在版式面板中封装元素

1. 在“对象和时间线”下，在按住 Ctrl 键的同时选择构成按钮的所有元素。

2. 右键单击选定的元素，指向“分组”，然后单击“Canvas”。

   

3. 在“对象和时间线”下右键单击新的画布元素，单击“重命名”，输入按钮的新名称（例如“MyButton”），然后按 Enter。

   现在，当需要复制按钮时，就可以复制并粘贴“MyButton”元素。

返回页首

创建动画 Storyboard 以更改按钮的外观

通常，当用户单击应用程序中的按钮时，该按钮会出现变化。下面的过程描述了如何创建一个使按钮元素展开的动画 Storyboard。

说明：
您可以为应用程序中的任何元素创建动画，而不仅仅局限于属于按钮的元素。例如，您可以创建一个小圆圈，使其在单击按钮后将按钮圈绕起来。

创建动画 Storyboard

1. 在“对象和时间线”下，单击“新建” 按钮。

   

   此时，将打开“创建 Storyboard”对话框。

   

2. 默认情况下，Storyboard 的“名称”为“Storyboard1”。保留“Storyboard1”名称，因为下一过程中的代码将引用该名称。

3. 默认情况下，将会选中“创建为 Storyboard”复选框。请不要清除该复选框，因为您不希望在浏览器窗口中加载应用程序后立即运行动画，而是希望通过代码对动画进行完全控制（启动和停止）。

4. 单击“确定”。

   Expression Blend 将创建 Storyboard 并进入动画模式。

   

   说明：
   您可以选择按 F6 来更改“交互”面板的位置。当“交互”面板位于美工板之下时，您可以查看更多的时间线。

5. 在“对象和时间线”下，选择“MyButton”元素。

6. 在时间线的上面，单击“记录关键帧” 按钮。

   此时，将设置一个新的关键帧来记录按钮元素的当前外观。

7. 将时间线播放指针 移到半秒标记处（动画的结束时间），然后再次单击“记录关键帧” 按钮。

   此时，将设置一个新的关键帧来记录按钮元素的当前外观。在动画的结尾，按钮将类似于下面的图像。

   

8. 将时间线播放指针 移到四分之一秒标记处。这是您创建按钮的外观变化的位置。

   说明：
   如果无法将时间线正好移动到四分之一秒标记处 (0:00.250)，则是因为对齐分辨率太低。若要增大对齐分辨率，请单击“对齐选项” 按钮，将“每秒对齐分辨率”设置为 20，然后单击“确定”。

9. 将时间线播放指针放置在四分之一秒标记处并选定“MyButton”元素，在美工板上更改按钮的大小。通过在按住 Alt 键（以保持中心点）的同时拖动右下角的调整大小控点可以做到这一点。

   

   在时间线上的四分之一秒标记处会自动添加新的关键帧以记录按钮的新的大小和位置。请注意，在“对象和时间线”下已添加一个“RenderTransform”元素来指定按钮的新的大小（“缩放”）和新的位置（“转化”），并在“MyButton”上以前设置关键帧的位置为这些元素添加了关键帧。Expression Blend 假定您要利用“MyButton”上设置的开始关键帧和结束关键帧来播放动画。因此，它将在“RenderTransform”元素上设置开始关键帧和结束关键帧。

10. 单击“播放” 按钮来测试动画。

11. 通过单击“关闭 Storyboard” 按钮来退出动画模式。这将确保现在对元素所做的任何更改都不是动画 Storyboard 的一部分。

12. 保存所有文件。

返回页首

创建事件处理程序以在单击按钮时触发动画 Storyboard

可以在代码隐藏文件中完成注册事件处理程序和编写事件处理程序代码的所有工作。这使编程人员和设计人员能够分头工作，并且可以很轻松地将完成的应用程序呈现和代码进行合并。此外，编程人员通过将代码添加到事件处理程序中，可以在单击按钮时导致发生其他操作，例如导航到某个网页。有关示例，请参阅在 Silverlight 应用程序中创建超链接。

创建事件处理程序

1. 在“项目”选项卡上，双击 Page.xaml.js 代码隐藏文件以将其打开进行编辑。

   Page.xaml.js 文件已包含以下 JavaScript 代码：

   • “Page”对象的定义。

   • MouseLeftButtonDown 事件的注册。

   • MouseLeftButtonDown 事件的事件处理程序的定义。

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   说明：
   有关 Microsoft Silverlight 中的 JavaScript 和对象结构的信息，请参阅脚本编写和鼠标事件（此链接可能指向英文页面）。

2. 用于在单击鼠标左键时调用 Storyboard 的代码已经存在，但已用双反斜线 (//) 注释掉。

                   // this.control.content.findName("Storyboard1").Begin();
   

   移除双反斜线可取消对代码的注释。

   this.control.content.findName("Storyboard1").Begin();
   

3. 保存所有文件。

4. 通过单击“项目”菜单上的“测试项目”或按 F5 来测试项目。

   如果测试生成获得成功，则会使用 Microsoft Expression Studio 附带的本地开发服务器自动在默认 Web 浏览器中打开项目。有关如何测试 Silverlight 项目的详细信息，请参阅从 Expression Blend 测试 Silverlight 项目。

   单击按钮以查看是否触发 Storyboard。请注意，单击浏览器内部的任意位置也会触发 Storyboard。这是因为事件处理程序是在根元素 (Page) 范围内注册的。

5. 通过在注册事件处理程序的代码行的前面添加双反斜线将其注释掉，使其类似于以下形式：

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. 在已注释掉的代码行后面添加下面的代码行：

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   请注意，这两行代码之间的唯一区别是事件处理程序注册到的元素。在已注释掉的行中，事件处理程序是在 rootElement 上注册的。在您贴入的行中，事件处理程序是在 MyButton 元素上注册的（通过使用 findName 方法来定位该元素）。

7. 再次保存所有文件。

8. 通过单击“项目”菜单上的“测试项目”或按 F5 来测试项目。

   单击按钮，然后单击远离按钮的位置，以确认只有在单击按钮时才会触发动画 Storyboard。

返回页首

另请参见

概念

从 Expression Blend 测试 Silverlight 项目