Unable to animate an object's border in Expression Blend using brush resources

Question

I'm trying to animate an object's border color using Expression blend.

Whenever I change the border's value within a Storyboard to that of a brush resource I created previously, the object's base border changes instead of it being animated. If I change the value of the property to that of a base value (i.e.: I don't use a brush resource), the animation works as intended.

Can't we animate color properties using brush resources ?

Here is the code generated by Expression Blend when using a hardcoded color value for the border (this code works, the animation plays properly, but the border's value is hard-coded):

<Style x:Key="StandardTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
    (...)
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid x:Name="grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                        (...)
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0" To="Focused">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFC2C2C2"/>
                                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF5FA5C9"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    (...)
</Style>

How can I replace the hard-coded value #FF5FA5C9 to that of a local brush resource ? Should I just replace the Value="#FF5FA5C9" statement with a DynamicResource / StaticResource statement ?

score 2 · Accepted Answer · answered Jan 06 '12 at 14:58

I might recommend, instead of trying to animate to a brush resource, just make another copy your rectangle shape and name it something like Rectangle_Focused and place it in order over your existing rectangle so it appears over your original rectangle.

Add your border brush resource to this shape and then set the shapes visibility to collapsed. Then in your focused state, or mouseover state, or whatever you like, change its visibility back to visible. Kind of like;

<VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Copy">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

Dont ask me why, but animating to a brush resource in the same object just doesnt cut it, but you can accomplish the same effect you're looking for though like this.

Thanks Chris, that is indeed a very clever solution ! Is there an advantage of using a Brush resource over a Color resource ? (See my answer). Indeed, being unable to animate using a Brush Resource is just weird... — Hussein Khalil, Jan 06 '12 at 15:00
Well with a brush resource you can accomplish better visual effects like Linear or Radial Gradients etc. As opposed to being limited to only solid colors. So in a lot of cases depending on your designs it's definitely far more helpful to still have access to your brush resources. — Chris W., Jan 06 '12 at 15:03

score 1 · Answer 2 · answered Jan 06 '12 at 14:55

I believe I have found the problem.

For some reasons, assigning a stroke's value as that of a local Brush resource does not create a keyframe in an animation's storyboard:

Here's what you should NOT do:

https://i.stack.imgur.com/k068D.jpg

Instead, you have to create a Color local resource and assign it like this:

https://i.stack.imgur.com/8ZblA.jpg

The keyframe in the storyboard will be properly created and the animation will work.

A bug in Expression Blend maybe ? Is this working as it should ? No idea :)

This is a better solution than overblending another shape, thank you lets hope EB will support "Brush-Keyframing" soon :) — kneo, Nov 09 '12 at 15:49

Unable to animate an object's border in Expression Blend using brush resources

2 Answers2