title: WPF Controls: How to Reference Resources in Animations?
body: <p>I have written a control and successfully created a storyboard to cause an animation during triggered events. It changes the fill of an ellipse for a duration of time. Instead of writing a new <code>RadialGradientBrush</code> each time I need to change the fill, I provided two of them in the resources.</p>
  
  <p><strong>EDIT</strong>:
  I have an <code>Ellipse</code> that is the main component to the control and is what is affected by the animation. It's implementation is simple and looks like this:</p>
  
  <pre><code>&lt;Ellipse Name="myEllipse" Style="{StaticResource DimStyle}" /&gt;
  </code></pre>
  
  <p>When I add it to the storyboard (instead of referencing the brush as a resource), my animation works as intended. When I reference the brush as a resource I get this exception:</p>
  
  <p><code>"Cannot find resource named 'IlluminatedStyle'. Resource names are case sensitive."</code></p>
  
  <p>Inside of the storyboard, this is where it is currently referenced:</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;Storyboard x:Key="Foo"&gt;
          &lt;ObjectAnimationUsingKeyFrames&gt;
              &lt;ObjectAnimationUsingKeyFrames.KeyFrames&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.01" Value="{StaticResource IlluminatedStyle}" /&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.85" Value="{StaticResource DimStyle}" /&gt;
              &lt;/ObjectAnimationUsingKeyFrames.KeyFrames&gt;
          &lt;/ObjectAnimationUsingKeyFrames&gt;
       &lt;/Storyboard&gt;
  &lt;/UserControl.Resources&gt;
  </code></pre>
  
  <p>The styles are closely identical and only the <code>GradientStop</code> color properties differ so I'll provide only one style for an example.</p>
  
  <p><strong>The Style Referenced</strong></p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;Style x:Key="IlluminatedStyle" TargetType="Ellipse"&gt;
          &lt;Setter Property="Fill"&gt;
              &lt;Setter.Value&gt;
                  &lt;RadialGradientBrush&gt;
                      &lt;GradientStop Color="#FF215416" Offset="1"/&gt;
                      &lt;GradientStop Color="#FE38DA2E" Offset="0"/&gt;
                      &lt;GradientStop Color="#FE81FF79" Offset="0.688"/&gt;
                  &lt;/RadialGradientBrush&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/UserControl.Resources&gt;
  </code></pre>
  
  <p>So how do I correctly reference a style such as this in my <code>Storyboard</code>?  </p>
  
  <p><strong>Note</strong>: The <code>Storyboard</code> and <code>Style</code> are both contained within the same <code>UserControl.Resources</code> tag but broken out for this example.</p>
  
  <p><strong>EDIT</strong><br>
  I put the <code>Style</code> before the <code>Storyboard</code> in <code>UserControl.Resources</code> and now I get an exception stating:</p>
  
  <pre><code>  "This Freezable cannot be frozen.
     at System.Windows.Freezable.Freeze()
     at System.Windows.Freezable.GetCurrentValueAsFrozen()
     at System.Windows.Media.Animation.TimelineCollection.GetCurrentValueAsFrozenCore(Freezable source)
     at System.Windows.Freezable.CloneCoreCommon(Freezable sourceFreezable, Boolean useCurrentValue, Boolean cloneFrozenValues)
     at System.Windows.Media.Animation.Timeline.GetCurrentValueAsFrozenCore(Freezable sourceFreezable)
     at System.Windows.Freezable.GetCurrentValueAsFrozen()
     at System.Windows.Media.Animation.Clock..ctor(Timeline timeline)
     at System.Windows.Media.Animation.TimelineGroup.AllocateClock()
     at System.Windows.Media.Animation.Clock.AllocateClock(Timeline timeline, Boolean hasControllableRoot)"
  </code></pre>