Intermediate 10 min read Control #8

ImageList Control

The ImageList is a non-visual component that stores images for other controls like ListView, TreeView, and ToolStrip.

What is an ImageList?

ImageList doesn't appear on your form - it's a component that stores images in memory. Other controls use it to display icons. This saves memory and makes it easy to share images across multiple controls.

How to Use

  1. Drag an ImageList component onto your form (it appears in the component tray).
  2. Click the Images property to open the Image Collection Editor.
  3. Add images (PNG, ICO, JPG, BMP).
  4. Set ImageSize property (16x16, 32x32, etc.).
  5. Assign to controls like ListView's SmallImageList or LargeImageList.

Code Example

// Add images to ImageList programmatically
imageList1.ImageSize = new Size(32, 32);
imageList1.Images.Add(Image.FromFile("icon1.png"));
imageList1.Images.Add(Image.FromFile("icon2.png"));
imageList1.Images.Add(Image.FromFile("icon3.png"));

// Assign to ListView
listView1.LargeImageList = imageList1;
listView1.Items[0].ImageIndex = 0; // First image

// Or use the ImageKey property
listView1.Items[1].ImageKey = "icon2.png";

Exercise

Task: Create an icon toolbar using ImageList.

  1. Add an ImageList with 5-8 icons (or use built-in images).
  2. Add a ToolStrip and set its ImageList property.
  3. Add ToolStripButtons and set their ImageIndex.
  4. Add a ListView with SmallImageList and LargeImageList.
  5. Add items with different icons.
Key Takeaway

ImageList stores images in memory for reuse by multiple controls. It's essential for creating professional-looking applications with icons.

Previous: GroupBox Next: Label
Controls