Home and Learn: Intermediate Programming
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:
And this in C#:
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:
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.
Back to the Intermediate Programming Contents Page