Question

我有一个非常基本的用户控件，带有一个带图像的按钮。我想通过将按钮的图像更改为不同的图像来为该图像设置动画。

<UserControl.Resources>
    <Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" />
    <Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8"  />

</UserControl.Resources>
    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="MouseStates">
            <VisualState Name="MouseHover" >
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="GlyphButton"
                                Storyboard.TargetProperty="Content"
                                Duration="0:0:1" >
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                <DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" />
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState Name="MouseNotHover" >
            </VisualState>
        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>
    <Button x:Name="GlyphButton" 
            MouseLeave="GlyphButton_MouseLeave"
            MouseEnter="GlyphButton_MouseEnter"
            Content="{StaticResource GlyphDefault}"
            />
</Grid>

不幸的是，当我运行它并将鼠标悬停在按钮上时，我得到“Freezable无法冻结”异常（鼠标事件处理程序更改状态）。它似乎试图冻结当前的图像，但不能出于某种原因。

我尝试过这样做而不使用静态资源（只是将图像内联），但同样的错误。奇怪的是，我可以找到很少关于在Content属性上做动画的文档或博客。我不得不想象这将是一个常见的场景。关于我做错了什么的想法？

非常感谢您对此的帮助！

Answer 1

这可能不是最好（或最简单）的方法。 Content属性绝对不是WPF设计者对动画的想法。以下是我将如何做到这一点：

将Button.Content设置为Grid，同时放置两个图像（因此，彼此重叠）。
将您希望最初可见的Opacity上的Image设置为Image上的1.0和0.0，以便最初隐藏。
使用Opacity而不是DoubleAnimation为ObjectAnimation设置动画效果 - 您可以通过将一个人的不透明度设置为0.0来同时将另一个设置为1.0来切换图像。此外，根据持续时间，这将给你一个很好的渐变过渡。

如何在WPF中为图像内容添加动画效果？

1 个答案: