<Page x:Class="Microsoft.Samples.KeyFrameExamples.KeyTimesIllustration"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="KeyTimesIllustration">
  <Page.Resources>
    <Style TargetType="{x:Type Rectangle}">
      <Setter Property="Width" Value="50" />
      <Setter Property="Height" Value="50" />
      <Setter Property="Stroke" Value="Black" />
      <Setter Property="StrokeThickness" Value="5" />
    </Style>
  </Page.Resources>

  <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
  <Canvas Margin="20" 
    Height="51" Background="{StaticResource MyGridBrushResource}" Width="550">
    <Rectangle Fill="Blue" Canvas.Left="0" Opacity="0.25" />
    <TextBlock Canvas.Left="0" Canvas.Top="55">0 seconds</TextBlock>
    <Rectangle Fill="Blue" Canvas.Left="100" Opacity="0.50"/>
    <TextBlock Canvas.Left="100" Canvas.Top="55">Key frame 1<LineBreak/>3 seconds</TextBlock>
    <Rectangle Fill="Blue" Canvas.Left="300" Opacity="0.75" />
    <TextBlock Canvas.Left="300" Canvas.Top="55">Key frame 2<LineBreak/>4 seconds</TextBlock>
    <Rectangle Fill="Blue" Canvas.Left="500" Opacity="1" />
    <TextBlock Canvas.Left="500" Canvas.Top="55">
      Key frame 3<LineBreak/>10 seconds</TextBlock>
  </Canvas>
    <Canvas Margin="20" 
      Height="51" Background="{StaticResource MyGridBrushResource}" Width="550">
      <Rectangle Fill="Purple" Canvas.Left="0" Opacity="0.25" />
      <TextBlock Canvas.Left="0" Canvas.Top="55">0 seconds</TextBlock>
      <Rectangle Fill="Purple" Canvas.Left="100" Opacity="0.50"/>
      <TextBlock Canvas.Left="100" Canvas.Top="55">
        Key frame 1<LineBreak/>3 seconds</TextBlock>
      <Rectangle Fill="Purple" Canvas.Left="300" Opacity="0.75" />
      <TextBlock Canvas.Left="300" Canvas.Top="55">
        Key frame 2<LineBreak/>4 seconds</TextBlock>
      <Rectangle Fill="Purple" Canvas.Left="500" Opacity="1" />
      <TextBlock Canvas.Left="500" Canvas.Top="55">
        Key frame 3<LineBreak/>10 seconds</TextBlock>
    </Canvas>
    <Canvas Margin="20" 
     Height="51" Background="{StaticResource MyGridBrushResource}" Width="550">
      <Rectangle Fill="Red" Canvas.Left="0" Opacity="0.25" />
      <TextBlock Canvas.Left="0" Canvas.Top="55">0 seconds</TextBlock>
      <Rectangle Fill="Red" Canvas.Left="100" Opacity="0.50"/>
      <TextBlock Canvas.Left="100" Canvas.Top="55">
        Key frame 1<LineBreak/>3.3 seconds</TextBlock>
      <Rectangle Fill="Red" Canvas.Left="300" Opacity="0.75" />
      <TextBlock Canvas.Left="300" Canvas.Top="55">
        Key frame 2<LineBreak/>6.6 seconds</TextBlock>
      <Rectangle Fill="Red" Canvas.Left="500" Opacity="1" />
      <TextBlock Canvas.Left="500" Canvas.Top="55">
        Key frame 3<LineBreak/>9.9 seconds</TextBlock>
    </Canvas>
    <Canvas Margin="20" 
      Height="51" Background="{StaticResource MyGridBrushResource}" Width="550">
      <!--
      <Rectangle Fill="Orange" Canvas.Left="0" Opacity="0.25" />
      <TextBlock Canvas.Left="0" Canvas.Top="55">0 seconds</TextBlock>
      -->
      <Rectangle Fill="Orange" Canvas.Left="100" Opacity="0.5"/>
      <TextBlock Canvas.Left="100" Canvas.Top="55">
        Key frame 1<LineBreak/>0 seconds
      </TextBlock>
      <Rectangle Fill="Orange" Canvas.Left="300" Opacity="0.7" />
      <TextBlock Canvas.Left="300" Canvas.Top="55">
        Key frame 2<LineBreak/>5 seconds</TextBlock>
      <Rectangle Fill="Orange" Canvas.Left="500" Opacity="1" />
      <TextBlock Canvas.Left="500" Canvas.Top="55">
        Key frame 3<LineBreak/>10 seconds</TextBlock>
    </Canvas>

    <Rectangle Fill="Orange" HorizontalAlignment="Left" Margin="20">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform4" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard Name="Test">
            <Storyboard>
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="TranslateTransform4" 
                Storyboard.TargetProperty="X"
                Duration="0:0:10">

                <!-- KeyTime properties are expressed with values of Paced. Paced values are used when a 
                     constant rate is desired. The time allocated to a key frame with a KeyTime of "Paced" is
                     determined by the time allocated to the other key frames of the animation. This time is 
                     calculated to attempt to give a "paced" or "constant velocity" for the animation. -->
                <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
                <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
                <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        
        
        <EventTrigger RoutedEvent="Rectangle.MouseRightButtonDown">
          <SeekStoryboard Offset="0:0:6.6" BeginStoryboardName="Test" />
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
  
</Page>
