Partilhar via

Control media using triggers in a timeline

  • Artigo

This page applies to WPF projects only

A media element can contain a reference to an audio file (such as a WAV file) or a video file (such as a WMV file). You can use event triggers in an animation timeline to control media playback.

The following example shows you how to control video playback by triggering the video timeline when the mouse pointer enters and leaves the video viewing area. For more information about how to modify timelines, see Animation, Triggers and user interactivity, and Event handling and user interactivity. This example sets triggers on the MouseEnter and MouseLeave events of an object on the artboard. For a list of other events on which you can set triggers, see the WPF events quick reference.

Note

Triggers are not available in Microsoft Silverlight 1.0 projects. Additionally, when you add an audio or video file to a Silverlight 1.0 project, no timeline is created. For instructions about how to control storyboards in a Silverlight 1.0 project, see Control the playback of media in a Silverlight project.

Warning

To work with media in Microsoft Expression Blend, you must have Windows Media Player 10 installed on your computer. You can download Windows Media Player 10 from the Windows Media.

To control video playback with the mouse pointer

  1. To give more space to the Interaction panel in the Expression Blend workspace, switch to the Animation Workspace (F6). This action moves the Interaction panel under the artboard.

  2. Under Objects and Timeline, activate the object into which you want to add the video by double-clicking the object. For example, to add the video to the root of your application, double-click LayoutRoot.

  3. Add the video file to the artboard by first adding the video file to your project (CTRL+I), and then double-clicking the video file in the Project panel. A media element is created under Objects and Timeline with the Source property set to the path of your video file.

    • If a timeline was selected before you added the media file to the artboard, the media will be inserted into that timeline, and the media will be scheduled to start at the current playhead location.

    • If no timeline is selected, a new media timeline will be created and the media will be added to the new timeline starting at the 0-second mark.

    For a complete procedure that shows you how to add media to the artboard, see the topic Insert an image, audio, or video file into the active document.

  4. Under Triggers in the Interaction panel, a new event trigger has been added for the Window.Loaded event. Click Window.Loaded to see the action that is triggered by the Window.Loaded event. By default, the video timeline is started. We want to make the video play when the pointer is over the video viewing area, and stop when the pointer leaves the video viewing area. The first task is to pause the video as soon as it starts when the application window is loaded.

  5. Under Triggers, click the Add new action Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png button next to When Window.Loaded is raised. A second default action appears in the list, calling the timeline.Begin method.

  6. Click the method drop-down box and select Pause. The Interaction panel should resemble the following image. The video will now start and immediately pause when the application window is loaded.

    Adding another action to the Window.Loaded event trigger

    Cc294743.eb6a6c52-1702-4c26-a700-a8e7d92e06e5(en-us,Expression.10).png

  7. To connect the movie timeline to a mouse event, you must add a new event trigger. Click the Add event trigger Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(en-us,Expression.10).png button under Triggers. A new default event trigger appears in the list for when the Window.Loaded event is raised.

  8. Click the object drop-down list to change the selection from Window to the name of your media element. For example, in the previous image, the name of the media element is SampleMovie_wmv.

    Tip

    If you do not see the name of your media element, select it under Objects and Timeline and then try this step again.

  9. Click the method drop-down to change the selection from Loaded to MouseEnter. The MouseEnter event is in the UIElement category. The trigger should now read When element.MouseEnter is raised. No actions have been created yet.

    Tip

    If you are using an audio file instead of a video file, you can select the MouseEnter event for the media element that contains the video file. However, users will not know where to move their pointer because the media element will not be visible in your application. Alternatively, you can add a button to the artboard and create a trigger for the button's Click event.

  10. Click the Add new action Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png button next to When element.MouseEnter is raised. A default action appears in the list, calling the timeline.Begin method.

  11. The timeline was already started when the Window was loaded, so change the method to timeline.Pause. Now the movie will pause when the pointer moves across the viewing area.

  12. Add another event trigger (Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(en-us,Expression.10).png) and change it to read When element.MouseLeave is raised.

  13. Add a new action (Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png) calling the timeline.Resume method. Now the movie will continue playing when the pointer leaves the viewing area. Alternatively, you could have decided to stop and restart the movie instead of pausing and resuming.

    Adding MouseEnter and MouseLeave event triggers and actions to pause and resume the movie

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

  14. To make sure that video media resizes with the window, set the following properties in the Properties panel:

    • In the advanced section of the Media category of the Properties panel, set the Stretch property of your media element to Uniform. This setting preserves the aspect ratio of the video viewing area.

    • In the Layout category of the Properties panel, set the Width and Height of your media element to Auto. This setting allows the video viewing area to resize with the application window. If your video viewing area does not resize with the application window, see whether the media element is contained in a panel element that has a specific size.

  15. Test your application (F5). Watch the behavior of the movie viewing area when you move the pointer through it.

See also

Concepts

Create a button that controls a storyboard in a Silverlight application