Fade in new image and simultaneously fade out old image WPF-CodePudding

I am trying to figure out how to have a new image fade in and simultaneously have the old image fade out. I initially thought of using two double animations, one for fade in and another for fade out that on completion trigger each other, however that doesn't work for me since I need one image to fade in while the other is fading out and I don't know how to go about doing it.

What I attempted to do:

XAML:

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Animation"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid x:Name="gridTest">
        <StackPanel x:Name="stkHeaderBar" Grid.Row="0"
         Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button x:Name="btnChangeImg" Content="Change Image"
             Click="btnChangeImage_Click"/>
            <Image x:Name="img"></Image>
        </StackPanel>
    </Grid>

Code behind:

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Animation
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
  
        }
        private void btnChangeImage_Click(object sender, RoutedEventArgs e)
        {

            DoubleAnimation fadeIn = new DoubleAnimation
            {
                From = 0,
                To = 1,
                Duration = TimeSpan.FromSeconds(2)
            };

            DoubleAnimation fadeOut = new DoubleAnimation
            {
                From = 1,
                Duration = TimeSpan.FromSeconds(2),
            };

            fadeOut.Completed  = (o, e) =>
            {

                img.Source = new BitmapImage(new Uri(@"C:\images.jpg"));
                img.BeginAnimation(OpacityProperty, fadeIn);
            };


            fadeIn.Completed  = (o, e) =>
            {

                img.Source = new BitmapImage(new Uri(@"C:\images.jpg"));
                img.BeginAnimation(OpacityProperty, fadeOut);
            };



            img.Source = new BitmapImage(new Uri(@"C:\images1.jpg"));
            img.BeginAnimation(OpacityProperty, fadeIn);
        }
    }
}

CodePudding user response：

You're over-complicating it, just put both images in a Grid so that they overlap:

<Grid>
    <Image x:Name="img1" Stretch="UniformToFill"></Image>
    <Image x:Name="img2" Stretch="UniformToFill"></Image>
</Grid>

The first image can have its opacity stay at 1.0 the whole time, and then you just animate the second image to fade in over top of it:

    private void btnChangeImage_Click(object sender, RoutedEventArgs e)
    {
        DoubleAnimation fadeIn = new DoubleAnimation
        {
            From = 0,
            To = 1,
            Duration = TimeSpan.FromSeconds(2)
        };

        img1.Source = new BitmapImage(new Uri(@"C:\image1.jpg"));
        img2.Source = new BitmapImage(new Uri(@"C:\image2.jpg"));
        img2.BeginAnimation(OpacityProperty, fadeIn);
    }

If you want to be thorough then you can use your fadeIn.Completed handler to remove img1 when the animation is complete, but I normally wouldn't worry about that unless it was a time-critical application.