如何反转WPF Storyboard动画？

Question

我在Expression Blend 4中的图像上创建了一个WPF Storyboard动画。在悬停时，图像逐渐模糊。 当鼠标离开图像时，有什么方法可以让故事板撤消或撤消？ 我可以让它触发Storyboard.Remove（），但实际上它不会通过Storyboard向后播放。

有什么方法可以在Expression Blend 4中实现吗？

Answer 1

由于您使用的是Blend，因此您应该利用Blend对VisualStateManager的支持。 您所要做的就是描述对象在各种状态下的状态，如MouseOver和Normal以及各种状态之间的转换时间，以及可视状态管理器计算如何在状态之间转换。

图像没有任何视觉状态，但您可以编辑Button模板并使其内容成为图像，然后编辑按钮的状态。 我已经完成了这个并清理了XAML以演示该技术：

<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>

请注意，Blend会为您完成所有这些操作，但了解XAML会有所帮助。 这是一个面向Blend的教程：

• 有关视觉状态管理器的更多文章

Answer 2

也许解决方案就是这个答案：

如何使用C＃/ WPF在MouseEnter和MouseLeave事件上为ListBox项设置动画？