How to make animated image switching in WPF?

Question

WPF

I just can not figure out how to make a smooth transition from one picture to another. There are 4 pictures, they are filled in List<>. The image is located on the form, the image is displayed in it, how to make a smooth smooth transition between the pictures.

Answer 1

Use triggers:
In XAML:

<Image Source="{Binding CurrentImage}" >
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)" From="0" To="1" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

<Button Content="Next image" MouseLeftButtonDown="NextImageClick"/>

In the model class:

public BitmapImage CurrentImage { get; set; }

public List<BitmapImage> Images { get; set; }

private int _imageIndex = 0;

public void NextImageClick(object sender, MouseButtonEventArgs e)
{
   if (_imageIndex >= Images.Count) _imageIndex = 0;
   CurrentImage = Images[imageIndex];
   RaisePropertyChanged("CurrentImage");  //необходимо реализовать INotifyPropertyChanged в классе модели
   _imageIndex++;
}

It should work :)
If necessary, you can make any other animation.