The following example demonstrates some of the functionality available with animations. Properties of various controls are animated using different values for the previous properties to indicate their effect.

<Window
  x:Class="Recipe_11_01.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_01"
  Height="300"
  Width="300">
  <Window.Resources>
    <Storyboard
      x:Key="ellipse1Storyboard"
      Storyboard.TargetName="ellipse1">
      <ParallelTimeline>
        <DoubleAnimation
          To="50"
          Duration="0:0:5"
          AccelerationRatio="0.25"
          DecelerationRatio="0.25"
          Storyboard.TargetProperty="Width"
          RepeatBehavior="5x" />
        <DoubleAnimation
          To="50"
          Duration="0:0:5"
          AccelerationRatio="0.5"
          DecelerationRatio="0.25"
          Storyboard.TargetProperty="Height"
          RepeatBehavior="5x"
          SpeedRatio="4" />
      </ParallelTimeline>
    </Storyboard>

    <Storyboard
      x:Key="rect1Storyboard"
      Storyboard.TargetName="rect1">
      <ParallelTimeline>
        <DoubleAnimation
          To="50"
          Duration="0:0:10"
          FillBehavior="Stop"
          Storyboard.TargetProperty="Width" />
        <DoubleAnimation
          To="50"
          Duration="0:0:5"

FillBehavior="HoldEnd"
          AccelerationRatio="0.5"
          DecelerationRatio="0.25"
          Storyboard.TargetProperty="Height" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>
  <Window.Triggers>
      <EventTrigger
      RoutedEvent="Ellipse.Loaded"
      SourceName="ellipse1">
      <BeginStoryboard
        Storyboard="{DynamicResource ellipse1Storyboard}" />
      </EventTrigger>
      <EventTrigger
        RoutedEvent="Rectangle.Loaded"
        SourceName="rect1">
        <BeginStoryboard
          Storyboard="{StaticResource rect1Storyboard}" />
      </EventTrigger>
    </Window.Triggers>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
      </Grid.ColumnDefinitions>

      <Ellipse
        x:Name="ellipse1"
        Margin="10"
        Width="100"
        Height="100"
        Fill="CornflowerBlue" />

      <Rectangle
        x:Name="rect1"
        Margin="10"
        Width="100"
        Height="100"
        Fill="Firebrick"
        Grid.Column="1" />
    </Grid>
</Window>

The following XAML demonstrates how to use data bindings in animations. The Duration property of the Timeline objects are bound to a dependency property defined in the window's code-behind and is set using the System.Windows.Controls.Slider. The AutoReverse property of the Timeline objects is also bound but this time to a System.Windows.Controls.CheckBox.

<Window
  x:Class="Recipe_11_02.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_02"
  Height="350"
  Width="350">
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <BeginStoryboard Name="ellipseBeginStoryboard">
        <Storyboard x:Name="ellipseStoryboard">
          <ParallelTimeline x:Name="ellipseTimeline" RepeatBehavior="Forever">
            <DoubleAnimation
              Storyboard.TargetProperty="Width"
              Storyboard.TargetName="ellipse"
              AutoReverse="{Binding Path=AutoReverseAnimation}"
              Duration="{Binding Path=StoryboardDuration}"
              To="50"
              From="200" />
            <DoubleAnimation
              Storyboard.TargetProperty="Height"
              Storyboard.TargetName="ellipse"
              AutoReverse="{Binding Path=AutoReverseAnimation}"
              Duration="{Binding Path=StoryboardDuration}"
              To="50"
              From="200" />
          </ParallelTimeline>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>

    <DockPanel>
      <StackPanel Margin="5" DockPanel.Dock="Bottom">
        <TextBlock
          Text="Storyboard Duration (s):" Margin="0,5" />
        <Slider
          Width="250"
          Height="30"
          Minimum="0"
          Maximum="60"
          Value="5"
          ValueChanged="Slider_ValueChanged"
          Margin="0,5" />
        <CheckBox
          Content="AutoReverse"
          IsChecked="{Binding Path=AutoReverseAnimation, Mode=TwoWay}"

Margin="0,5" />
      </StackPanel>

      <Ellipse
        x:Name="ellipse"
        Fill="{Binding Path=EllipseFillBrush}"
        Stroke="Black"
        StrokeThickness="1" />
    </DockPanel>
</Window>

The following code-behind contains the dependency properties that are used to supply the animations defined in the previous markup with their data-bound values. When the value of any of these properties changes, the animation is reapplied, reflecting the new values.

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Recipe_11_02
{
    public partial class Window1 : Window
   {
        public Window1()
        {
            InitializeComponent();

            Loaded += delegate(object sender, RoutedEventArgs e)
                      {
                          //Set the data context of the Window to itself.
                          //This will make binding to the dependency properties,
                          //defined below, a great deal easier.
                          DataContext = this;
                      };
     }

     // Gets or sets the AutoReverseAnimationProperty
     public bool AutoReverseAnimation
     {
         get { return (bool)GetValue(AutoReverseAnimationProperty); }
         set { SetValue(AutoReverseAnimationProperty, value); }
     }

     public static readonly DependencyProperty AutoReverseAnimationProperty =
         DependencyProperty.Register("AutoReverseAnimation", typeof(bool),
             typeof(Window1),
                 new UIPropertyMetadata(false, DependencyProperty_Changed));

// Gets or sets the value of the StoryboardDuration property.
     public Duration StoryboardDuration
     {
         get { return (Duration)GetValue(StoryboardDurationProperty); }
         set { SetValue(StoryboardDurationProperty, value); }
     }

     public static readonly DependencyProperty StoryboardDurationProperty =
         DependencyProperty.Register("StoryboardDuration", typeof(Duration),
             typeof(Window1),
             new UIPropertyMetadata(new Duration(TimeSpan.FromSeconds(1)),
                     DependencyProperty_Changed));

     // Handles changes to the value of either the StoryboardDuration dependency
     // property or the EllipseFillBrush dependency property and invokes the
     // ReapplyStoryboard method, updating the animation to reflect the new
     // values.
     private static void DependencyProperty_Changed(DependencyObject sender,
         DependencyPropertyChangedEventArgs e)
     {
         Window1 window1 = sender as Window1;

         if (window1 != null)
         {
             window1.ReapplyStoryboard();
         }
     }

     // Reapplies the 'ellipseStoryboard' object to the 'ellipse' object
     // defined in the associated markup of the window.
     private void ReapplyStoryboard()
     {
         if (!this.IsInitialized)
         {
             return;
         }

         //Attempt to get the current time of the active storyboard.
         //If this is null, a TimeSpan of 0 is used to start the storyboard
         //from the beginning.
         TimeSpan? currentTime = ellipseStoryboard.GetCurrentTime(this)
                                 ?? TimeSpan.FromSeconds(0);
         //Restart the storyboard.
         ellipseStoryboard.Begin(this, true);
         //Seek to the same position that the storyboard was before it was
         //restarted.
         ellipseStoryboard.Seek(this, currentTime.Value,

TimeSeekOrigin.BeginTime);
     }

     private void Slider_ValueChanged(object sender,
                      RoutedPropertyChangedEventArgs<double> e)
     {
         StoryboardDuration = TimeSpan.FromSeconds(e.NewValue);
     }
   }
}

