Fade In-Out for image in WPF

Question

How can i implement FadeIn and then FadeOut image when i change image source like slide show. my images load from local and web and count of that is varaible. Thankyou

Answer 1

You could write an extension method that fades out the image by animating its Opacity property to 0, then sets the Source property and finally animates the opacity back to 1.

public static void ChangeSource(
    this Image image, ImageSource source, TimeSpan fadeOutTime, TimeSpan fadeInTime)
{
    var fadeInAnimation = new DoubleAnimation(1d, fadeInTime);

    if (image.Source != null)
    {
        var fadeOutAnimation = new DoubleAnimation(0d, fadeOutTime);

        fadeOutAnimation.Completed += (o, e) =>
        {
            image.Source = source;
            image.BeginAnimation(Image.OpacityProperty, fadeInAnimation);
        };

        image.BeginAnimation(Image.OpacityProperty, fadeOutAnimation);
    }
    else
    {
        image.Opacity = 0d;
        image.Source = source;
        image.BeginAnimation(Image.OpacityProperty, fadeInAnimation);
    }
}