Title: Create ListView icons at run time in C#

The example Display large and small ListView icons in C# explains how to display ListView icons next to items. Basically, you place the images in two ImageList controls, set the ListView control's LargeImageList and SmallImageList properties to those two controls, and set the items' ImageIndex properties to the appropriate indices for the correct ListView icons.

In the previous example, most of that work was done at design time. This example does it at run time. The following code does most of the work.

private void Form1_Load(object sender, EventArgs e) { // Select the first style. cboStyle.SelectedIndex = 0; // Initialize the ListView. lvwBooks.SmallImageList = imlSmallIcons; lvwBooks.LargeImageList = imlLargeIcons; // Make the column headers. lvwBooks.MakeColumnHeaders( "Title", 230, HorizontalAlignment.Left, "URL", 220, HorizontalAlignment.Left, "ISBN", 130, HorizontalAlignment.Left, "Picture", 230, HorizontalAlignment.Left, "Pages", 50, HorizontalAlignment.Right, "Year", 60, HorizontalAlignment.Right); // Create images. RectangleF small_rect = new RectangleF(0, 0, 32, 32); RectangleF large_rect = new RectangleF(3, 3, 58, 58); imlSmallIcons.Images.Clear(); imlLargeIcons.Images.Clear(); using (Pen small_pen = new Pen(Color.Blue, 2)) { using (Pen large_pen = new Pen(Color.Blue, 3)) { large_pen.LineJoin = LineJoin.Round; for (int i = 1; i <= 7; i++) { Bitmap bm32x32 = new Bitmap(32, 32); using (Graphics gr = Graphics.FromImage(bm32x32)) { gr.SmoothingMode = SmoothingMode.AntiAlias; gr.Clear(Color.Transparent); DrawStar(gr, small_rect, i + 3, small_pen, Brushes.Yellow); // Save the image using i as the image's key. imlSmallIcons.Images.Add(i.ToString(), bm32x32); } Bitmap bm64x64 = new Bitmap(64, 64); using (Graphics gr = Graphics.FromImage(bm64x64)) { gr.Clear(Color.Transparent); gr.SmoothingMode = SmoothingMode.AntiAlias; DrawStar(gr, large_rect, i + 3, large_pen, Brushes.Yellow); // Save the image using i as the image's key. imlLargeIcons.Images.Add(i.ToString(), bm64x64); } } } } // Add data rows. lvwBooks.AddRow("1", "WPF 3d", ... lvwBooks.AddRow("2", "The C# Helper Top 100", ... lvwBooks.AddRow("3", "Interview Puzzles Dissected", ... lvwBooks.AddRow("4", "C# 24-Hour Trainer, 2e", ... lvwBooks.AddRow("5", "Beginning Software Engineering", ... lvwBooks.AddRow("6", "Essential Algorithms", ... lvwBooks.AddRow("7", "Beginning Database Design Solutions", ... }

The code selects the first ListView style (Large Icons) and sets the ListView control's SmallImageList and LargeImageList properties. It then calls the MakeColumnHeaders extension method to create the ListView column headers. (See the code for details).

Next, the code clears the two ImageList controls and creates a series of images at two different sizes: 32x32 and 64x64 pixels. It creates a Pen and Brush and then loops through the values 1 to 7. For each value, it calls the DrawStar method to create large and small stars with different numbers of points and adds the images to the ImageList components. It uses the value of i as key strings for the ListView icons. (Download the example to see how the DrawStar method works.)

After is has created the images, the code calls the AddRow extension method to add rows of data to the ListView control. The first parameter is the key string that identifies the ListView icons for that row. The following code shows the AddRow method.

// Add a row to the ListView. public static void AddRow(this ListView lvw, string key, string item_title, params string[] subitem_titles) { // Make the item. ListViewItem new_item = lvw.Items.Add(item_title, key); // Make the sub-items. for (int i = subitem_titles.GetLowerBound(0); i <= subitem_titles.GetUpperBound(0); i++) { new_item.SubItems.Add(subitem_titles[i]); } }

This method creates a new ListViewItem object. It passes the constructor the item's text and its key string. The ListView control uses the key string to select the appropriate images to display from the ImageList controls that are referenced by its SmallImageList and LargeImageList properties.

The method then loops through its other parameters and creates the item's sub-items. Download the example to see additional details.

My next post will show how to load images into an ImageList from a database.

Download the example to experiment with it and to see additional details.