How to: Specify Whether a Timeline Automatically Reverses

A timeline's AutoReverse property determines whether it plays in reverse after it completes a forward iteration. The following example shows several animations with identical duration and target values, but with different AutoReverse settings. To demonstrate how the AutoReverse property behaves with different RepeatBehavior settings, some animations are set to repeat. The last animation shows how the AutoReverse property works on nested timelines.

Example

<!-- AutoReverseExample.xaml
     This example shows how to use the AutoReverse property to make a timeline 
     play backwards at the end of each iteration. 
     Several rectangles are animated by DoubleAnimations with 
     identical durations and target values, but with different
     AutoReverse and RepeatBehavior settings.-->
     
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="AutoReverse Example">
  <StackPanel Margin="20">

    <!-- Create some rectangles to animate. -->
    <Rectangle Name="withoutAutoReverseRectangle"
      Width="100" Height="20" Fill="Blue" />  

    <Rectangle Name="autoReverseRectangle"
      Width="100" Height="20" Fill="Blue" />

    <Rectangle Name="autoReverseRectangleWithRepeats"
      Width="100" Height="20" Fill="Blue" />

    <Rectangle Name="complexAutoReverseExample"
      Width="100" Height="20" Fill="Blue"  />

    <!-- Use a button to restart the animations. -->
    <Button Margin="30" Content="Start Animations">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Create an animation that does not automatically play in reverse.
                   This animation plays for a total of 2 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="withoutAutoReverseRectangle" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:2" From="100" To="400" AutoReverse="False" />   

              <!-- Create an animation that automatically reverses at the end of each iteration.
                   This animation plays for a total of 4 seconds. -->
              <DoubleAnimation Storyboard.TargetName="autoReverseRectangle" 
                Storyboard.TargetProperty="Width"
                Duration="0:0:2" From="100" To="400" AutoReverse="True" />
        
              <!-- Create an animation that automatically reverses at the end of each iteration.
                   Set the animation to repeat twice. As a result, then animation plays forward,
                   the backward, then forward, and then backward again. 
                   This animation plays for a total of 8 seconds. -->
              <DoubleAnimation Storyboard.TargetName="autoReverseRectangleWithRepeats" 
                Storyboard.TargetProperty="Width"
                Duration="0:0:2" From="100" To="400" AutoReverse="True" RepeatBehavior="2x" />  
                
              <!-- Set the parent timeline's AutoReverse property to True and set the animation's
                   RepeatBehavior to 2x. As a result, the animation plays forward twice and then
                   backwards twice. 
                   This animation plays for a total of 8 seconds. -->                
              <ParallelTimeline AutoReverse="True">
                <DoubleAnimation 
                  Storyboard.TargetName="complexAutoReverseExample" 
                  Storyboard.TargetProperty="Width"
                  Duration="0:0:2" From="100" To="400" RepeatBehavior="2x"  />  
              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>