How to: Specify a Timeline's Begin Time

A timeline's BeginTime property determines the beginning of a timeline's active period. If the timeline has a parent timeline, the BeginTime property determines how long it takes the timeline to start after its parent starts. If the timeline is a root timeline (a Storyboard, for example), the BeginTime property determines how long the timeline takes to start playing after it is triggered.

The following example shows several different timelines with different BeginTime settings.

Example

<!-- This example shows how the BeginTime property determines when a timeline starts.
     Several rectangles are animated by DoubleAnimations with identical 
     durations and target values, but with different
     BeginTime settings. -->
     
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="BeginTime Example">
  <StackPanel Margin="20">

    <!-- The rectangles to animate. -->
    <Rectangle Name="DefaultBeginTimeRectangle" 
      Width="20" Height="20" Fill="Blue"  />
      
    <Rectangle Name="DelayedBeginTimeRectangle" 
      Width="20" Height="20" Fill="Blue"  />
    
    <Rectangle Name="DelayedAnimationWithDelayedParentRectangle" 
      Width="20" Height="20" Fill="Blue"  /> 

    <Rectangle Name="NegativeBeginTimeExampleRectangle" 
      Width="20" Height="20" Fill="Blue"  />            
    
    <!-- Create a button to start the animations. -->
    <Button Margin="20" Content="Start Animations">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- This animation starts as soon as the button is clicked, because it
                   has a BeginTime of 0. -->
              <DoubleAnimation 
                Storyboard.TargetName="DefaultBeginTimeRectangle" 
                Storyboard.TargetProperty="Width"
                BeginTime="0:0:0" From="100" To="600" Duration="0:0:5"  /> 

              <!-- This animation starts 5 seconds after the button is clicked. -->
              <DoubleAnimation 
                Storyboard.TargetName="DelayedBeginTimeRectangle" 
                Storyboard.TargetProperty="Width"  
                BeginTime="0:0:5" From="100" To="600" Duration="0:0:5" />
                
              <ParallelTimeline BeginTime="0:0:5">  

              <!-- This animation starts 10 seconds after the button is clicked, 
                   because its parent has a BeginTime of 5 seconds and it has
                   a BeginTime of 5 seconds: 5 + 5 = 10.  -->              
                <DoubleAnimation  
                  Storyboard.TargetName="DelayedAnimationWithDelayedParentRectangle" 
                  Storyboard.TargetProperty="Width" 
                  BeginTime="0:0:5" From="100" To="600" Duration="0:0:5"  />
              </ParallelTimeline>
              
              <!-- This animation starts as soon as the button is clicked, but
                   it animates from 350 to 600 instead of from 100 to 600 
                   because of its negative BeginTime. The negative BeginTime
                   setting advances the animation, so that it behaves as though
                   it had already been playing for 2.5 seconds as soon as it is
                   started. -->
              <DoubleAnimation 
                Storyboard.TargetName="NegativeBeginTimeExampleRectangle" 
                Storyboard.TargetProperty="Width"  
                BeginTime="-0:0:2.5" From="100" To="600" Duration="0:0:5" />              
              
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>      
    </Button>
    
    <!-- This example demonstrates how the BeginTime property works on a root timeline. -->
    <Rectangle Name="RootTimelineWithDelayedBeginTimeRectangle"
      Width="20" Height="20" Fill="Blue" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard BeginTime="0:0:5">
            
              <!-- This animation starts 5 seconds after the left mouse button
                   is pressed, because its parent storyboard (a root timeline)
                   has a BeginTime of 5 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="RootTimelineWithDelayedBeginTimeRectangle" 
                Storyboard.TargetProperty="Width"
                BeginTime="0:0:0" From="100" To="600" Duration="0:0:2" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>    
  </StackPanel>
</Page>