Using TemplateBinding in ObjectAnimationUsingKeyFrames

Question

I try to set the background color of a control when mouse is over it. I try to do it via the visual state manager. I was able to get the following code running:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Control.Background" Storyboard.TargetName="BorderBackground">
    <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
            <SolidColorBrush Color="#FF123456" />
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

But i do not want to set the color in the template, but bind it to a value of the control. I tried it with the 'Tag'-property in the following way:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Control.Background" Storyboard.TargetName="BorderBackground">
    <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
            <SolidColorBrush Color="{TemplateBinding Tag}" />
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

and setting the Tag-Property of the control that is using this style to '#FF123456'.

But this doesn't work. It doesn't left me an error message, it simply doesn't change the backgroundcolor. Anybody knows, what the problem might be?

Thanks in advance,
Frank

Answer 1

Unfortunately the way you're trying to do it won't work in Silverlight. The VisualStateManager animations are not part of the display tree, so you can't use binding. You have options though, StaticResources (aka setting up colours in the resource dictionary) and code based animations are different workarounds (depending on exactly what you want to do). For the latter check out a thread where I asked a similar question: How can I animate a property dynamically in a Silverlight 4 UserControl?

Answer 2

You cannot do it dynamically on a single target, but what you can do is create another target (for example called BorderBackgroundAlt) whose background you can explicitly set to {TemplateBinding Tag} in its declaration.

Then you can have BorderBackgroundAlt collapsed by default, and in your animation frame instead of switching colors, switch visibilities, such that BorderBackground is collapsed and BorderBackgroundAlt is visible.