ParallelTimeline.SlipBehavior Property

Gets or sets a value that specifies how this timeline will behave when one or more of its Timeline children slips.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

public SlipBehavior SlipBehavior { get; set; }
<object SlipBehavior="SlipBehavior" .../>

Property Value

Type: System.Windows.Media.Animation.SlipBehavior
A value that indicates how this timeline will behave when one or more of its Timeline children slips. The default value is Grow.

Identifier field

SlipBehaviorProperty

Metadata properties set to true

None

It is often desirable to synchronize animations and media. However, this is complicated by the fact that media playback can be delayed by loading or buffering making it difficult to reliably play an animation along with media. The SlipBehavior property is used to determine what happens when media and animations are played together. A value of Grow (default) specifies that animation timelines do not need to be synced and will play when specified regardless of the state of other media in the timeline. A value of Slip on the other hand, specifies that an animation will wait (slip) until media is ready to play. The diagrams below illustrate this behavior.

This Storyboard plays a video and an animation. When SlipBehavior is set to Grow and the Duration property of the Storyboard is set to Automatic, the Storyboard grows to play all media and animations.

Diagram: Key for SlipBehavior diagramDiagram: SlipBehavior property value of Grow

This Storyboard has a SlipBehavior of Grow and a Duration of 5 seconds which gives media and animations 5 seconds to play regardless of how much they slip.

Diagram: SlipBehavior property value of Grow

This Storyboard has a SlipBehavior of Slip. Note that the DoubleAnimation (and any other non-media children of the Storyboard) does not progress unless the media timeline is also progressing. If the media takes a while to load, or if it is buffering, the animation will wait (slips) with it. This allows animations to synchronize with a single media file.

SlipBehavior diagram for media and animation

This Storyboard has a SlipBehavior of Slip and a Duration of 5 seconds. In this scenario, the media file and animation are guaranteed to play for 5 seconds.

Diagram: SlipBehavior property of a Storyboard

This example shows how to play media and animations at the same time by using the MediaTimeline and DoubleAnimationUsingKeyFrames classes in the same Storyboard.

You can use one or more MediaTimeline objects in a Storyboard together with other Timeline objects, such as animations.

The following example sets the SlipBehavior property of the Storyboard to a value of Slip, which specifies that the animation does not progress until the media (video in this example) progresses. This functionality might be needed if media playback is delayed because of loading time.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

    <!-- Upper right hand Canvas contains the animations. -->
    <Border BorderBrush="Black" BorderThickness="1"  Canvas.Left="250">
      <Canvas Width="250" Height="250" Background="White" >

        <!-- The two Path elements below create the purple and gold rings
             which are animated while the media is played. -->
        <Path Stroke="Purple" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry" 
            Center="125,125" RadiusX="15" RadiusY="10" />
          </Path.Data>
        </Path>
        <Path Stroke="Gold" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry2" 
            Center="125,125" RadiusX="10" RadiusY="15" />
          </Path.Data>
        </Path>
      </Canvas>
    </Border>

    <!-- Upper left hand Canvas contains the video. -->
    <Canvas Width="250" Height="250" Background="Green">
      <MediaElement Name="myvideo" Width="250" Height="250" 
       Canvas.Left="0" Canvas.Top="0">
        <MediaElement.Triggers>
          <EventTrigger RoutedEvent="MediaElement.Loaded">
            <EventTrigger.Actions>
              <BeginStoryboard>

                <!-- This Storyboard contains both media (video in this example) and animations. Note 
               the SlipBehavior value of "Slip" specifies that the animation does not progress
               until the media progresses. This might be desirable if media playback is delayed
               because of loading time. -->
                <Storyboard SlipBehavior="Slip">

                  <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
                  <MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>

                  <!-- The animations below animate the ellipses in the right hand pane. These animations are 
                 timed to correspond to the counting in the video. -->

                  <!-- Animate the RadiusY property of the purple ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry"
                    Storyboard.TargetProperty="RadiusY"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                  <!-- Animate the RadiusX property of the gold ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry2"
                    Storyboard.TargetProperty="RadiusX"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </MediaElement.Triggers>
      </MediaElement>
    </Canvas>

  </Canvas>
</Page>
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

    <!-- Upper right hand Canvas contains the animations. -->
    <Border BorderBrush="Black" BorderThickness="1"  Canvas.Left="250">
      <Canvas Width="250" Height="250" Background="White" >

        <!-- The two Path elements below create the purple and gold rings
             which are animated while the media is played. -->
        <Path Stroke="Purple" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry" 
            Center="125,125" RadiusX="15" RadiusY="10" />
          </Path.Data>
        </Path>
        <Path Stroke="Gold" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry2" 
            Center="125,125" RadiusX="10" RadiusY="15" />
          </Path.Data>
        </Path>
      </Canvas>
    </Border>

    <!-- Upper left hand Canvas contains the video. -->
    <Canvas Width="250" Height="250" Background="Green">
      <MediaElement Name="myvideo" Width="250" Height="250" 
       Canvas.Left="0" Canvas.Top="0">
        <MediaElement.Triggers>
          <EventTrigger RoutedEvent="MediaElement.Loaded">
            <EventTrigger.Actions>
              <BeginStoryboard>

                <!-- This Storyboard contains both media (video in this example) and animations. Note 
               the SlipBehavior value of "Slip" specifies that the animation does not progress
               until the media progresses. This might be desirable if media playback is delayed
               because of loading time. -->
                <Storyboard SlipBehavior="Slip">

                  <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
                  <MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>

                  <!-- The animations below animate the ellipses in the right hand pane. These animations are 
                 timed to correspond to the counting in the video. -->

                  <!-- Animate the RadiusY property of the purple ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry"
                    Storyboard.TargetProperty="RadiusY"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                  <!-- Animate the RadiusX property of the gold ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry2"
                    Storyboard.TargetProperty="RadiusX"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </MediaElement.Triggers>
      </MediaElement>
    </Canvas>

  </Canvas>
</Page>

.NET Framework

Supported in: 4.5, 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 8.1, Windows Server 2012 R2, Windows 8, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 (Server Core Role not supported), Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft