<!-- Demonstrates the DoubleAnimationUsingKeyFrames class. DoubleAnimationUsingKeyFrames objects are
     used to animate the position of rectangles across a canvas. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameExamples.KeyFramesIntroduction"
  Name="myRootElement"
  WindowTitle="KeyFrame Animations">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
    
    
    <TextBlock Margin="20" TextWrapping="Wrap">
      Key frame animations enable you to create complex animations by specifying multiple destination values
      and controlling the animation's interpolation method.
    </TextBlock>
    
    <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="20">
      <Canvas Width="600" Height="300" Background="White" LayoutUpdated="exampleCanvasLayoutUpdated">
    
        <Image Width="600" Height="300" Name="myImage"
          Source="{StaticResource myDrawingImageResource}" />


        <!-- The position of this rectangle is animated using a key frame animation. -->
        <Rectangle Name="myRectangle"
          Canvas.Top="100"
          Canvas.Left="10"
          Height="100"
          Width="100"
          Stroke="Black"
          StrokeThickness="5">
          <Rectangle.Fill>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <DrawingGroup>
                  <DrawingGroup.Children>
                    <GeometryDrawing Brush="White">
                      <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,100,100" />
                      </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    <GeometryDrawing>
                      <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,100,100" />
                      </GeometryDrawing.Geometry>
                      <GeometryDrawing.Brush>
                        <VisualBrush x:Name="myVisualBrush" ViewboxUnits="Absolute"
                                     Visual="{Binding ElementName=myImage}">
                          <VisualBrush.Transform>
                            <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="0.5" CenterY="0.5" />
                          </VisualBrush.Transform>
                        </VisualBrush>
                      </GeometryDrawing.Brush>
                    </GeometryDrawing>
                  </DrawingGroup.Children>
                  <DrawingGroup.BitmapEffect>
                    <BlurBitmapEffect Radius="2.0" />
                  </DrawingGroup.BitmapEffect>
                </DrawingGroup>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </Rectangle.Fill>

          <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
              <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="myRectangle"
                    Storyboard.TargetProperty="(Canvas.Left)"
                    >
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="500" KeyTime="0:0:5" />
                      <SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="200" KeyTime="0:0:10" />
                      <LinearDoubleKeyFrame Value="290" KeyTime="0:0:12" />
                      <LinearDoubleKeyFrame Value="300" KeyTime="0:0:13.5" />
                      <SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="0" KeyTime="0:0:15" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                  <!-- Animate the first TextBlock -->
                  <DoubleAnimation Storyboard.TargetName="FirstLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="12" To="16" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetName="FirstLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="16" To="12" BeginTime="0:0:5" Duration="0:0:0.2" />

                  <!-- Animate the second TextBlock -->
                  <DoubleAnimation Storyboard.TargetName="FirstSplineTextBlock" Storyboard.TargetProperty="FontSize"
                  From="12" To="16" BeginTime="0:0:5" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetName="FirstSplineTextBlock" Storyboard.TargetProperty="FontSize"
                  From="16" To="12" BeginTime="0:0:10" Duration="0:0:0.2" />

                  <!-- Animate the third TextBlock -->
                  <DoubleAnimation Storyboard.TargetName="SecondLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="12" To="16" BeginTime="0:0:10" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetName="SecondLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="16" To="12" BeginTime="0:0:12" Duration="0:0:0.2" />

                  <!-- Animate the fourth TextBlock -->
                  <DoubleAnimation Storyboard.TargetName="ThirdLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="12" To="16" BeginTime="0:0:12" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetName="ThirdLinearTextBlock" Storyboard.TargetProperty="FontSize"
                  From="16" To="12" BeginTime="0:0:13.5" Duration="0:0:0.2" />

                  <!-- Animate the fifth TextBlock -->
                  <DoubleAnimation Storyboard.TargetName="SecondSplineTextBlock" Storyboard.TargetProperty="FontSize"
                  From="12" To="16" BeginTime="0:0:13.5" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetName="SecondSplineTextBlock" Storyboard.TargetProperty="FontSize"
                  From="16" To="12" BeginTime="0:0:15" Duration="0:0:0.2" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Rectangle.Triggers>

          <Rectangle.BitmapEffect>
            <DropShadowBitmapEffect ShadowDepth="5" />
          </Rectangle.BitmapEffect>
        </Rectangle>
      </Canvas>
    </Border>

    <TextBlock xml:space="preserve">
                    &lt;DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="myRectangle"
                    Storyboard.TargetProperty="(Canvas.Left)"&gt;
                      &lt;DoubleAnimationUsingKeyFrames.KeyFrames&gt;
                        <TextBlock Name="FirstLinearTextBlock">&lt;LinearDoubleKeyFrame Value="500" KeyTime="0:0:5" /&gt;</TextBlock>
                        <TextBlock Name="FirstSplineTextBlock">&lt;SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="200" KeyTime="0:0:10" /&gt;</TextBlock>
                        <TextBlock Name="SecondLinearTextBlock">&lt;LinearDoubleKeyFrame Value="290" KeyTime="0:0:12" /&gt;</TextBlock>
                        <TextBlock Name="ThirdLinearTextBlock">&lt;LinearDoubleKeyFrame Value="300" KeyTime="0:0:13.5" /&gt;</TextBlock>
                        <TextBlock Name="SecondSplineTextBlock">&lt;SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="0" KeyTime="0:0:15" /&gt;</TextBlock>
                      &lt;/DoubleAnimationUsingKeyFrames.KeyFrames&gt;
                    &lt;/DoubleAnimationUsingKeyFrames&gt;
      </TextBlock>
    
    
  </StackPanel>
</Page>
