How to resize images efficiently in C#?

Question

I was searching for around 4 months in order to solve image-flicker problem for my 180 controls, (similar to image-boxes) which are inserted into a flow-layout-panel. I nearly tried everything (Enabling double flicker and so on...) and nothing worked for me. But, today I figured a solution and that's by setting image size-mode to normal instead of zoom or to resize my images to fit exactly into those controls similar to picture-boxes. So I chose the second option and here is my code:

public MovieControl(Movies M1, bool show, MainForm current)
{
    InitializeComponent();
    Current = current;
    if (M1.movie_Banner == "") bunifuImageButton1.Image = Properties.Resources.no_image_available;
    else
    {
        WebClient client = new WebClient();
        Stream stream = client.OpenRead(M1.movie_Banner);
        Bitmap bitmap; bitmap = new Bitmap(stream);
        if (bitmap != null)
            bunifuImageButton1.Image = new Bitmap((Image)bitmap, new Size(139, 208));
        stream.Flush();
        stream.Close();
        client.Dispose();
    }
    bunifuImageButton1.Tag = M1;
    M1 = null;
}

Also, I want to mention that this code is being called by a thread using the following lines:

private void RunMoviesThread()
{
    ClearMovies();
    LoadMoviesThread = new Thread(() => LoadMoviesControls());
    LoadMoviesThread.Start();
}

private void LoadMoviesControls()
{
    int x = 1;
    if (MPageDropDown.InvokeRequired)
    this.Invoke((MethodInvoker)delegate { if (MPageDropDown.SelectedItem != null)  x = int.Parse(MPageDropDown.SelectedItem.ToString()); });
    else if (MPageDropDown.SelectedItem != null) x = int.Parse(MPageDropDown.SelectedItem.ToString());
    for (int i = (x - 1) * Max; i < MoviesList.Count() && i < x * Max; i++)
    {
        MovieControl tmp = new MovieControl(MoviesList[i], ShowMError, this);
        if (tmp.InvokeRequired || MoviesFlowPanel.InvokeRequired)
        {
            MovieControl m1 = null;
            try
            {
                m1= new MovieControl(MoviesList[i], ShowMError, this);
            }
            catch { }
            this.Invoke((MethodInvoker)delegate { MoviesFlowPanel.Controls.Add(m1); });
        }
        else
            MoviesFlowPanel.Controls.Add(tmp);
            tmp = null;
    }
}

It worked very well, instead of the fact that it took a very long time to process. for example; and image could take about half a second and up to 20 seconds in some rare cases! could you help me figure a more efficient way... Please Note: my images are previously uploaded on the internet and this code is written in C#. Also, without the resizing process it took only few seconds to load. **Max value is set to 180 Thanks in advance.

Answer 1

Well I don't know how much this will help you, but it's worth a shot. I am not entirely confident that WebClient can be parallelized like this, but a similar example appears on page 187 of Pro .NET Performance: Optimize Your C# Applications so I am going to take a leap and say that you can use WebClient from multiple threads. I have added a new method which you could just call from your UI, although it is making a check to be sure it doesn't need to be invoked. This method reads the page number and then launches the background process which will download and resize the images and then after it does all of that it will create the controls in the UI thread.

private void GetPageAndLoadControls()
{
    if (MPageDropDown.InvokeRequired)
    {
        MPageDropDown.Invoke((MethodInvoker)(() => GetPageAndLoadControls();));
        return;
    }

    var page = MPageDropDown.SelectedItem != null ?
        int.Parse(MPageDropDown.SelectedItem.ToString()) - 1 : 0;
    Task.Run(() => LoadMoviesControls(page));
}

private void LoadMoviesControls(int page)
{
    var dict = new ConcurrentDictionary<string, Bitmap>();
    var movies = MovieList.Skip(page * Max).Take(Max).ToList();
    using (var client = new WebClient())
    {
        Parallel.ForEach(movies, (m) =>
        {
            Stream stream = null;
            Bitmap bmp = null;
            try
            {
                if (!string.IsNullOrWhitespace(m.movie_Banner)
                {
                    stream = client.OpenRead(s);
                    bmp =  new Bitmap(stream);
                    // Note: I am guessing on a key here, that maybe there is a title
                    // use whatever key is going to be best for your class
                    dict.TryAdd(m.movie_Title, new Bitmap(bmp, 139, 208));
                }
                else dict.TryAdd(m.movie_Title, Properties.Resources.no_image_available);
            }
            finally
            {
                bmp?.Dispose();
                stream?.Dispose();
            }
        });
    }

    // Here we have to invoke because the controls have to be created on
    // the UI thread. All of the other work has already been done in background
    // threads using the thread pool.
    MoviesFlowPanel.Invoke((MethodInvoker)() =>
    {
        foreach(var movie in movies)
        {
            Bitmap image = null;
            dict.TryGetValue(movie.movie_Title, out image);
            MoviesFlowPanel.Controls.Add(
                new MovieControl(movie, image, ShowMError, this);
        }
    });
}

// Changed the constructor to now take an image as well, so you can pass in
// the already resized image
public MovieControl(Movies M1, Bitmap image, bool show, MainForm current)
{
    InitializeComponent();
    Current = current;
    bunifuImageButton1.Image = image ?? Properties.Resources.no_image_available; // Sanity check
    bunifuImageButton1.Tag = M1;
}

Edit
Something that occurred to me after writing this and thinking more about it, you did not post the code for ClearMovies(), but from the posted code I am assuming that you are disposing the previous 180 controls and creating 180 new ones. What would be better would be to use the same approach I have shown in the code above and then instead of "creating" new controls you just update the existing ones. You could add an update method to your user control that just changes the image and the Movie item that is being stored in the control. This would save the overhead of creating new controls each time which should improve the performance. You may need to call Invalidate at the end of the Update method. Not sure and since I can't really test this all out, just wanted to mention it. Also, instead of using the Tag property to hold the Movie object, I would just add a member variable to your UserControl. This would add type safety and make it clearer what is being held where.

public class MovieControl : Control
{
    public Movies Movie { get; protected set; }

    // Changed the constructor to now take an image as well, so you can
    // pass in the already resized image
    public MovieControl(Movies M1, Bitmap image, bool show, MainForm current)
    {
        InitializeComponent();
        Current = current;
        bunifuImageButton1.Image = image ?? Properties.Resources.no_image_available; // Sanity check
        Movie = M1;
    }

    public void UpdateMovieAndImage(Movies movie, Image image)
    {
        // Only dispose if it isn't null and isn't the "No Image" image
        if (bunifuImageButton1.Image != null
            && bunifuImageButton1.Image != Properties.Resources.no_image_available)
        {
            binifuImageButton1.Image.Dispose();
        }
        bunifuImageButton1.Image = image;
        Movie = movie;
    }
}