Animate ImageBrush Transition

Question

I am building a WPF app to slideshow a sequence of images. For now, the slideshow images are hard-coded in the code behind class. The slideshow starts and stops by clicking the Click me button. I deliberately chose ImageBrush to be applied to Background property of Grid control, in place of the expected first choice of Image control, because I found that using Image.Source produces issues with the DispatcherTimer accuracy. Some images were displayed as expected, i.e., they followed timer.Interval, some were delayed, some were too short.

I want to add fade in and out transition animation as the images cycle. How do I do that?

Here is the current state of the XAML:

<Window x:Class="Temp.MainWindow"
    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:Temp"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid x:Name="gridBackground">

    <Button Width="100" Height="40" VerticalAlignment="Bottom" Click="btnClickMe_Click">
        Click me
    </Button>
    
</Grid>
</Window>

And here is the code behind:

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Threading;

public partial class MainWindow : Window
{
    private DispatcherTimer timer;
    private Brush[] colors;
    private int counter;

    public MainWindow()
    {
        counter = 0;
        colors = new Brush[]
        {
            new ImageBrush(new BitmapImage(new Uri(@"C:\Users\boris\Desktop\Stikeri\02.png", UriKind.Absolute))) { Stretch = Stretch.Uniform },
            new ImageBrush(new BitmapImage(new Uri(@"C:\Users\boris\Desktop\Stikeri\03.png", UriKind.Absolute))) { Stretch = Stretch.Uniform },
            new ImageBrush(new BitmapImage(new Uri(@"C:\Users\boris\Desktop\Stikeri\04.png", UriKind.Absolute))) { Stretch = Stretch.Uniform },
            new ImageBrush(new BitmapImage(new Uri(@"C:\Users\boris\Desktop\Stikeri\05.png", UriKind.Absolute))) { Stretch = Stretch.Uniform },
            new ImageBrush(new BitmapImage(new Uri(@"C:\Users\boris\Desktop\Stikeri\06.png", UriKind.Absolute))) { Stretch = Stretch.Uniform },
        };

        timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 2);
        timer.Tick += Timer_Tick;

        InitializeComponent();
    }

    private void Timer_Tick(object sender, EventArgs e)
    {
        if (counter == colors.Length)
        {
            counter = 0;
        }
        gridBackground.Background = colors[counter];

        counter++;
    }

    private void btnClickMe_Click(object sender, RoutedEventArgs e)
    {
        timer.IsEnabled = !timer.IsEnabled;
    }
}

If I am way off with my current approach, I'd be OK with ditching the DispatcherTimer in favor of some kind of animation defined in the code behind. I would, however, prefer to just slap some animation to the code I have already, if that is possible. Thank you!