The following example demonstrates the four different options for removing any animations that are active on a property of some object. The following XAML defines four buttons, each of which has an animation applied to its Width property. When each button is clicked, the animations running on it will be stopped using one of the previous four methods.

<Window
  x:Class="Recipe_11_03.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_03"
  Height="300"

Width="300">
   <Window.Resources>
     <Storyboard x:Key="Storyboard1">
       <ParallelTimeline>
         <DoubleAnimation
           x:Name="Animation1"
           Storyboard.TargetProperty="Width"
           From="140"
           To="50"
           AutoReverse="True"
           RepeatBehavior="Forever" />
         <DoubleAnimation
           Storyboard.TargetProperty="Opacity"
           To="0.5"
           AutoReverse="True"
           RepeatBehavior="Forever" />
       </ParallelTimeline>
     </Storyboard>
   </Window.Resources>

   <UniformGrid>
     <Button Margin="5" Content="Method 1">
       <Button.Triggers>
         <EventTrigger RoutedEvent="Button.Loaded">
           <BeginStoryboard
             Storyboard="{DynamicResource Storyboard1}"
             x:Name="BeginStoryboard1" />
         </EventTrigger>
         <EventTrigger RoutedEvent="Button.Click">
           <RemoveStoryboard BeginStoryboardName="BeginStoryboard1" />
         </EventTrigger>
       </Button.Triggers>
     </Button>

     <Button
       Margin="5"
       Content="Method 2"
       Click="Button2_Click">
       <Button.Triggers>
         <EventTrigger
           RoutedEvent="Button.Loaded">
           <BeginStoryboard
             Storyboard="{DynamicResource Storyboard1}" />
         </EventTrigger>
       </Button.Triggers>
     </Button>

<Button
       x:Name="button3"
       Margin="5"
       Content="Method 3"
       Click="Button3_Click"
       Loaded="Button3_Loaded" />

     <Button
       Margin="5"
       Content="Method 4"
       Click="Button4_Click"
       Loaded="Button4_Loaded" />
   </UniformGrid>
</Window>

The following code-behind declares the methods that handle the click events for three of the four System.Windows.Controls.Button objects, defined in the previous XAML:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace Recipe_11_03
{
     public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

       #region Method 2

        /// <summary>
        /// Handler for the Button.Click event on the 'Method 2' button.
        /// This method removes the animations affecting the button
        /// using the BeginAnimation() method, passing a null reference
        /// for the value of the System.Windows.Media.Animation.AnimationTimeline.
        /// </summary>
        private void Button2_Click(object sender, RoutedEventArgs e)
        {
            //Cast the sender to a button.
            Button button2 = sender as Button;
            //Remove any active animations against the Button's width property.
            button2.BeginAnimation(Button.WidthProperty, null);
            //Remove any active animations against the Button's height property.
            button2.BeginAnimation(Button.OpacityProperty, null);
        }

#endregion

       #region Method 3

        //Store a reference to the AnimationClock objects when they are created.
        //This allows for the clocks to be accessed later when it comes to
        //removing them.
        private AnimationClock opacityClock;
        private AnimationClock widthClock;

        //Method that handles the Button.Loaded event on the 'Method 3' button.
        //Animations are created and applied to 'button3', storing a reference to
        //the clocks that are created.
        private void Button3_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation opacityAnimation =
                new DoubleAnimation(1d, 0.5d, TimeSpan.FromSeconds(1),
                                    FillBehavior.HoldEnd);
            opacityAnimation.RepeatBehavior = RepeatBehavior.Forever;
            opacityAnimation.AutoReverse = true;
            opacityClock = opacityAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.OpacityProperty, opacityClock);

            DoubleAnimation widthAnimation =
                new DoubleAnimation(140d, 50d, TimeSpan.FromSeconds(1),
                                    FillBehavior.HoldEnd);
            widthAnimation.RepeatBehavior = RepeatBehavior.Forever;
            widthAnimation.AutoReverse = true;
            widthClock = widthAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.WidthProperty, widthClock);
        }

        //Handles the Button.Click event of 'button3'. This uses the third
        //method of removing animations by removing each of the clocks.
        private void Button3_Click(object sender, RoutedEventArgs e)
        {
            opacityClock.Controller.Remove();
            widthClock.Controller.Remove();
        }

       #endregion

       #region Method 4

        //Store a local reference to the storyboard we want to
        //interact with.
        private Storyboard method4Storyboard;

private void Button4_Loaded(object sender, RoutedEventArgs e)
        {
            method4Storyboard = TryFindResource("Storyboard1") as Storyboard;

            method4Storyboard.Begin(sender as FrameworkElement, true);
        }

        //Handles the Button.Click event of the 'Method 4' button.
        private void Button4_Click(object sender, RoutedEventArgs e)
        {
            //Make sure we got a valid reference.
            if (method4Storyboard != null)
            {
                //Remove the storyboard by calling its Remove method, passing the
                //control that it is currently running against.
                method4Storyboard.Remove(sender as FrameworkElement);
            }
        }

       #endregion
    }
}

