如何反轉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項設置動畫？