CODEWITHSUNDEEP
c#winformsimagelist
Juan Carlos Oropeza
Juan Carlos Oropeza

Reputation: 48197

How I load a file with multiple image in a imagelist?

I'm checking a website and found some pictures are from a bigger file with all the images. enter image description here

I'm wondering how is this technique called and why is used instead of single file for each picture.

Also, I want to use those image in my windows form application, so how I can load an image list with that file?

Upvotes: 0

Views: 868

Answers (1)

Victor
Victor

Reputation: 2371

I think we are talking about two different things.

In a Web, each image is a request and have a cost. For that reason, if you have lots of images, you can put all into a bigger one and the browser get all "images" with a single request. Then, when you use each image, you need indicate position and size in the big image, but the target is saving requests.

In a Windows Form application, we don't talk about that requests. You can use a big picture, load into memory and make copies of smaller portions but controls usually work with a FileName or a Resource Image. Working with the image in memory (select portions, stretch...) isn't frecuent in normal applications. You may need use it on applications focused on that (like Paint), in controls development (for example a Combobx with Image)... but not in a regular applications.

In a Windows Form application, I add as many small images as I need into resources and also fill ImageList in the designer. But if you need populate an ImageList from a big image:

private static ImageList CreateImageList(Bitmap bigImage, int smallImageWidth, int smallImageHeight)
{
    var imageList = new ImageList();

    var rows = bigImage.Height / smallImageHeight;
    var columns = bigImage.Width / smallImageWidth;
    for (int column = 0; column < columns; column++)
    {
        var x = column * smallImageWidth;

        for (int row = 0; row < rows; row++)
        {
            var y = row * smallImageHeight;

            var rect = new Rectangle(x, y, smallImageWidth, smallImageHeight);
            var smallImage = bigImage.Clone(rect, bigImage.PixelFormat);

            imageList.Images.Add(smallImage);
        }
    }

    return imageList;
}

We simply iterate for each small image portion, create a Bitmap of this part and add into the ImageList.

And use it:

var bigImage = new Bitmap(@"C:\...\YourImage.jpg");

// I suppose that each small image is 50x50. You must set to the correct size
var imgSize = 50;
var imageList = CreateImageList(bigImage, imgSize, imgSize);

Upvotes: 1

Related Questions