c# - 如何反转 WPF Storyboard动画？

Question

我在 Expression Blend 4 中的图像上创建了 WPF Storyboard动画。悬停时，图像逐渐模糊。当鼠标离开图像时，有什么办法可以撤消或反转 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 的教程:

• MORE ARTICLES ON VISUAL STATE MANAGER