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 ?

Answer 1

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.