Animating properties of the content of a template in Silverlight

Question

Let's say I have a control like this:

<Button Style="{StaticResource MyButton}">
     <Polygon Style="{StaticResource MyButtonIcon}"
              Points="... some points ..." />
</Button>

MyButton is the style for the background of the button while MyButtonIcon is the style of the button icon polygon itself. I'd like to subtly animate the button when the user hovers the mouse over the button. I can manage to animate the background (defined in MyButton) the usual way in the template (VisualStateManager / VisualState / MouseOver / StoryBoard / ColorAnimation). To get an idea, my ColorAnimation declaration looks something likes this:

<ColorAnimation Storyboard.TargetName="BackgroundTop"
                Storyboard.TargetProperty="Color"
                To="#FFFFFF"
                Duration="0:0:0.200" />

This works well for the background. However, I'd like to animate the colours of the gradient stops of the content polygon as well. I can't just put the animation in MyButtonIcon because I want the polygon to be animated when the mouse hovers over anywhere the button, not just the polygon within the button. I suppose it will look something like this:

<ColorAnimation Storyboard.TargetName="MyContentPresenter"
                Storyboard.TargetProperty="Some.Really.Long.Path.Color"
                To="#FFFFFF"
                Duration="0:0:0.200" />

The question is: what should be the value of "Some.Really.Long.Path.Color"? That is, say for instance, if I want to access the color property of the first gradient stop of the "Fill" of the polygon inside the content presenter, how would I go by doing that? Or am I trying to do it in a completely wrong way?

I hope I was clear and provided enough details, let me know if you need to know more.

Answer 1

Try this for Storyboard.TargetProperty in your ColorAnimation:

Storyboard.TargetProperty =
"(MyContentPresenter.MyButtonIcon.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"

I'm not sure if the (MyContentPresenter.MyButtonIcon.Fill) part is right, but the rest of it should be. If this doesn't work, play around with (MyContentPresenter.MyButtonIcon.Fill) until it's pointing to your GradientBrush, and the rest should fall into place.

And I suppose it goes without saying, but I'll say it just in case: (GradientBrush.GradientStops)[0] refers to the first GradientStop within your GradientBrush; just change the index to refer to a different one.

Hope this helps!