Home and Learn: Intermediate Programming


Coding for Image Zoom

Picture Viewer Project: For C# and VB NET Students

 

What we want to do for the zoom is to make the image smaller when the right mouse button is clicked on the image in the PictureBox (zooming out). When a left-click is detected on the image, we'll restore the image to its original size.

What we need to do, though, is to resize the image. We'll use the graphics object to do this, and create new bitmap objects. Tricky stuff!

Go back to Design View and select your PictureBox. Locate the MouseDown event in the properties area on the right (click the lightning symbol). Double click the event name to get the code stub. Now enter the following lines of code in VB:

If e.Button = MouseButtons.Right Then

GetZoom(2)

ElseIf e.Button = MouseButtons.Left Then

GetOriginalImage()

End If

And these in C#:

if (e.Button = = MouseButtons.Right)
{

GetZoom(2);

} else if (e.Button = = MouseButtons.Left)
{

GetOriginalImage();

}

You'll get errors for the GetZoom line. But that's because we haven't added this Sub/method yet.

The If Statement just detects which mouse button was clicked, the right one or the left one. If it's the right one, we'll call the as yet unwritten GetZoom Sub/method. If the left mouse button is clicked, we call the GetOriginalImage Sub/method. So we're zooming out when the right mouse button is clicked and returning the image to its original size when the left mouse button is clicked.

Add the following Sub in VB Net

Private Sub GetZoom(zoomSize As String)

End Sub

And this one in C#:

private void GetZoom(int zoomSize)
{

}

The Sub/method is called GetZoom and has one parameter, zoomSize. If you pass a value of 2 over to zoomSize then it means you want 50% zoom out. In other words, half the size of the original image for the height and width.

The first line to add to your GetZoom Sub in VB NET is this:

Dim bmp As New Bitmap( PictureBox1.Image )

And this in C#:

Bitmap bmp = new Bitmap(pictureBox1.Image);

This creates a new Bitmap object, using the image from the PictureBox.

Now we can set the height and width to use for the zoomed image. Add these two lines in VB Net:

Dim newWidth As Integer = PictureBox1.Image.Width / zoomSize
Dim newHeight As Integer = PictureBox1.Image.Height / zoomSize

And these two in C#:

int newWidth = pictureBox1.Image.Width / zoomSize;
int newHeight = pictureBox1.Image.Height / zoomSize;

The next line to add also creates a new Bitmap object. Add this in VB Net:

Dim bmpNew As Bitmap = New Bitmap(newWidth, newHeight)

And this in C#:

Bitmap bmpNew = new Bitmap(newWidth, newHeight);

The next line to add is this:

VB

Dim gr As Graphics = Graphics.FromImage( bmpNew )

C#

Graphics gr = Graphics.FromImage(bmpNew);

We're creating a graphics object here. The graphics object has a FromImage function. In other words, we're setting the new image to be the graphics object. It's still a blank image, though.

The next line is where we draw an image:

VB

gr.DrawImage(bmp, 0, 0, bmpNew.Width, bmpNew.Height)

C#

gr.DrawImage(bmp, 0, 0, bmpNew.Width, bmpNew.Height);

The gr variable is a graphics object containing an image. The image is blank, however, so we use DrawImage to draw an image onto it. In between the round brackets of DrawImage, we're drawing the original image, stored inside bmp, but at the new Width and Height. (The 0, 0 is the location to start drawing.)

After all this graphics manipulation, the variable we've called bmpNew will contain the original image at the new size. This is then used in the next line to add to your code:

VB

PictureBox1.Image = bmpNew

C#:

pictureBox1.Image = bmpNew;

The final line is one you've met before – resize the panel's AutoScroll features. Add this in VB Net:

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

And this in C#:

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

Your coding window should look like ours in VB Net:

Visual Basic .NET code to zoom out on an image in a picture box

And this in C#:

C# .NET code to zoom out on an image in a picture box

Try it out. Run your programme and open some images. Click a thumbnail to load the bigger version into your PictureBox. Now right click the big image. Your image should resize. Left-click and it will go back to its original size.

 

And we'll leave our Picture View there. It's a bit rudimentary, but we hope you learned a lot from it!

Back to the Intermediate Programming Contents Page

 


Email us: enquiry at homeandlearn.co.uk