<Window
  x:Class="Recipe_11_04.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_04"
  Height="300"
  Width="300">
  <Window.Resources>
    <Storyboard x:Key="LowOpacity">
      <DoubleAnimation Storyboard.TargetProperty="Opacity" />
    </Storyboard>

    <Storyboard x:Key="HighOpacity">
      <DoubleAnimation
        Storyboard.TargetProperty="Opacity"
        To="1"
        AutoReverse="True"
        RepeatBehavior="Forever" />
     </Storyboard>
  </Window.Resources>

  <Grid>
    <Grid.ColumnDefinitions>

<ColumnDefinition Width="0.5*" />
       <ColumnDefinition Width="0.5*" />
     </Grid.ColumnDefinitions>

     <Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="35" />
     </Grid.RowDefinitions>

     <Border
       Background="Firebrick"
       Width="100"
       Height="100"
       x:Name="Rect1"
       Opacity="0.4">
      <Border.Triggers>
         <EventTrigger RoutedEvent="Mouse.MouseEnter">
           <BeginStoryboard Storyboard="{DynamicResource HighOpacity}" />
         </EventTrigger>
         <EventTrigger RoutedEvent="Mouse.MouseLeave">
           <BeginStoryboard Storyboard="{DynamicResource LowOpacity}" />
         </EventTrigger>
       </Border.Triggers>
     </Border>

     <Rectangle
       Fill="Firebrick"
       Width="100"
       Height="100"
       Grid.Column="1" />
  </Grid>
</Window>

The following example defines a System.Windows.Window that contains a single System.Windows.Shapes.Rectangle. When the mouse is placed over the rectangle, the Rectangle.Height, Rectangle.Width, and Rectangle.Fill properties are animated. The animation continues until the mouse is moved off the rectangle.

<Window
  x:Class="Recipe_11_05.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_05"
  Height="300"
  Width="300">
  <Grid>
    <Rectangle
      Height="100"
      Width="100"
      Fill="Firebrick"
      Stroke="Black"
      StrokeThickness="1">
    <Rectangle.Style>

<Style TargetType="Rectangle">
    <Style.Triggers>
      <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <BeginStoryboard>
          <Storyboard>
            <ParallelTimeline
               RepeatBehavior="Forever"
               AutoReverse="True">
               <DoubleAnimation
                 Storyboard.TargetProperty="Width"
                 To="150" />
               <DoubleAnimation
                 Storyboard.TargetProperty="Height"
                 To="150" />
               <ColorAnimation
                 Storyboard.TargetProperty="Fill.Color"
                 To="Orange" />
               </ParallelTimeline>
             </Storyboard>
           </BeginStoryboard>
         </EventTrigger>
         <EventTrigger
            RoutedEvent="Rectangle.MouseLeave">
            <BeginStoryboard>
              <Storyboard>
                <ParallelTimeline>
                  <DoubleAnimation
                    Storyboard.TargetProperty="Width"
                    To="100" />
                  <DoubleAnimation
                    Storyboard.TargetProperty="Height"
                    To="100" />
                  <ColorAnimation
                    Storyboard.TargetProperty="Fill.Color"
                    To="Firebrick" />
                  </ParallelTimeline>
                </Storyboard>
               </BeginStoryboard>
             </EventTrigger>
           </Style.Triggers>
         </Style>
       </Rectangle.Style>
     </Rectangle>
   </Grid>
</Window>

The following XAML demonstrates how to use linear and double keyframes to animate the Height and Width properties of a System.Windows.Shapes.Ellipse control (see Figure 11-1). The animation is triggered when the System.Windows.Controls.Button is clicked.

<Window
  x:Class="Recipe_11_06.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_06"
  Height="300"
  Width="300">
  <Window.Resources>
    <Storyboard
      x:Key="ResizeEllipseStoryboard">
      <ParallelTimeline>
        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="ellipse"
          Storyboard.TargetProperty="Height">
          <LinearDoubleKeyFrame Value="150" KeyTime="0:0:1" />
          <LinearDoubleKeyFrame Value="230" KeyTime="0:0:2" />
          <LinearDoubleKeyFrame Value="150" KeyTime="0:0:2.5" />
          <LinearDoubleKeyFrame Value="230" KeyTime="0:0:5" />
          <LinearDoubleKeyFrame Value="40" KeyTime="0:0:9" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="ellipse"
          Storyboard.TargetProperty="Width">
          <DiscreteDoubleKeyFrame Value="150" KeyTime="0:0:1" />
          <DiscreteDoubleKeyFrame Value="230" KeyTime="0:0:2" />
          <DiscreteDoubleKeyFrame Value="150" KeyTime="0:0:2.5" />
          <DiscreteDoubleKeyFrame Value="230" KeyTime="0:0:5" />
          <DiscreteDoubleKeyFrame Value="40" KeyTime="0:0:9" />
        </DoubleAnimationUsingKeyFrames>
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>

<Ellipse
      Height="40"
      Width="40"
      x:Name="ellipse"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">
      <Ellipse.Fill>
        <RadialGradientBrush
          GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="0.5" />
          <GradientStop Color="Red" Offset="1.0" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>

    <Button
      Content="Start..."
      Margin="10"
      Grid.Row="1">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard
            Storyboard="{DynamicResource ResizeEllipseStoryboard}" />
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </Grid>
</Window>

Figure 11-1. An animated ellipse in its initial state (left) and after several seconds have passed (right)

The following code demonstrates how to use a System.Windows.Controls.Slider to control the progress of an animation (see Figure 11-2). It is important to note that the animation is paused while the user is interacting with the Slider control so as to prevent the animation from progressing while the slider is being moved.

<Window
  x:Class="Recipe_11_07.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_07"
  Height="300"
  Width="600">
  <Grid>

<Rectangle
  x:Name="Rectangle"
  Height="100"
  Width="100"
  Fill="Firebrick">
  <Rectangle.RenderTransform>
    <MatrixTransform x:Name="RectangleMatrixTransform" />
  </Rectangle.RenderTransform>

  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard x:Name="RectangleStoryboard">
        <Storyboard
          x:Name="Storyboard"
          CurrentTimeInvalidated="Storyboard_Changed">

        <MatrixAnimationUsingPath
          Storyboard.TargetName="RectangleMatrixTransform"
          Storyboard.TargetProperty="Matrix"
          Duration="0:0:10"
          RepeatBehavior="Forever">
          <MatrixAnimationUsingPath.PathGeometry>
            <PathGeometry Figures="M −100,0 300, 0" />
          </MatrixAnimationUsingPath.PathGeometry>
         </MatrixAnimationUsingPath>
        </Storyboard>
       </BeginStoryboard>
      </EventTrigger>
     </Rectangle.Triggers>
   </Rectangle>

   <Slider
     x:Name="Seeker"
     Minimum="0"
     Maximum="1"
     SmallChange="0.001"
     ValueChanged="Seeker_ValueChanged">
     <Slider.Triggers>
       <EventTrigger RoutedEvent="Slider.MouseLeftButtonDown">
         <StopStoryboard BeginStoryboardName="RectangleStoryboard" />
       </EventTrigger>
       <EventTrigger RoutedEvent="Slider.MouseLeftButtonUp">
         <ResumeStoryboard BeginStoryboardName="RectangleStoryboard" />
       </EventTrigger>
     </Slider.Triggers>
   </Slider>
  </Grid>
</Window>

The following code-behind defines methods that update the value of the Slider, defined in the previous markup, and respond to the user moving the slider, seeking to a new point in the animation:

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Input;

namespace Recipe_11_07
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        bool ignoreValueChanged = false;

        private void Storyboard_Changed(object sender, System.EventArgs e)
        {
            ClockGroup clockGroup = sender as ClockGroup;

            AnimationClock animationClock =
                clockGroup.Children[0] as AnimationClock;

            if (animationClock.CurrentProgress.HasValue)
            {
                ignoreValueChanged = true;
                Seeker.Value = animationClock.CurrentProgress.Value;
                ignoreValueChanged = false;
            }
        }

        private void Seeker_ValueChanged(object sender,
            RoutedPropertyChangedEventArgs<double> e)
        {
            if (ignoreValueChanged && Mouse.LeftButton != MouseButtonState.Pressed)
            {
                return;
            }

            Storyboard.Seek(Rectangle,
            TimeSpan.FromTicks((long)(Storyboard.Children[0].Duration.TimeSpan.Ticks

* Seeker.Value)),
                            TimeSeekOrigin.BeginTime);
        }
    }
}

Figure 11-2. A Slider control is used to track the progress of an animation. The animation moves the rectangle from one side of the window to the other.

The following XAML defines several different shapes within a path (see Figure 11-3). Each shape is animated using either a System.Windows.Media.Animation.DoubleAnimation or a PointAnimation.

<Window
  x:Class="Recipe_11_08.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_08"
  Height="300"
  Width="300">
  <Grid>
    <Path Stroke="Black" StrokeThickness="1">
      <Path.Data>
        <GeometryGroup>
          <LineGeometry
            x:Name="line1"
            StartPoint="20,20"
            EndPoint="264,20" />
          <LineGeometry
            x:Name="line2"
            StartPoint="38,40"
            EndPoint="248,40" />
          <LineGeometry
            x:Name="line3"
            StartPoint="140,60"
            EndPoint="140,150" />
          <LineGeometry
            x:Name="line4"
            StartPoint="160,60"
            EndPoint="160,150" />
          <EllipseGeometry
            x:Name="ellipse"
            Center="150,150"
            RadiusX="5"
            RadiusY="5" />
          <PathGeometry>
            <PathFigure>
              <BezierSegment
                x:Name="bezierSegment1"
                IsStroked="True"
                Point1="200,200"
                Point2="105,205"
                Point3="280,0" />
             </PathFigure>
           </PathGeometry>
           <PathGeometry>
             <PathFigure StartPoint="0,265">
               <BezierSegment
                 x:Name="bezierSegment2"
                 IsStroked="True"

Point1="100,100"
                 Point2="206,117"
                 Point3="280,267" />
             </PathFigure>
           </PathGeometry>
         </GeometryGroup>
       </Path.Data>
       <Path.Triggers>
         <EventTrigger RoutedEvent="Path.Loaded">
           <BeginStoryboard>
             <Storyboard
               AutoReverse="True"
               RepeatBehavior="Forever">
               <PointAnimation
                 To="40,20"
                 Storyboard.TargetName="line1"
                 Storyboard.TargetProperty="EndPoint" />
               <PointAnimation
                 To="280,40"
                 Storyboard.TargetName="line2"
                 Storyboard.TargetProperty="StartPoint" />
               <PointAnimation
                 To="20,60"
                 Storyboard.TargetName="line3"
                 Storyboard.TargetProperty="EndPoint" />
               <PointAnimation
                 To="280,60"
                 Storyboard.TargetName="line4"
                 Storyboard.TargetProperty="EndPoint" />
               <ParallelTimeline
                 Storyboard.TargetName="ellipse">
                 <DoubleAnimation
                   To="80"
                   Storyboard.TargetProperty="RadiusX" />
                 <DoubleAnimation
                   To="80"
                   Storyboard.TargetProperty="RadiusY" />
               </ParallelTimeline>
               <ParallelTimeline Storyboard.TargetName="bezierSegment1">
                 <PointAnimation Storyboard.TargetProperty="Point1" To="300,0" />
                 <PointAnimation Storyboard.TargetProperty="Point2" To="0,270" />
                 <PointAnimation Storyboard.TargetProperty="Point3" To="300,263" />
               </ParallelTimeline>
               <ParallelTimeline Storyboard.TargetName="bezierSegment2">
                 <PointAnimation Storyboard.TargetProperty="Point1" To="0,0" />
                 <PointAnimation Storyboard.TargetProperty="Point2" To="260,300" />
                 <PointAnimation Storyboard.TargetProperty="Point3" To="280,0" />

</ParallelTimeline>
               </Storyboard>
             </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Grid>
 </Window>

Figure 11-3. The initial state of the shapes (left) and the final state of the shapes after being animated (right)

The following example demonstrates how to use the RepeatBehavior and AutoReverse properties. The code defines a System.Windows.Window that contains four System.Windows.Shapes.Ellipse controls. Each of the Ellipse objects has a different animation applied to it, demonstrating how to use the AutoReverse and RepeatBehavior properties.

<Window
  x:Class="Recipe_11_09.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_09"
  Height="600"
  Width="600">
  <UniformGrid>
    <Ellipse

Height="200"
    Width="200"
    Fill="Firebrick">
    <Ellipse.Triggers>
      <EventTrigger
        RoutedEvent="Ellipse.Loaded">
        <BeginStoryboard>
          <Storyboard
            AutoReverse="True"
            RepeatBehavior="Forever">
            <ColorAnimation
              Storyboard.TargetProperty="Fill.Color"
              To="White" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Ellipse.Triggers>
  </Ellipse>

  <Ellipse
     Height="200"
     Width="200"
     Fill="Firebrick">
     <Ellipse.Triggers>
       <EventTrigger
         RoutedEvent="Ellipse.Loaded">
         <BeginStoryboard>
           <Storyboard
             Duration="0:0:1"
             RepeatBehavior="0:0:4">
             <ColorAnimation
               Storyboard.TargetProperty="Fill.Color"
               To="White" />
           </Storyboard>
         </BeginStoryboard>
       </EventTrigger>
     </Ellipse.Triggers>
   </Ellipse>

   <Ellipse
     Height="200"
     Width="200"
     Fill="Firebrick">
     <Ellipse.Triggers>
       <EventTrigger
         RoutedEvent="Ellipse.Loaded">
         <BeginStoryboard>

<Storyboard
             RepeatBehavior="5x">
             <ColorAnimation
               Storyboard.TargetProperty="Fill.Color"
               To="White" />
           </Storyboard>
         </BeginStoryboard>
       </EventTrigger>
     </Ellipse.Triggers>
   </Ellipse>

   <Ellipse
     Height="200"
     Width="200"
     Fill="Firebrick">
     <Ellipse.Triggers>
       <EventTrigger
         RoutedEvent="Ellipse.Loaded">
         <BeginStoryboard>
             <Storyboard
               AutoReverse="True"
               RepeatBehavior="0:0:2">
               <ColorAnimation
                 Storyboard.TargetProperty="Fill.Color"
                 To="White" />
             </Storyboard>
           </BeginStoryboard>
         </EventTrigger>
       </Ellipse.Triggers>
     </Ellipse>
   </UniformGrid>
</Window>

The following example demonstrates how to use the Timeline.DesiredFrameRate attached property. Three System.Windows.Media.Animation.Storyboard objects are defined, each with a single System.Windows.Media.Animation.DoubleAnimation. Each child DoubleAnimation targets the Y property of a System.Windows.Media.TranslateTransform, applied to each of the three System.Windows.Shapes.Ellipse controls. Each Timeline runs at the same speed but has a different frame rate, highlighting the effects of altering the frame rate.

The Ellipse to the far left of the window will be animated with the smoothest movement and least tearing. The center Ellipse will be animated with a smooth movement but will be affected by tearing. The final Ellipse to the far right of the window will appear to jump from its start position to its final position because of its frame rate of 1 fps (see Figure 11-4).

<Window x:Class="Recipe_11_10.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Recipe_11_10" Height="300" Width="300">
   <Window.Triggers>
     <EventTrigger
       RoutedEvent="Window.Loaded">
       <BeginStoryboard>
         <Storyboard>
           <DoubleAnimation
             AutoReverse="True"
             RepeatBehavior="Forever"
             Storyboard.TargetName="tt1"
             Storyboard.TargetProperty="Y"
             Duration="0:0:1"
             To="-90" />

</Storyboard>
       </BeginStoryboard>

       <BeginStoryboard>
         <Storyboard
           Timeline.DesiredFrameRate="1">
           <DoubleAnimation
             AutoReverse="True"
             RepeatBehavior="Forever"
             Storyboard.TargetName="tt2"
             Storyboard.TargetProperty="Y"
             To="-90"
             Duration="0:0:1" />
         </Storyboard>
       </BeginStoryboard>
     </EventTrigger>
   </Window.Triggers>
   <Grid>
    <Ellipse
      Width="75"
      Height="75"
      Fill="Firebrick"
      Stroke="Black"
      StrokeThickness="1">
      <Ellipse.RenderTransform>
        <TranslateTransform
          x:Name="tt1"
          X="-75"
          Y="90" />
      </Ellipse.RenderTransform>
    </Ellipse>

    <Ellipse
      Width="75"
      Height="75"
      Fill="Plum"
      Stroke="Black"
      StrokeThickness="1">
      <Ellipse.RenderTransform>
        <TranslateTransform
          x:Name="tt2"
          X="75"
          Y="90" />
        </Ellipse.RenderTransform>
     </Ellipse>
   </Grid>
</Window>

Figure 11-4. The ellipse to the left of the window is smoothly animated between its start and end points, and the ellipse to the right jumps between the top and bottom of the screen.

The following example demonstrates how to override the PropertyMetadata for the Timeline.DesiredFrameRateProperty dependency property. The following code details the content of the App.xaml.cs file. Here an event handler is registered against the System.Windows.Application.Startup event, which, when invoked, overrides the property metadata for the DesiredFrameRateProperty dependency property.

using System.Windows;
using System.Windows.Media.Animation;

namespace Recipe_11_11
{
    public partial class App : Application
    {
        public App()
        {
            Startup += delegate(object sender, StartupEventArgs e)
            {
                Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline),
                                                  new PropertyMetadata(1));
        };
     }
   }
}

The following XAML declares two System.Windows.Shapes.Ellipse objects, both of which are animated, moving them in a vertical direction. The first animation, affecting the Ellipse to the left of the window, runs with the overridden default desired frame rate. The second animation that affects the Ellipse to the right of the window runs at an explicitly defined frame rate.

<Window x:Class="Recipe_11_11.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe_11_11" Height="300" Width="300">
  <Window.Triggers>
    <EventTrigger
      RoutedEvent="Window.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            AutoReverse="True"
            RepeatBehavior="Forever"

Storyboard.TargetName="tt1"
            Storyboard.TargetProperty="Y"
            Duration="0:0:1"
            To="-90" />
        </Storyboard>
      </BeginStoryboard>

      <BeginStoryboard>
        <Storyboard
          Timeline.DesiredFrameRate="60">
          <DoubleAnimation
            AutoReverse="True"
            RepeatBehavior="Forever"
            Storyboard.TargetName="tt2"
            Storyboard.TargetProperty="Y"
            To="-90"
            Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>
<Grid>
  <Ellipse
    Width="75"
    Height="75"
    Fill="Firebrick"
    Stroke="Black"
    StrokeThickness="1">
    <Ellipse.RenderTransform>
      <TranslateTransform
        x:Name="tt1"
        X="-75"
        Y="90" />
    </Ellipse.RenderTransform>
  </Ellipse>

  <Ellipse
    Width="75"
    Height="75"
    Fill="Plum"
    Stroke="Black"
    StrokeThickness="1">
    <Ellipse.RenderTransform>
      <TranslateTransform
        x:Name="tt2"
        X="75"
        Y="90" />

</Ellipse.RenderTransform>
    </Ellipse>
  </Grid>
</Window>

The following XAML demonstrates how to use a MatrixAnimationUsingPath, where a System.Windows.Controls.Border is translated and rotated, according to the shape of the path. The path is also drawn on the screen to better visualize the motion of the Border (see Figure 11-5).

<Window
  x:Class="Recipe_11_12.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_12"
  Height="300"
  Width="550">

<Window.Resources>
  <PathGeometry
    x:Key="AnimationPathGeometry"
    Figures="M 50,150 C 100,-200 500,400 450,100 400,-100 285,400 50,150" />

  <Storyboard x:Key="MatrixAnimationStoryboard">
    <MatrixAnimationUsingPath
      RepeatBehavior="Forever"
      Duration="0:0:5"
      AutoReverse="True"
      Storyboard.TargetName="BorderMatrixTransform"
      Storyboard.TargetProperty="Matrix"
      DoesRotateWithTangent="True"
      PathGeometry="{StaticResource AnimationPathGeometry}" />
   </Storyboard>
 </Window.Resources>
 <Grid>
   <Path
     Stroke="Black"
     StrokeThickness="1"
     Data="{StaticResource AnimationPathGeometry}" />

   <Border
     HorizontalAlignment="Left"
     VerticalAlignment="Top"
     Width="100"
     Height="50"
     CornerRadius="5"
     BorderBrush="Black"
     BorderThickness="1"
     RenderTransformOrigin="0,0">
     <Border.Background>
       <LinearGradientBrush
         StartPoint="0.5,0"
         EndPoint="0.5,1">
         <GradientStop
           Color="CadetBlue"
           Offset="0" />
         <GradientStop
           Color="CornflowerBlue"
           Offset="1" />
         </LinearGradientBrush>
       </Border.Background>
       <Border.RenderTransform>
         <MatrixTransform
           x:Name="BorderMatrixTransform" />
       </Border.RenderTransform>

<Border.Triggers>
         <EventTrigger
           RoutedEvent="Border.Loaded">
           <BeginStoryboard
             Storyboard="{StaticResource MatrixAnimationStoryboard}" />
         </EventTrigger>
       </Border.Triggers>
       <TextBlock
         Text="^ This way up ^"
         HorizontalAlignment="Center"
         VerticalAlignment="Center" />
     </Border>
   </Grid>
</Window>

Figure 11-5. A control midway through a path animation. Notice how the control is oriented such that it follows a tangent to the gradient of the curve.

The following XAML demonstrates how to use a MediaTimeline to drive the playback of a video file through a MediaElement (see Figure 11-6).

<Window
  x:Class="Recipe_11_13.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_13"
  Height="300"
  Width="300">
  <Viewbox>
    <MediaElement
      x:Name="mePlayer"
      Stretch="Fill">
      <MediaElement.Triggers>
        <EventTrigger
          RoutedEvent="MediaElement.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <MediaTimeline
                Storyboard.TargetName="mePlayer"
                Source="clock.avi"
                RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </MediaElement.Triggers>

</MediaElement>
    </Viewbox>
</Window>

Figure 11-6. A video file (with sound), eight seconds into its playback

The following XAML demonstrates how to use the SlipBehavior.Slip value. A video file is played back using a MediaTimeline, with two animations running alongside it. One of the animations is synchronized; the other is not. The red System.Windows.Shapes.Ellipse is not synchronized and uses the default SlipBehavior.Grow value, whereas the green Ellipse does slip. You should observe that the green Ellipse pauses briefly while the video is loaded, but the red Ellipse starts straightaway (see Figure 11-7).

<Window
  x:Class="Recipe_11_14.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_14"
  Height="320"
  Width="450">
  <Window.Resources>
    <PathGeometry
      x:Key="AnimationSyncPathGeometry"
      Figures="M 30,260 L 400,260" />

     <PathGeometry
       x:Key="AnimationNonSyncPathGeometry"
       Figures="M 30,230 L 400,230" />
   </Window.Resources>

   <Window.Triggers>
     <EventTrigger RoutedEvent="Window.Loaded">
       <BeginStoryboard>
         <Storyboard SlipBehavior="Slip">
           <MediaTimeline
             Storyboard.TargetName="mePlayer1"
             Source="clock.avi"
             RepeatBehavior="Forever" />

<MatrixAnimationUsingPath
             RepeatBehavior="Forever"
             Duration="0:0:12"
             Storyboard.TargetName="SyncEllipseMatrixTransform"
             Storyboard.TargetProperty="Matrix"
             DoesRotateWithTangent="True"
             PathGeometry="{StaticResource AnimationSyncPathGeometry}" />
         </Storyboard>
       </BeginStoryboard>

       <BeginStoryboard>
         <Storyboard SlipBehavior="Grow">
           <MediaTimeline
             Storyboard.TargetName="mePlayer2"
             Source="clock.avi"
             RepeatBehavior="Forever" />

         <MatrixAnimationUsingPath
           RepeatBehavior="Forever"
           Duration="0:0:12"
           Storyboard.TargetName="NonSyncEllipseMatrixTransform"
           Storyboard.TargetProperty="Matrix"
           PathGeometry="{StaticResource AnimationNonSyncPathGeometry}" />
         </Storyboard>
       </BeginStoryboard>
     </EventTrigger>
   </Window.Triggers>
   <Grid>
     <Grid>
       <Grid.ColumnDefinitions>
         <ColumnDefinition Width="0.5*" />
         <ColumnDefinition Width="0.5*" />
       </Grid.ColumnDefinitions>

       <MediaElement
         Margin="10"
         Width="200"
         Height="200"
         x:Name="mePlayer1"
         Stretch="Fill"
         HorizontalAlignment="Center"
         VerticalAlignment="Top" />

       <MediaElement
         Margin="10"
         Width="200"
         Height="200"
         x:Name="mePlayer2"

Stretch="Fill"
         HorizontalAlignment="Center"
         VerticalAlignment="Top"
         Grid.Column="1" />
       </Grid>

       <Path
         Stroke="Black"
         StrokeThickness="1"
         Data="{StaticResource AnimationSyncPathGeometry}"
         Grid.ColumnSpan="2" />

       <Path
         Stroke="Black"
         StrokeThickness="1"
         Data="{StaticResource AnimationNonSyncPathGeometry}"
         Grid.ColumnSpan="2" />

       <Ellipse
         Width="20"
         Height="20"
         Fill="ForestGreen"
         x:Name="syncElipse"
         HorizontalAlignment="Left"
         VerticalAlignment="Top">
         <Ellipse.RenderTransform>
           <MatrixTransform
             x:Name="SyncEllipseMatrixTransform" />
         </Ellipse.RenderTransform>
       </Ellipse>

       <Ellipse
       Width="20"
       Height="20"
       Fill="Firebrick"
       x:Name="nosyncElipse"
       HorizontalAlignment="Left"
       VerticalAlignment="Top">
       <Ellipse.RenderTransform>
         <MatrixTransform
           x:Name="NonSyncEllipseMatrixTransform" />
       </Ellipse.RenderTransform>
     </Ellipse>
   </Grid>

</Window>

Figure 11-7. Two media files are being played back in separate storyboards. The green Ellipse is an animation that runs alongside the left video. It is slightly behind the red Ellipse because it slipped while the video was being loaded, whereas the red Ellipse started its animation immediately. The actual observed behavior will depend on the performance and workload of your machine.

The following code example demonstrates the behavior of completion events. The markup file contains a few simple controls, each of which has an animation applied to it. Each animation supplies a System.EventHandler that displays a simple message when the animation finishes.

<Window
  x:Class="Recipe_11_15.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_15"
  Height="300"
  Width="300"
  Background="Black">
  <Window.Triggers>
    <EventTrigger
      RoutedEvent="Window.Loaded">
      <BeginStoryboard>
        <Storyboard
          Completed="Storyboard_Completed">
          <ParallelTimeline
            Completed="ParallelTimeline_Completed">
            <ColorAnimation
              Duration="0:0:1"
              Completed="Animation1_Completed"
              Storyboard.TargetProperty="Background.Color"
              To="White" />
            <ColorAnimation
              Duration="0:0:2"
              Completed="Animation2_Completed"
              Storyboard.TargetName="bd"
              Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
              To="Black" />
          </ParallelTimeline>
          <ColorAnimation
            Duration="0:0:3"

Completed="Animation3_Completed"
            Storyboard.TargetName="rect"
            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
            To="Firebrick" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>

  <Border
    x:Name="bd"
    Margin="20"
    Background="HotPink">
    <Rectangle
      x:Name="rect"
      Width="100"
      Height="100"
      Fill="WhiteSmoke" />
  </Border>
</Window>

The following code details the content of the previous markup's code-behind file. The code defines several event handlers for various Completed events, defined in the markup.

using System;
using System.Windows;

namespace Recipe_11_15
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
   {
       public Window1()
       {
           InitializeComponent();
       }

       private void Storyboard_Completed(object sender, EventArgs e)
       {
           MessageBox.Show("Storyboard complete.", "Recipe_11_15");
       }

       private void ParallelTimeline_Completed(object sender, EventArgs e)
       {
           MessageBox.Show("ParallelTimeline complete.", "Recipe_11_15");
       }

private void Animation1_Completed(object sender, EventArgs e)
       {
           MessageBox.Show("Animation 1 complete.", "Recipe_11_15");
       }

       private void Animation2_Completed(object sender, EventArgs e)
       {
           MessageBox.Show("Animation 2 complete.", "Recipe_11_15");
       }

       private void Animation3_Completed(object sender, EventArgs e)
       {
           MessageBox.Show("Animation 3 complete.", "Recipe_11_15");
       }
    }
}

The following example demonstrates three different ways of targeting a property for animation. The examples use a combination of partial path qualification and indirect property targeting to access the target properties.

<Window
  x:Class="Recipe_11_16.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_16"
  Height="300"
  Width="300"
  Background="Black">
  <Window.Triggers>
    <EventTrigger
      RoutedEvent="Window.Loaded">
      <BeginStoryboard>
        <Storyboard
          AutoReverse="True"
          RepeatBehavior="Forever">

<ColorAnimation
            Storyboard.TargetProperty="Background.Color"
            To="White" />
          <ColorAnimation
            Storyboard.TargetName="bd"
            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
            To="Black" />
          <ColorAnimation
            Storyboard.TargetName="rect"
            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
            To="Firebrick" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Window.Triggers>
    <Border
      x:Name="bd"
      Margin="20"
      Background="HotPink">
      <Rectangle
        x:Name="rect"
        Width="100"
        Height="100"
        Fill="WhiteSmoke" />
    </Border>
</Window>

The following example demonstrates how to use the storyboard actions that derive from ControllableStoryboardAction. There are three shapes displayed in the window, each of which is animated in a different way by a single Storyboard. Beneath the controls are several buttons, each of which performs a different action on the storyboard when clicked.

<Window
  x:Class="Recipe_11_17.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_17"
  Height="350"
  Width="400">
  <Window.Resources>
    <Storyboard
      x:Key="Storyboard"
      RepeatBehavior="10x">
      <DoubleAnimation
        Storyboard.TargetName="rect1"
        Storyboard.TargetProperty="Width"
        To="250"
        FillBehavior="HoldEnd"
        AutoReverse="False" />
      <DoubleAnimation
        Storyboard.TargetName="rect2"
        Storyboard.TargetProperty="Width"
        To="250"
        AutoReverse="True" />
      <ColorAnimation
        Storyboard.TargetName="ellipse1"
        Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
        To="Orange"
        AutoReverse="True" />
    </Storyboard>
  </Window.Resources>

  <Window.Triggers>
    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnBegin">
      <BeginStoryboard
        x:Name="beginStoryboard"
        Storyboard="{StaticResource Storyboard}" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"

SourceName="btnPause">
      <PauseStoryboard
        BeginStoryboardName="beginStoryboard" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnResume">
      <ResumeStoryboard
        BeginStoryboardName="beginStoryboard" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnStop">
      <StopStoryboard
        BeginStoryboardName="beginStoryboard" />
    </EventTrigger>

    <EventTrigger
     RoutedEvent="Button.Click"
     SourceName="btnSeek">
     <SeekStoryboard
       BeginStoryboardName="beginStoryboard"
       Offset="0:0:5"
       Origin="BeginTime" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnSkipToFill">
      <SkipStoryboardToFill
        BeginStoryboardName="beginStoryboard" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnDoubleSpeed">
      <SetStoryboardSpeedRatio
        BeginStoryboardName="beginStoryboard"
        SpeedRatio="2" />
    </EventTrigger>

    <EventTrigger
      RoutedEvent="Button.Click"
      SourceName="btnHalfSpeed">
      <SetStoryboardSpeedRatio

BeginStoryboardName="beginStoryboard"
        SpeedRatio="0.5" />
    </EventTrigger>

    </Window.Triggers>
    <Grid>
      <StackPanel>
        <Rectangle
          x:Name="rect1"
          Width="50"
          Height="100"
          Stroke="Black"
          Fill="CornflowerBlue"
          Margin="5" />

        <Ellipse
          x:Name="ellipse1"
          Width="50"
          Height="50"
          Stroke="Black"
          Fill="Firebrick"
          StrokeThickness="1"
          Margin="5" />

        <Rectangle
          x:Name="rect2"
          Width="50"
          Height="100"
          Stroke="Black"
          Fill="CornflowerBlue"
          Margin="5" />

        <StackPanel Orientation="Horizontal">
          <Button x:Name="btnBegin" Content="Begin" />
          <Button x:Name="btnPause" Content="Pause" />
          <Button x:Name="btnResume" Content="Resume" />
          <Button x:Name="btnStop" Content="Stop" />
          <Button x:Name="btnSeek" Content="Seek" />
          <Button x:Name="btnSkipToFill" Content="Skip To Fill" />
          <Button x:Name="btnDoubleSpeed" Content="Double Speed" />
          <Button x:Name="btnHalfSpeed" Content="Half Speed" />
        </StackPanel>
    </StackPanel>
  </Grid>
</Window>

The following XAML demonstrates how to use an animation that uses DiscreteStringKeyFrame objects to animate the Text property of a System.Windows.Controls.TextBlock control.

<Window
  x:Class="Recipe_11_18.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Recipe_11_18"
  Height="130"
  Width="200">
  <Window.Resources>
    <Storyboard
      x:Key="StringAnimationStoryboard">
      <StringAnimationUsingKeyFrames
        AutoReverse="True"
        Storyboard.TargetName="MyTextBox"
        Storyboard.TargetProperty="Text">
        <DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
        <DiscreteStringKeyFrame Value="H" KeyTime="0:0:0.5" />
        <DiscreteStringKeyFrame Value="He" KeyTime="0:0:1" />
        <DiscreteStringKeyFrame Value="Hel" KeyTime="0:0:1.5" />
        <DiscreteStringKeyFrame Value="Hell" KeyTime="0:0:2" />
        <DiscreteStringKeyFrame Value="Hello" KeyTime="0:0:2.5" />
        <DiscreteStringKeyFrame Value="Hello T" KeyTime="0:0:3" />
        <DiscreteStringKeyFrame Value="Hello Th" KeyTime="0:0:3.5" />

<DiscreteStringKeyFrame Value="Hello Tha" KeyTime="0:0:4" />
        <DiscreteStringKeyFrame Value="Hello Thar" KeyTime="0:0:4.5" />
        <DiscreteStringKeyFrame Value="Hello Thar!" KeyTime="0:0:5" />
        <DiscreteStringKeyFrame Value="Hello Thar!" KeyTime="0:0:5.5" />
      </StringAnimationUsingKeyFrames>
    </Storyboard>
  </Window.Resources>
  <DockPanel>
    <TextBlock
      x:Name="MyTextBox"
      DockPanel.Dock="Top"
      FontSize="30"
      Margin="5" HorizontalAlignment="Center" />
    <Button
      Content="Start Animation"
      Width="100"
      Height="20">
      <Button.Triggers>
        <EventTrigger
          RoutedEvent="Button.Click">
          <BeginStoryboard
            Storyboard="{DynamicResource StringAnimationStoryboard}" />
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </DockPanel>
</Window>

Figure 11-8. The result of the text animation