wpf - 在 ViewModel PropertyChanging/PropertyChanged 上触发动画

Question

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

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

我尝试了以下摘自 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，您应该在 View 模型中执行步骤 1 并设置引发 PropertyChanged 的相应属性。否则只需手动更新我在步骤 3 中提到的相应控件。
3. 实现一个自定义的 ContentControl，它实际上完成了繁重的工作:当它的 Content 属性发生变化时，它会淡出旧内容并淡入新内容。这是最难的部分，但如果您引入这个新控件，您可以像以前一样编写 View 模型，并将所有淡入淡出的内容留给这个新控件。

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

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

如有任何疑问，欢迎随时提问。我希望我能帮助你解决这个问题。