Page.xaml

<UserControl x:Class="doubleanimationusingkeyframes.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <StackPanel>
    <TextBlock Margin="10" TextWrapping="Wrap">Click on the rectangle to start the animation. This sample demonstrates using DoubleAnimationUsingKeyFrames to create a key-frame animation that uses a linear key-frame, discrete key-frame, and spline key-frame, in that order.</TextBlock>
    <!-- <SnippetDoubleanimationusingkeyframes> -->
    <Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard">

                <!-- Animate the TranslateTransform's X property
               from 0 to 350, then 50, then 200 over 10 seconds. -->
                <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="MyAnimatedTranslateTransform"
           Storyboard.TargetProperty="X"
           Duration="0:0:10" EnableDependentAnimation="True">

                    <!-- 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>
        </Canvas.Resources>

        <Rectangle PointerPressed="Pointer_Clicked" Fill="Blue"
     Width="50" Height="50">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="MyAnimatedTranslateTransform" />
            </Rectangle.RenderTransform>
        </Rectangle>

    </Canvas>
    <!-- </SnippetDoubleanimationusingkeyframes> -->
    </StackPanel>
</UserControl>