基于网络响应的WPF图像动画

Question

在我们的WPF应用程序中，我们有一个IObservable，它是从我们的服务器中获取的。当我们转向新的。net 4.5特性(async, await)时，首先我们只加载没有图像的ReturnItems，在成功下载后，我们使用Parallel.Foreach()来加载相关的图像。

当图像下载完成时，每个项目的byte[]被分配给ReturnItems的CoverImage属性，并且从我的UI DataTemplate的image元素也被绑定到这个属性。

我想要实现的是动画这个图像加载过程，所以当图像完成加载时，有某种淡出动画。如果可能的话，我想使用故事板。

Answer 1

我假设在您设置图像的来源之前它是null，即它不是空数组或类似的。如果是这样，则对图像使用以下样式:

<Style x:Key="StyleImageFadeIn"
       TargetType="{x:Type Image}">
    <Setter Property="Opacity"
            Value="0" />
    <Style.Triggers>
        <!--Sets visibility to Collapsed if Source is null - this will cause IsVisible to be false-->
        <Trigger Property="Source"
                 Value="{x:Null}">
            <Setter Property="Visibility"
                    Value="Collapsed" />
        </Trigger>
        <!--Fades-in the image when it becomes visible-->
        <Trigger Property="IsVisible" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             To="1"
                                             Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <!--This (ExitActions) is only necessary if the image is "loosing" its source at run-time-->
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             To="0"
                                             Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>