Images and the ImageList Control

Picture Viewer Project: For C# and VB NET Students

 

Now that we have a user form in place, we can start the coding. We'll start with the Open File Dialog box. You've done this before, in a previous section.

Double click your button to get at the code stub. The first two lines of code to add will clear the ImageList of its images, and clear the ListView. Add these two lines, then, in Visual Basic .Net:

ImageList1.Images.Clear( )
ListView1.Clear( )

And these two in C#:

imageList1.Images.Clear();
listView1.Clear();

So we're just issuing the Clear command of the two objects.

To get the Open File Dialogue box to appear, add these lines in VB:

oFD1.InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures)
oFD1.Title = "Open an Image File"
oFD1.Filter = "JPEGS|*.jpg|GIFS|*.gif"

Dim ofdResults As Integer = oFD1.ShowDialog( )

If ofdResults = DialogResult.Cancel Then

Exit Sub

End If

And these in C#:

oFD1.InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures);
oFD1.Title = "Open Image Files";
oFD1.Filter = "JPEGS|*.jpg|GIFS|*.gif|PNG|*.png";

DialogResult ofdResults = oFD1.ShowDialog();

if (ofdResults == DialogResult.Cancel)
{

return;

}

You should know what these lines do by now, as you've met them before. But we're just setting the initial directory, adding a title to the dialogue box, and then specifying the type of files than can be opened. We have to handle the Cancel button being clicked, which is what the rest of the lines do.

Your code in Visual Basic Net should look like this:

And this in C#:

You can try it out, if you like. The dialogue box should appear when you click your button, and you should be able to select more than one file. There won't be much else happening, though!

As you learned earlier, the Open File Dialogue box doesn't actually open files. It just allows you to specify the names of the files you want to open.

Because you want the user to be able to load more than one file into the ListView area, you have to get at all the file names selected. The technique we'll use is to get how many files were selected. Then we'll set up an array so we can store the file names. We'll grab the file names in a for each loop and place them on the Image List. This will give us the thumbnails. The Image List can then be attached to the List Box. Finally, we can loop round the file names and add them under the thumbnails.

First, add the following lines to your code in VB Net:

Try

Dim numOfFiles As Integer = oFD1.FileNames.Length
Dim aryFilePaths(numOfFiles - 1) As String
Dim counter As Integer = 0

Catch err As Exception

MessageBox.Show(err.Message)

End Try


And these in C#:

try
{

int numOfFiles = oFD1.FileNames.Length;
string[] aryFilePaths = new string[numOfFiles];
int counter = 0;

}
catch (Exception err)
{

MessageBox.Show(err.Message);

}

The Length property of FileNames gets you how many files were selected. We use this to set the size of an array that we've called aryFilePaths. We're deducting 1 in VB Net because arrays start at zero. They do in C#, as well, but C# arrays are set up by saying how many items you need.

The third line is a counter that we'll use to access the array.

Now we can add a for each loop to construct an image list. These will be the thumbnails.


Add the following for each loop under the ones you already have:

VB

Try

Dim numOfFiles As Integer = oFD1.FileNames.Length
Dim aryFilePaths(numOfFiles - 1) As String
Dim counter As Integer = 0

For Each singleFile In oFD1.FileNames

Next

Catch err As Exception

MessageBox.Show(err.Message)

End Try

C#

try
{

int numOfFiles = oFD1.FileNames.Length;
string[] aryFilePaths = new string[numOfFiles];
int counter = 0;

foreach (string singleFile in oFD1.FileNames)
{

}

}
catch (Exception err)
{

MessageBox.Show(err.Message);

}

The For … Each loop is this:

For Each singleFile In oFD1.FileNames

And this in C#:

foreach (string singleFile in oFD1.FileNames)

So the OpenFileDialog control has a property called FileNames. This gets you a list of all the files that the user selected. By using For … Each you can loop round and get all the file names (which will include the file paths). The file names will be stored in the singleFile variable.

We can use the counter to access the array. Add this line to your For … Each loop code:

VB

aryFilePaths( counter ) = singleFile

C#

aryFilePaths[counter] = singleFile;

When the loop is finished, the file names and paths will now be stored in the array we set up. Increment the counter on the line just below this one in VB:

counter +=1

And this in C#

counter++;

We now need to add the file names to the Image list.

 

Adding Images to an Images List

An ImageList control is something you need to add images to. You do this with the Add command. We can add all the images that the user selected. This can be done in your For ... Each loop. Add the line in bold to your loop in VB Net:

For Each singleFile In oFD1.FileNames

aryFilePaths(counter) = singleFile
ImageList1.Images.Add(Image.FromFile(singleFile))
counter += 1

Next

And this is the C# version:

foreach (string singleFile in oFD1.FileNames)
{

aryFilePaths[counter] = singleFile;
imageList1.Images.Add(Image.FromFile(singleFile));
counter++;

}

The ImageList1 object has an Images collection. After a dot, use the word Add. In between the round brackets of Add, you specify the image that you want to add to your ImageList. For us, this was an image that the user selected, which is stored in the singleFile variable.

You can't just use the file path, however. It has to be an Image. You can turn the file path into an image with the Image object. This has a FromFile function. In between the round brackets of FromFile, you specify a file path:

Image.FromFile( singleFile )

So we're creating an image from the file path, and then adding it to the ImageList collection.

When the For … Each loop is complete, you'll then have an ImageList filled with Images. The size of each image will be 64 by 64. Which is the size we set earlier.

After the For … Each loop, you then need to attach the ImageList to the ListView control. There's only one line of code to add for this:

VB

ListView1.LargeImageList = ImageList1

C#

listView1.LargeImageList = imageList1;

We're using the LargeImageList property of the ListView control. This, not surprisingly, will mean that the ListView can display large images. The large images are all in the ImageList.

You still won't be able to see anything, if you were to run your project. What we need to do is to add the thumbnails to the List Box. We'll so that in the next lesson below.

Add Thumbnails to List Box >>

Back to the C# NET Contents Page

Back to the VB NET Contents Page