How to Reverse WPF Storyboard animation?

Question

I've created a WPF Storyboard animation on an image in Expression Blend 4. On hover, the image gradually blurs. Is there any way I can have the Storyboard be undone or reversed when the mouse leaves the image? I could make it trigger Storyboard.Remove() but that wouldn't actually play through the Storyboard backwards.

Is there any way I can accomplish that within Expression Blend 4?

Answer 1

Since you are using Blend, you should take advantage of Blend's support for the VisualStateManager. All you have to do is describe what the object looks like in its various states, like MouseOver and Normal and how long the transitions between various states are, and the visual state manager works out how to transition between states.

An image doesn't have any visual states but you can edit a Button template and make its content an image and then edit the states for the button. I've done this and cleaned up the XAML to demonstrate the technique:

<Grid>
    <Grid.Resources>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0">
                            <Image.Effect>
                                <DropShadowEffect ShadowDepth="0"/>
                            </Image.Effect>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="15"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Image>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Button Style="{StaticResource ButtonStyle1}"/>
</Grid>

Note that Blend does all this for you but understanding the XAML will help. Here's a Blend-oriented tutorial:

• MORE ARTICLES ON VISUAL STATE MANAGER