KeyTime.Uniform Property

Gets the Uniform value which divides the allotted time of the animation evenly between key frames.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)

public static KeyTime Uniform { get; }

Property Value

Type: System.Windows.Media.Animation.KeyTime
A Uniform value.

When a key time is set to Uniform, the total allotted time of the animation is divided evenly between key frames. For example, if the key frame animation has a duration of four seconds and there are four key frames, each key frame will last for one second and begin immediately after the preceding one ends.

This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a Duration property. In addition to specifying the duration of an animation, you need to specify what part of that duration is allotted to each of its key frames. To allot the time, you specify a KeyTime for each key frame in the animation.

The KeyTime for each key frame specifies when a key frame ends (it does not specify the length of time a key frame plays). You can specify a KeyTime as a TimeSpan value, as a percentage, or as the Uniform or Paced special value.

The following example uses a DoubleAnimationUsingKeyFrames to animate a rectangle across the screen. The key frames' key times are set with TimeSpan values.

            /*
               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.
            */ 

            // Create the a rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Fill = Brushes.Blue;
            aRectangle.Stroke = Brushes.Black;
            aRectangle.StrokeThickness = 5;
            aRectangle.Width = 50;
            aRectangle.Height = 50;

            // Create a transform to move the rectangle 
            // across the screen.
            TranslateTransform translateTransform1 = 
                new TranslateTransform();
            aRectangle.RenderTransform = translateTransform1;

            // Create a DoubleAnimationUsingKeyFrames 
            // to animate the transform.
            DoubleAnimationUsingKeyFrames transformAnimation = 
                new DoubleAnimationUsingKeyFrames();
            transformAnimation.Duration = TimeSpan.FromSeconds(10);

            // Animate to 100 at 3 seconds.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));

            // Animate to 300 at 4 seconds.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(300, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));

            // Animate to 500 at 10 seconds.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))));

            // Start the animation when the rectangle is loaded.
            aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform1.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
            };
<!-- 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>

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3, 4, and 10 seconds

The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.

/*
  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.
*/ 

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Purple;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle 
// across the screen.
TranslateTransform translateTransform2 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform2;

// Create a DoubleAnimationUsingKeyFrames 
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 30% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));

// Animate to 300 at 40% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromPercent(0.4)));

// Animate to 500 at 100% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromPercent(1.0)));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform2.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};
<!-- 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>

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3, 4, and 10 seconds

The next example uses Uniform key time values.

            /*
               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.
            */ 

            // Create the a rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Fill = Brushes.Red;
            aRectangle.Stroke = Brushes.Black;
            aRectangle.StrokeThickness = 5;
            aRectangle.Width = 50;
            aRectangle.Height = 50;

            // Create a transform to move the rectangle 
            // across the screen.
            TranslateTransform translateTransform3 =
                new TranslateTransform();
            aRectangle.RenderTransform = translateTransform3;

            // Create a DoubleAnimationUsingKeyFrames 
            // to animate the transform.
            DoubleAnimationUsingKeyFrames transformAnimation =
                new DoubleAnimationUsingKeyFrames();
            transformAnimation.Duration = TimeSpan.FromSeconds(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).
             */ 

            // Animate to 100.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(100, KeyTime.Uniform));

            // Animate to 300.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(300, KeyTime.Uniform));

            // Animate to 500.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(500, KeyTime.Uniform));

            // Start the animation when the rectangle is loaded.
            aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform3.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
            };
<!-- 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>

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3.3,6.6, and 9.9 seconds

The final example uses Paced key time values.

            /*
               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.
            */ 

            // Create the a rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Fill = Brushes.Orange;
            aRectangle.Stroke = Brushes.Black;
            aRectangle.StrokeThickness = 5;
            aRectangle.Width = 50;
            aRectangle.Height = 50;

            // Create a transform to move the rectangle 
            // across the screen.
            TranslateTransform translateTransform4 =
                new TranslateTransform();
            aRectangle.RenderTransform = translateTransform4;

            // Create a DoubleAnimationUsingKeyFrames 
            // to animate the transform.
            DoubleAnimationUsingKeyFrames transformAnimation =
                new DoubleAnimationUsingKeyFrames();
            transformAnimation.Duration = TimeSpan.FromSeconds(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.
             */ 

            // Animate to 100.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(100, KeyTime.Paced));

            // Animate to 300.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(300, KeyTime.Paced));

            // Animate to 500.
            transformAnimation.KeyFrames.Add(
                new LinearDoubleKeyFrame(500, KeyTime.Paced));

            // Start the animation when the rectangle is loaded.
            aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform4.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
            };
<!-- 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>

The following illustration shows when the value of each key frame is reached.

Key values are reached at 0, 5, and 10 seconds

For simplicity, the code versions of this example use local animations, not storyboards, because only a single animation is being applied to a single property, but the examples may be modified to use storyboards instead. For an example showing how to declare a storyboard in code, see How to: Animate a Property by Using a Storyboard.

For the complete sample, see KeyFrame Animation Sample. For more information about key frame animations, see the Key-Frame Animations Overview.

.NET Framework

Supported in: 4.5.2, 4.5.1, 4.5, 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 8.1, Windows Server 2012 R2, Windows 8, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 (Server Core Role not supported), Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft