title: Change an image during animation using storyboard
body: <p>I was looking for a way to change an <em>Image</em> during a storyboard, or more specifically, change the <code>Source</code> property of the image to point to a new image resource. There seems to be a <code>StringAnimationUsingKeyFrames</code> and a <code>DiscreteStringKeyFrame</code> but this does not work (as far as I can tell) since the Source property of the Image is of type <code>ImageSource</code></p>
  
  <p>My current storyboard looks like this</p>
  
  <pre><code>&lt;Storyboard x:Key="TransitionImage"&gt;
      &lt;DoubleAnimationUsingKeyFrames
          BeginTime="00:00:00" 
          Storyboard.TargetName="image" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/&gt;
      &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;StringAnimationUsingKeyFrames
          BeginTime="00:00:00"
          Storyboard.TargetName="image"
          Storyboard.TargetProperty="(Image.Source)"&gt;
          &lt;!-- This does not work --&gt;
          &lt;DiscreteStringKeyFrame KeyTime="00:00:00.7000000" Value="check_24.png"/&gt;
      &lt;/StringAnimationUsingKeyFrames&gt;
      &lt;DoubleAnimationUsingKeyFrames 
          BeginTime="00:00:00" 
          Storyboard.TargetName="image"
          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.2"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/&gt;
      &lt;/DoubleAnimationUsingKeyFrames&gt;
  &lt;/Storyboard&gt;
  </code></pre>
  
  <p>and the image</p>
  
  <pre><code>&lt;Image x:Name="image" 
         Source="delete_24.png"
         Width="32" Height="32"
         Margin="8"
         RenderTransformOrigin="0.5,0.5"&gt;
      &lt;Image.RenderTransform&gt;
          &lt;TransformGroup&gt;
              &lt;ScaleTransform/&gt;
              &lt;SkewTransform/&gt;
              &lt;RotateTransform/&gt;
              &lt;TranslateTransform/&gt;
          &lt;/TransformGroup&gt;
      &lt;/Image.RenderTransform&gt;
  &lt;/Image&gt;
  </code></pre>
  
  <p>Can I change the <code>Source</code> of the image as part of the storyboard or am I out of luck?</p>