通过

在时间线中使用触发器控制媒体

  • 项目

此页仅适用于 WPF 项目

媒体元素可以包含对音频文件（如 WAV 文件）或视频文件（如 WMV 文件）的引用。您可以在动画时间线中使用事件触发器来控制媒体的播放。

以下示例显示了如何通过在鼠标指针进入和离开视频查看区时触发视频时间线来控制视频的播放。有关如何修改时间线的详细信息，请参阅动画、触发器与用户交互性和事件处理和用户交互。在本示例中，将为美工板上的对象的“MouseEnter”和“MouseLeave”事件设置触发器。有关可为其设置触发器的其他事件的列表，请参阅 WPF 事件快速参考。

Cc294743.alert_note(zh-cn,Expression.10).gif说明：

Microsoft Silverlight 1.0 项目中不提供触发器。此外，向 Silverlight 1.0 项目添加音频或视频文件时，不会创建任何时间线。有关如何控制 Silverlight 1.0 项目中的 Storyboard 的说明，请参阅控制 Silverlight 项目中的媒体播放。
Cc294743.alert_caution(zh-cn,Expression.10).gif警告：

若要在 Microsoft Expression Blend 中使用媒体，必须在计算机上安装 Windows Media Player 10。可以从 Windows Media（此链接可能指向英文页面）下载 Windows Media Player 10。

用鼠标指针控制视频播放

  1. 若要增大 Expression Blend 工作区中的“交互”面板的空间，请切换到“动画工作区”(F6)。此操作可将“交互”面板移到美工板的下面。

  2. 在“对象和时间线”下，双击要向其中添加视频的对象以将其激活。例如，若要将视频添加到应用程序的根位置，请双击“LayoutRoot”。

  3. 先将相应的视频文件添加到项目中 (Ctrl+I)，然后在“项目”面板中双击该视频文件，从而将该视频文件添加到美工板上。将在“对象和时间线”下创建一个媒体元素，并将该元素的“Source”属性设置为该视频文件的路径。

    • 如果先选择了时间线，然后再将媒体文件添加到美工板上，则会将该文件插入所选的时间线中，而且该媒体将预定从播放指针的当前位置开始播放。

    • 如果未选择时间线，将会创建一条新的媒体时间线，并且会在新时间线中从 0 秒标记处的位置开始添加媒体。

    有关显示如何将媒体添加到美工板的完整过程，请参阅主题在活动文档中插入图像、音频或视频文件。

  4. 在“交互”面板中的“触发器”下，已为“Window.Loaded”事件添加了新的事件触发器。单击“Window.Loaded”可查看“Window.Loaded”事件所触发的操作。默认情况下，将启动视频时间线。我们希望在鼠标指针进入视频显示区时播放视频，并在鼠标指针离开视频显示区时停止播放。第一项任务是在加载完应用程序窗口之后，一旦启动视频就立即将其暂停。

  5. 在“触发器”下，单击“在引发 Window.Loaded 时”旁边的“添加新操作”Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png 按钮。列表中将显示第二项默认操作，该操作调用“timeline.Begin”方法。

  6. 单击方法下拉框并选择“Pause”。“交互”面板应类似于下图。此时，视频会在加载应用程序窗口后启动并立即暂停。

    向 Window.Loaded 事件触发器添加其他操作

    Cc294743.eb6a6c52-1702-4c26-a700-a8e7d92e06e5(zh-cn,Expression.10).png

  7. 若要使影片时间线与鼠标事件关联，必须添加新的事件触发器。单击“触发器”下的“添加事件触发器”Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(zh-cn,Expression.10).png 按钮。列表中将显示一个新的默认事件触发器，该触发器在引发“Window.Loaded”事件时触发。

  8. 单击对象下拉列表，以便将选定项从“Window”更改成媒体元素的名称。例如，在上图中，媒体元素的名称为“SampleMovie_wmv”。

    Cc294743.alert_tip(zh-cn,Expression.10).gif提示：

    如果未看到媒体元素的名称，请在“对象和时间线”下选择该媒体元素，然后再次尝试此步骤。

  9. 单击方法下拉列表，以将选定项从“Loaded”更改为“MouseEnter”。“MouseEnter”事件位于“UIElement”类别中。此时，该触发器应显示为“在引发 element.MouseEnter 时”。任何操作都尚未创建。

    Cc294743.alert_tip(zh-cn,Expression.10).gif提示：

    如果使用的是音频文件而不是视频文件，也可以为包含视频文件的媒体元素选择“MouseEnter”事件。不过，用户将不知道向何处移动鼠标指针，因为该媒体元素并不显示在应用程序中。另外，您也可以向美工板上添加按钮，并为按钮的 Click 事件创建触发器。

  10. 单击“在引发 element.MouseEnter 时”旁边的“添加新操作”Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png 按钮。列表中将显示默认操作，该操作调用“timeline.Begin”方法。

  11. 在加载 Window 时，时间线即已启动，因此将该方法改为“timeline.Pause”。此时，影片将在鼠标指针移过显示区时暂停。

  12. 添加另一个事件触发器 (Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(zh-cn,Expression.10).png)，并将其改为“在引发 element.MouseLeave 时”。

  13. 添加新操作 (Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png)，调用“timeline.Resume”方法。此时，影片将在鼠标指针离开显示区时继续播放。此外，可以选择停止并重新启动影片，而不是暂停后继续播放。

    添加 MouseEnter 和 MouseLeave 事件触发器和操作，以便暂停和继续播放影片

    Cc294743.526e02a2-01a7-429f-88c4-d7532257c802(zh-cn,Expression.10).png

  14. 若要确保视频媒体的大小随着窗口调整，请在“属性”面板中设置下列属性：

    • 在“属性”面板的“媒体”类别的高级部分中，将媒体元素的“Stretch”属性设置为“Uniform”。此设置可保留视频显示区的纵横比。

    • 在“属性”面板的“布局”类别中，将媒体元素的“Width”和“Height”设置为“Auto”。此设置可令视频显示区的大小能够随着应用程序窗口调整。如果视频显示区的大小并没有随着应用程序窗口进行调整，请检查该媒体元素是否包含在具有特定大小的面板元素中。

  15. 测试应用程序 (F5)。在鼠标指针移过影片显示区时，观察该区域的行为。

另请参见

概念

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