title: How do I animate image content in WPF?
body: <p>I have a really basic user control with a button that has an image.  I want to animate the image of the button, by changing it to a different image.</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" /&gt;
      &lt;Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8"  /&gt;
  
  &lt;/UserControl.Resources&gt;
      &lt;Grid&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup Name="MouseStates"&gt;
              &lt;VisualState Name="MouseHover" &gt;
                  &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames
                                  Storyboard.TargetName="GlyphButton"
                                  Storyboard.TargetProperty="Content"
                                  Duration="0:0:1" &gt;
                          &lt;ObjectAnimationUsingKeyFrames.KeyFrames&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0:0:1"&gt;
                                  &lt;DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" /&gt;
                              &lt;/DiscreteObjectKeyFrame&gt;
                          &lt;/ObjectAnimationUsingKeyFrames.KeyFrames&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
              &lt;VisualState Name="MouseNotHover" &gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
  
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;Button x:Name="GlyphButton" 
              MouseLeave="GlyphButton_MouseLeave"
              MouseEnter="GlyphButton_MouseEnter"
              Content="{StaticResource GlyphDefault}"
              /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>Unfortunately, when I run this, and hover over the button I get "Freezable cannot be frozen" exception (the Mouse event handlers change the states).  It appears that it's trying to freeze the current image, but can't for some reason.</p>
  
  <p>I've tried doing it without using a static resource (just putting the Image inline) too, but same error.  Oddly, I can find very little documentation or blogs about doing animations on the Content property.  I'd have to imagine this would be a common scenario.  Any ideas as to what I'm doing wrong?</p>
  
  <p>I greatly appreciate your help on this!</p>