Dynamically display an array of PictureBoxes - Performance issue

Question

I'd like to display coverarts for each album of an MP3 library, a bit like Itunes does (at a later stage, i'd like to click one any of these coverarts to display the list of songs). I have a form with a panel panel1 and here is the loop i'm using :

 int i = 0;
        int perCol = 4;
        int disBetWeen = 15;
        int width = 250;
        int height = 250;
        foreach(var alb in mp2)
        {
                myPicBox.Add(new PictureBox());
                myPicBox[i].SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
                myPicBox[i].Location = new System.Drawing.Point(disBetWeen + (disBetWeen * (i % perCol) +(width * (i % perCol))), 
                    disBetWeen + (disBetWeen * (i / perCol))+ (height * (i / perCol))); 
                myPicBox[i].Name = "pictureBox" + i;
                myPicBox[i].Size = new System.Drawing.Size(width, height);
                myPicBox[i].ImageLocation = @"C:/Users/Utilisateur/Music/label.jpg";
                panel1.Controls.Add(myPicBox[i]);
                i++;
        }

I'm using the same picture per picturebox for convenience, but i'll use the coverart embedded in each mp3 file eventually.

It's working fine with an abstract of the library (around 50), but i have several thousands of albums. I tried and as expected, it takes a long time to load and i cannot really scroll afterward.

Is there any way to load only what's displayed ? and then how to assess what is displayed with the scrollbars.

Thanks

Answer 1

Winforms really isn't suited to this sort of thing... Using standard controls, you'd probably need to either provision all the image boxes up front and load images in as they become visible, or manage some overflow placeholder for the appropriate length so the scrollbars work.

Assuming Winforms is your only option, I'd suggest you look into creating a custom control with a scroll bar and manually driving the OnPaint event.

That would allow you to keep a cache of images in memory to draw the current view [and a few either side], while giving you total control over when they're loaded/unloaded [well, as "total" as you can get in a managed language - you may still need tune garbage collection]

To get into some details....

Create a new control

namespace SO61574511 {
    // Let's inherit from Panel so we can take advantage of scrolling for free
    public class ImageScroller : Panel {
        // Some numbers to allow us to calculate layout
        private const int BitmapWidth = 100;
        private const int BitmapSpacing = 10;

        // imageCache will keep the images in memory. Ideally we should unload images we're not using, but that's a problem for the reader
        private Bitmap[] imageCache;

        public ImageScroller() {
            //How many images to put in the cache? If you don't know up-front, use a list instead of an array
            imageCache = new Bitmap[100];
            //Take advantage of Winforms scrolling
            this.AutoScroll = true;
            this.AutoScrollMinSize = new Size((BitmapWidth + BitmapSpacing) * imageCache.Length, this.Height);

        }

        protected override void OnPaint(PaintEventArgs e) {
            // Let Winforms paint its bits (like the scroll bar)
            base.OnPaint(e);
            // Translate whatever _we_ paint by the position of the scrollbar
            e.Graphics.TranslateTransform(this.AutoScrollPosition.X,
                           this.AutoScrollPosition.Y);

            // Use this to decide which images are out of sight and can be unloaded
            var current_scroll_position = this.HorizontalScroll.Value;

            // Loop through the images you want to show (probably not all of them, just those close to the view area)
            for (int i = 0; i < imageCache.Length; i++) {
                e.Graphics.DrawImage(GetImage(i), new PointF(i * (BitmapSpacing + BitmapWidth), 0));
            }

        }

        //You won't need a random, just for my demo colours below
        private Random rnd = new Random();

        private Bitmap GetImage(int id) {
            // This method is responsible for getting an image.
            // If it's already in the cache, use it, otherwise load it
            if (imageCache[id] == null) {
                //Do something here to load an image into the cache
                imageCache[id] = new Bitmap(100, 100);

                // For demo purposes, I'll flood fill a random colour
                using (var gfx = Graphics.FromImage(imageCache[id])) {
                    gfx.Clear(Color.FromArgb(255, rnd.Next(0, 255), rnd.Next(0, 255), rnd.Next(0, 255)));
                }
            }
            return imageCache[id];
        }

    }
}

And Load it into your form, docking to fill the screen....

    public Form1() {
        InitializeComponent();
        this.Controls.Add(new ImageScroller {
            Dock = DockStyle.Fill
        });
    }

You can see it in action here: https://www.youtube.com/watch?v=ftr3v6pLnqA (excuse the mouse trails, I captured area outside the window)