Adding Images and ListView

Picture Viewer Project: For C# and VB NET Students

 

In the previous lesson, lesson 2 above, we filled an ImageList control with images. So that you can see the images, we still need to Add them as Items to the ListView. All we've done so far is just attach the ImageList to the ListView object. But it won't do anything useful with them.

We need to add a For loop, now. We'll loop round adding new items to the ListView. The items we'll add are the images to display, as well as some text under the image. The text will be the file path of the image. (We'll be using this file path later.)

Add the following for loop to your code in VB Net, just under the LargeImageList line.

For i As Integer = 0 To counter - 1

ListView1.Items.Add(aryFilePaths(i), i)

Next i

Here's the C# version:

for (int i = 0; i < counter; i++)
{

listView1.Items.Add(aryFilePaths[i], i);

}

The loop goes from 0 less than value of counter. (The value of the counter variable is the same as the number of images in the array we set up.)

Inside the loop is where we add the Items to the ListView:

ListView1.Items.Add( )

You have a number of different options to choose from between the round brackets of Add. But remember what we're doing here: Adding Items to the ListView control.

The first thing we want to add is the Text that goes under the image (square brackets in C#):

aryFilePaths(i)

The second thing to add is the thumbnail image. This is stored in the ImageList, which the ListView now knows about. But the image we attached to the ListView are stored in a collection. You can access this collection either as a Key or as a number. The number is the position in the ImageList (again, square brackets in C# after aryFilePaths):

Add( aryFilePaths(i), i )

We're using the loop variable, here, which is i. The first time round the loop, this will attach image 0 in the ImageList collection to the ListView, then image 1 from the ImageList, etc.

The full code for your button should now look like this in VB Net:

Visual Basic .Net code to load images into a ListView control with the help of an ImageList

And this in C#:

C# code to load images into a ListView control with the help of an ImageList

Try it out. Run your programme and click your button. Select a few images to open. When you click the Open button on your Open File Dialogue box, you should see the thumbnails appear in your List Box, along with the file names underneath:

Thumbnail Images and file names in a Visual Studio ListView control

So we have a thumbnail image, and the file path of the image. We can use that file path for the bigger image. We'll do that in the next lesson.

Big Picture from Thumbnail >>

Back to the C# NET Contents Page

Back to the VB NET Contents Page