How to: Seek a Storyboard

 

The following example shows how to use the Seek method of a Storyboard to jump to any position in a storyboard animation.

Example

Below is the XAML markup for the sample.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  	x:Class="SDKSample.SeekStoryboardExample">
  <StackPanel Margin="20" >

    <Rectangle Name="myRectangle"
      Width="10" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard Name="myBeginStoryboard">
            <Storyboard Name="myStoryboard" Duration="0:0:4">
              <DoubleAnimation 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:4" From="10" To="500"/>
            </Storyboard>

          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>

    <!-- Use this slider to seek to different points of the Storyboard Duration 
         (in milliseconds). -->
    <Slider Name="SeekSlider" ValueChanged="OnSliderValueChanged" Height="Auto" 
    Width="500" Minimum="0" Maximum="4000" HorizontalAlignment="Left" />

  </StackPanel>
</Page>

Example

Below is the code used with the XAML code above.

Imports System
Imports System.Media
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media.Animation

Namespace SDKSample

	Partial Public Class SeekStoryboardExample
		Inherits Page
		Private Sub OnSliderValueChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim sliderValue As Integer = CInt(SeekSlider.Value)

			' Use the value of the slider to seek to a duration value of the Storyboard (in milliseconds).
			myStoryboard.Seek(myRectangle, New TimeSpan(0, 0, 0, 0, sliderValue), TimeSeekOrigin.BeginTime)
		End Sub
	End Class

End Namespace
Show: