<!-- <SnippetAltDoubleAnimationUsingKeyFramesWholePage> -->
<!-- This example shows how to use the DoubleAnimationUsingKeyFrames to 
     animate the position of an object. 
     Key frame animations enable you to create complex animations 
     by specifying multiple destination values
     and controlling the animation's interpolation method.
-->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="DoubleAnimationUsingKeyFrames Example"
  Background="White" Margin="20">       
  <Canvas Width="610" Height="300">
  
    <!-- The position of this rectangle is animated using 
         a key frame animation. -->
    <Rectangle 
      Canvas.Top="100"
      Canvas.Left="10"
      Height="100"
      Width="100"
      Stroke="Black"
      StrokeThickness="5">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="AnimatedTranslateTransform" />
      </Rectangle.RenderTransform>
      
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the TranslateTransform.X property using 3 KeyFrames
                   which animates the rectangle along a straight line. 
                   This animation repeats indefinitely. -->
              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="AnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:6"
                RepeatBehavior="Forever">

                <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
                     steadily from its starting position to 500 over 
                     the first 3 seconds.  -->
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />

                <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
                     appears at 400 after the fourth second of the animation. -->
                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

                <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
                     back to its starting point. The
                     animation starts out slowly at first and then speeds up. 
                     This KeyFrame ends after the 6th
                     second. -->
                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </Canvas>
</Page>
<!-- </SnippetAltDoubleAnimationUsingKeyFramesWholePage> -->

