The Bigger Picture

Picture Viewer Project: For C# and VB NET Students


So we have a list of thumbnails and file paths in our ListView from lesson 3 above. When you click on a thumbnail, you want the picture box on the right to display the full-size version of the image. To do this, you need to get just the file path to the image, which we displayed as text under the thumbnail. This is not quite as straightforward as it should be.

Clicking on a thumbnail fires the SelectedIndexChanged event of the ListView control. The Index refers to which complete item you clicked on: the thumbnail, the text, and anything else you have for that particular item. For example, clicking on the first thumbnail in the previous image above would get you a reference to not only the thumbnail image, but also the text for the image. Because it's the first item in the ListView, the index would be 0.

In Design View, then, click on your ListView control to select it. In the properties area on the right, click on the lightning symbol to display a list of available events, and locate SelectedIndexChanged:

Visual Studio properties panel showing the SelectedIndexChanged event highlighted

Double click to create the code stub.

We'll create a Subroutine/method to get the full-size image for the Picture Box. We'll use the Sub/method again when we do the zoom feature.

Add the following Sub in VB Net:

Private Sub GetOriginalImage()

End Sub

And this in C#:

private void GetOriginalImage()


What we'll do in this Sub/method is to loop round all the items in the list view and get which one was clicked. We'll get the text for that item, which is the file name. We'll then use that file name to get the big image for the Picture Box. We'll also add some scrollbars to the Picture Box.

Add this For loop in VB:

For i As Integer = 0 To ListView1.SelectedItems.Count - 1

Next i

And this one in C#:

for (int i = 0; i < listView1.SelectedItems.Count; i++)


So we want to go round all the items that were selected. To get at the Text for an item, the code you need inside of your loop is this in VB:

Dim bigFilename As String = ListView1.SelectedItems(i).Text

And this in C#:

string bigFileName = listView1.SelectedItems[i].Text;

The Text for us was the file path to the thumbnail. The thumbnail is also the path to the bigger image. We can create a new image from the file path. Add this line to your loop in VB:

PictureBox1.Image = Image.FromFile( bigFilename )

And this one in C#:

pictureBox1.Image = Image.FromFile(bigFileName);

Again, we're using the Image object, and the FromFile function. In between the round brackets of FromFile, we're using our file path.

We only need one more line in the loop. Add this rather curious line in VB:

Panel1.AutoScrollMinSize = New Size( PictureBox1.Image.Width, PictureBox1.Image.Height )

And this in C#:

panel1.AutoScrollMinSize = new Size(pictureBox1.Image.Width, pictureBox1.Image.Height);

The AutoScrollMinSize property of a Panel takes two arguments, a Width and a Height. It's used to get a minimum size for the AutoScroll of the Panel. If you don't include this line then you won't get the scroll bars, or you may just get a vertical scroll bar but no horizontal one.

But the code for your GetOriginalImage Sub should look like this in VB Net:

A Subroutine in Visual Basic .Net to display a large image from a thumbnail

And the GetOriginalImage method is this in C#:

A method in C# .Net to display a large image from a thumbnail

You now need to call the Sub/method. Add this line to your SelectedIndexChanged event in VB:

Call GetOriginalImage()

And this one in C#:


You your SelectedIndexChanged event will then look like this:

Visual Basic

Making a call to the GetOriginalImage Subroutine in VB

C# .Net

Making a call to the GetOriginalImage method in C#

Try it out. Run your programme and open some images. Click on a thumbnail in your ListView and you should find that the bigger image appears in the PictureBox on the right.

Now let's do the zoom.

Add a Zoom Feature >>

Back to the C# NET Contents Page

Back to the VB NET Contents Page