在 ViewModel PropertyChanging / PropertyChanged 上触发动画

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

要淡出旧图像并淡入新图像并不容易。在您的情况下，我会执行以下操作来保持良好的关注点分离：

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

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

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

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