如何扭转WPF故事板动画？ [英] How to Reverse WPF Storyboard animation?

问题描述

我创建了一个图像上的WPF动画故事板在Expression Blend 4悬停，图像模糊逐渐。有什么办法，我可以有故事板被撤销或者当鼠标离开图像逆转吗？我可以使它触发Storyboard.Remove（），但实际上不会通过故事板打反了。

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.

有没有什么办法可以实现这一目标的Expression Blend 4中？

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

推荐答案

由于您使用的配方，你应该充分利用混合的对 VisualStateManager 。所有你需要做的是描述对象看起来像各种状态的东西，如鼠标悬停和正常多久各种状态之间的转换都和视觉状态管理器的工作原理如何态之间转换。

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.

这是图像没有任何可视状态，但你可以编辑按钮模板，并对其内容的图像，然后编辑该国的按钮。我已经做到了这一点，并清理了XAML来演示技巧：

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>

需要注意的是混合做的一切都是为了你，但了解XAML会有所帮助。这里有一个面向混合教程：

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

这篇关于如何扭转WPF故事板动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！