Question

在WPF项目中，我有一个ItemsControl绑定到ViewModel的集合。它的ItemTemplate包含一个绑定到对象集合属性的Image控件。我有一个计时器，它每分钟从JSON服务获取新图像，并将它们分配给绑定到图像的属性。

我想做的是在属性发生变化时触发一个简单的动画。特别是，我希望在将新图像分配给我的属性之前触发一个简单的淡出动画，这将涉及PropertyChanging事件，以及PropertyChanged上的淡入动画，这样我就可以从旧图像平滑过渡到新图像在我的视图中的图像。

我已尝试从another question获取以下内容，但在属性更改后触发动画，这不是我想要的：

<Image 
    x:Name="ChannelImage"
    Width="230" Height="230" 
    Source="{Binding ImageByteArray, Converter={StaticResource ByteArrayToBitmapImageConverter}, 
                                     NotifyOnTargetUpdated=True}">
    <Image.Triggers>
        <EventTrigger RoutedEvent="Binding.TargetUpdated">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="ChannelImage"
                        Storyboard.TargetProperty="Opacity"
                        BeginTime="0:0:0"
                        Duration="0:0:1"
                        To="0"/>
                    <DoubleAnimation 
                        Storyboard.TargetName="ChannelImage"
                        Storyboard.TargetProperty="Opacity"
                        BeginTime="0:0:2"
                        Duration="0:0:1"
                        To="1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

非常感谢任何帮助。

Answer 1

淡出旧图像并淡化新图像并不容易。在您的情况下，我会采取以下措施来保持良好的关注点分离：

从uri中获取图像并在代码中创建新的Image。如果您需要更多信息，请查看this question on Stack Overflow。
如果要应用MVVM，则应在视图模型中执行步骤1并设置引发PropertyChanged的相应属性。否则，只需手动更新我在步骤3中提到的相应控件。
实现实际执行繁重工作的自定义ContentControl：当其Content属性发生更改时，它会淡化旧内容并淡入新内容。这是最难的部分，但是如果你引入这个新控件，你可以像以前一样编写视图模型，并将所有渐弱的东西留给这个新控件。

我已经为您实现了一个小项目，您可以通过此Dropbox link下载（需要.NET 4.5）。我创建了类AnimatedContentControl，它是一个WPF自定义控件，在其默认控件模板中有两个内容展示器。在此控件上设置Content属性后，旧内容将分配给淡出的OldContent依赖项属性。之后，新内容将逐渐淡入。所有这些都是使用作为控件模板的一部分的故事板FadeInFromRight来完成的。资源。此故事板以OnContentChanged中的覆盖方法AnimatedContentControl.cs启动。

其他类只是使用默认MVVM模式的MainWindow和MainWindowViewModel。

如果您有任何疑问，请随时提出。我希望我能帮助你解决这个问题。

在ViewModel PropertyChanging / PropertyChanged上触发动画

1 个答案: