Search code examples
c#wpfsilverlightexpression-blendvisualstatemanager

Using local brush resources for Visual States

I'm trying to template a button in Blend and I have the following structure:

General structure of the button template.

What I would like to do is to change the background color of the button using Visual States when it is in the MouseOver state.

When it starts recording an animation for the MouseOver state I choose a solid color brush and everything looks fine:

Choosing a solid color brush.

Animation is successfully captured.

But when I choose a local brush resource, rather than a solid color brush and it keeps removing the animation:

Choosing a local brush resource

The message showing that the animation is removed.

Animation is gone now.

What am I missing here?

Solution

  • Apparently this is not supported in Expression Blend 4, but supported in Blend for Visual Studio 2012. One way to do it by hand is to use ObjectAnimationsUsingKeyFrames:

    <VisualState x:Name="MouseOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="LayoutRoot">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WindowCaptionButtonPressedBackgroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

    (This is exactly what Blend for Visual Studio 2012 does.)