How to load images asynchronously and display overall progress in the Progress Bar?

Question

WPF

The essence of the task: write a WPF application that can load images from the Internet. You need to do this independently of other pictures. It should also be possible to load everything together. Overall progress is displayed on the Progress Bar.
Screenshot of the designed window:

I have a problem with events and passing parameters to them.
I imagine that there should be one function, for example, Downloading, which takes the address of an image on the Internet and draws this image in the corresponding box after downloading. Pressing one of the Start buttons calls this function with its URL and ImageBox. Saw something similar in this question: Progress Bar & Thread in C#?

private void Downloading(string url) 
{ 
WebClient webload = new WebClient(); 

webload.DownloadFileCompleted += new AsyncCompletedEventHandler(Completed); 
webload.DownloadProgressChanged += new DownloadProgressChangedEventHandler(ProgressChanged); 
webload.DownloadFileAsync(new Uri(url), DataPath + Path.GetFileName(url)); 
}

When I write the Completed function, I want to pass the address of the photo on the computer and the number of the ImageBox where to draw the image. Here are the commands that draw:

ImageSourceConverter converter = new ImageSourceConverter(); 
ImageSource imageSource = (ImageSource)converter.ConvertFromString(DataPath + Path.GetFileName(url1)); 
ImageBox1.Source = imageSource;

So far I'm working with only one picture.
I suspect that it is not necessary and, in principle, impossible to pass some parameters to Completed.
Maybe write a new class for the image, in which to store the address on the Internet, the address on the computer, the number of the box? But the problem with passing this object will still persist.
I also thought of writing a new function, for example, DrawImage and let it draw. But then I don't know how to set a condition in Downloading so that rendering starts only after the download is completed.
What should I do in this situation?

Answer 1

We read what MVVM and async/await are, create a UserControl with type layout

<Grid>
            <Image Source="{Binding Path=ViewModel.ImageSource, Mode=OneWay}"/>
            <ProgressBar Value="{Binding Path=ViewModel.DownloadProgres, Mode=OneWay}"/>
 </Grid>

We create a ViewModel for the control with the necessary fields using the async Task Download() method.
now in the ViewModel of the main window we make a method that accepts the Task array, let's say startDownloadImage(params Task[] tasks) and perform these tasks (await Task.WhenAll(tasks)).
As a result, we receive from each button a task from the corresponding UserControl`a, and if you need to download everything, then we transfer all the tasks at once.
something like this, if you do not understand, then write