<!-- <SnippetKeyTimesExampleUsingWholePage> -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="KeyTimes Example" >
  <StackPanel Margin="20" HorizontalAlignment="Left">
    

    <!-- The following four rectangles are each animated across the screen 
         with key frames for 10 seconds.
         Each rectangle is animated using KeyTime properties of a different value type. -->

    <!-- <SnippetKeyTimesTimeSpanExample> -->
    <!-- This Rectangle is animated with KeyTimes using TimeSpan Values. 
         It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
         the next second, and 300 to 500 in the last 6 seconds. -->
    <Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5"
      Width="50" Height="50">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform1" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="TranslateTransform1" 
                Storyboard.TargetProperty="X"
                Duration="0:0:10">

                <!-- These KeyTime properties are specified as TimeSpan values 
                     which are in the form of "hours:minutes:seconds". -->
                <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
                <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    <!-- </SnippetKeyTimesTimeSpanExample> -->

    <!-- <SnippetKeyTimesPercentageExample> -->
    <!-- This rectangle moves horizontally to 100 in the first 3 seconds, 
         100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.-->
    <Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5"
      Width="50" Height="50">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform2" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="TranslateTransform2" 
                Storyboard.TargetProperty="X"
                Duration="0:0:10">

                <!-- KeyTime properties are expressed as Percentages. -->
                <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
                <LinearDoubleKeyFrame Value="300" KeyTime="40%" />
                <LinearDoubleKeyFrame Value="500" KeyTime="100%" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    <!-- </SnippetKeyTimesPercentageExample> -->

    <!-- <SnippetKeyTimesUniformExample> -->
    <!-- This rectangle is animated with KeyTimes using Uniform values. 
         Goes to 100 in the first 3.3 seconds, 100 to
         300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. -->
    <Rectangle Fill="Red" Stroke="Black" StrokeThickness="5"
      Width="50" Height="50">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform3" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="TranslateTransform3" 
                Storyboard.TargetProperty="X"
                Duration="0:0:10">

                <!--   KeyTime properties are expressed with values of Uniform. When a key time is set to
                       "Uniform" the total allotted time of the animation is divided evenly between key frames.  
                       In this example, the total duration of the animation is ten seconds and there are four 
                       key frames each of which are set to "Uniform", therefore, the duration of each key frame 
                       is 3.3 seconds (10/3). -->
                <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
                <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
                <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    <!-- </SnippetKeyTimesUniformExample> -->

    <!-- <SnippetKeyTimesPacedExample> -->
    <!-- This rectangle is animated with KeyTimes using Paced Values. 
         The rectangle moves between key frames at uniform rate except for first key frame
         because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero. -->
    <Rectangle Fill="Orange" Stroke="Black" StrokeThickness="5"
      Width="50" Height="50">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform4" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="TranslateTransform4" 
                Storyboard.TargetProperty="X"
                Duration="0:0:10">

                <!-- Use Paced values 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="Paced" />
                <LinearDoubleKeyFrame Value="300" KeyTime="Paced" />
                <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    <!-- </SnippetKeyTimesPacedExample> -->
    
  </StackPanel>
</Page>
<!-- </SnippetKeyTimesExampleUsingWholePage> -->

