Question

Inside our WPF application We have IObservable which gets populated from our server. as we are moving to new .NET 4.5 features (async, await), at first we only load ReturnItems withou image an after its successful download we use Parallel.Foreach() to load associated images as well.

when image download completes for each item byte[] is assigned to ReturnItems CoverImage property and from my UI DataTemplate s Image element is bound to this property as well.

What I want to achieve is animate this image load process so there is some sort of fadein from nothing animation when image completes loading. I want to use storyboards if possible.

Answer 1

I assume that before you set the source of the image it is null, i.e. it’s not an empty array or similar. If so, use this style for the image:

<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>