Title: Use the mouse wheel to scale an image in C#

This example lets you use the mouse wheel to zoom in and out on an image.

To use the mouse wheel, the program needs to catch the MouseWheel event. Unfortunately that event isn't listed in the Form Designer so you need to install the event handler in code.

The following code shows how the example program prepares to handle mouse wheel events.

// The image's original size. private int ImageWidth, ImageHeight; // The current scale. private float ImageScale = 1.0f; private void Form1_Load(object sender, EventArgs e) { ImageWidth = picImage.Image.Width; ImageHeight = picImage.Image.Height; picImage.SizeMode = PictureBoxSizeMode.Zoom; picImage.Size = new Size(ImageWidth, ImageHeight); this.MouseWheel += new MouseEventHandler(picImage_MouseWheel); }

Variables ImageWidth and ImageHeight store the original size of the program's image. The value ImageScale will hold the image's current scale.

When the program starts, its Form_Load event handler saves the image's size and sets the picImage PictureBox control's size to fit the image. It then installs the following MouseWheel event handler to catch mouse wheel events.

// Respond to the mouse wheel. private void picImage_MouseWheel(object sender, MouseEventArgs e) { // The amount by which we adjust scale per wheel click. const float scale_per_delta = 0.1f / 120; // Update the drawing based upon the mouse wheel scrolling. ImageScale += e.Delta * scale_per_delta; if (ImageScale < 0) ImageScale = 0; // Size the image. picImage.Size = new Size( (int)(ImageWidth * ImageScale), (int)(ImageHeight * ImageScale)); // Display the new scale. lblScale.Text = ImageScale.ToString("p0"); }

This code first defines the constant scale_per_delta to represent the amount by which the scale should be adjusted per mouse wheel click. The e.Delta parameter tells the event handler how much the wheel has been adjusted. Microsoft's UI documentation says a program should scroll text by one line when the accumulated delta reaches 120. (On my system, each click of the mouse wheel gives a delta of 120, but this standard was designed to allow vendors to make mouse wheels with finer resolution in the future.)

For this program, I decided to adjust the scale of the image by 10% per 120 units of delta, so the program sets scale_per_delta to 0.1 / 120. When you adjust the mouse wheel, the event handler multiples the delta value by that amount to get the adjustment to the image's scale.

In this program it is useful that the mouse wheel changes delta by 120 per click. That means the scale always changes by 10% per click so the program doesn't use weird scales like 73.8%. If it did, you could write some extra code to round the scale off to the nearest multiple of 10%.

After it calculates the updated percentage, the program simply adjusts the PictureBox control's size. Because the control's SizeMode property is set to Zoom, it automatically scales the image to fit.

When you click the program's linkLabel, it uses the following code to open the web page for my book, Interview Puzzles Dissected, Solving and Understanding Interview Puzzles.

// Open the book's web page. private void lnkPuzzles_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e) { System.Diagnostics.Process.Start( "puzzles.htm"); }

If you haven't looked over this book, you should do so now! It's basically a fun puzzle-solving book. (And some of the puzzles may appear in an interview at some point in your future so it's nice to know how to solve them.)

Download the example to experiment with it and to see additional details.