Share via

Synchronize the starting times of animation and media timelines

  • Article

This page applies to WPF projects only

If a storyboard contains both media (video or audio) and animation timelines, the animation timelines might appear to start before the media timeline if the media timeline is delayed because of loading time. You can use the XAML SlipBehavior attribute to start all the timelines at the same time.

To synchronize the starting times of animation and media timelines

  1. In Blend for Visual Studio 2012, create some objects to animate. Any type of visual object will do, or you can use the procedure that is described in Draw a shape or path in your project.

  2. Create and open a storyboard. You can use the procedure that is described in Create, modify, or delete a storyboard.

  3. Animate your object by moving the timeline playhead 5626c9eb-40bb-450a-9ca1-3678e5abe429, and then modifying the object. You now have a storyboard that contains an animation timeline. Keep this storyboard open.

  4. Insert an audio file or video file into the artboard. You can use the procedure that is described in Insert an audio or video file into the active document. The media file is added to the storyboard in its own timeline.

  5. Press F5 to test your application. Notice if a small delay occurs between when the animation timeline starts and when the media file starts.

  6. Click the XAML view tab or the Split view tab so that you can see the XAML that defines what you see on the artboard.

    6077fdd4-d9ee-4372-9324-4e417771b3d6

  7. Locate the line of XAML for your storyboard. You can move your pointer to the top of the XAML file and then use the Find command (on the Edit menu) to search for the phrase "Storyboard." For example, if your storyboard is named Storyboard1, the line of XAML might resemble the following:

    <Storyboard x:Key="Storyboard1">

  8. Add a new attribute named SlipBehavior and set it to the string Slip. For example, after you make the change, your line of XAML code might resemble the following:

    <Storyboard SlipBehavior="Slip" x:Key="Storyboard1">

    Press F5 to test your application. Notice that all the timelines now begin at the same time.