zoom in and out to return to original size

by

I display an image when I click on a button with the ability to zoom with the mouse wheel with the code below

But the problem with this code is that when I zoom out, the image becomes smaller than the original.

Basically, I’d like the image to enlarge when I zoom in and return to its original size when I zoom out.

Do you have an idea?

Here’s my code:

using System.Windows.Forms;

namespace WinFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.pictureBox1.MouseWheel += pictureBox1_MouseWheel;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            pictureBox1.ImageLocation = @"D:\Deskock\a.png";
        }

        private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
        {
            if (e.Delta > 0)
            {
                pictureBox1.Width = pictureBox1.Width + 50;
                pictureBox1.Height = pictureBox1.Height + 50;
            }
            else
            {
                pictureBox1.Width = pictureBox1.Width - 50;
                pictureBox1.Height = pictureBox1.Height - 50;
            }
        }
    }
}

  • 1

    First, there’s a difference between the image, and the picture box displaying it. This would become more important if the picture box could contain several image of different size.

    – 




  • Second, in any case you would need to “remember” the original size of the image before any zoom occurs (the natural place for it would be at the moment you load the image). Then you can add this original size in your else block (something like pictureBox1.Width = Math.Max(pictureBox.Width - 50, originalWidth);. Note that after my first comment, “pictureBox.Width” may be replaced by something relative to the image directly instead, I’ll let you do some further searches.

    – 




  • Thanks, do you know how to define originalWidth?

    – 

  • You might want to consider a zoom proportional to the image size. Your current code will break if the picture is smaller than 50 and zooming out, and will have very little effect if zooming into large images.

    – 




I think you can solve this by setting a minimum height and width.
Try this code:

private float _minWidth, _minHeight;

public Form1()
{
    InitializeComponent();
    this.pictureBox1.MouseWheel += pictureBox1_MouseWheel;
    _minWidth = this.pictureBox1.Width;
    _minHeight = this.pictureBox1.Height;
}

private void button1_Click(object sender, EventArgs e)
{
    pictureBox1.ImageLocation = @"D:\Deskock\a.png";
}

private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
{
    if (e.Delta > 0)
    {
        pictureBox1.Width = pictureBox1.Width + 50;
        pictureBox1.Height = pictureBox1.Height + 50;
    }
    else
    {
        if (pictureBox1.Width > _minWidth)
            pictureBox1.Width = pictureBox1.Width - 50;

        if (pictureBox1.Height > _minHeight)
            pictureBox1.Height = pictureBox1.Height - 50;
    }
}

Also, if you ever add or subtract decimal numbers, consider rounding, or you will have values like 3.0000000001. Use Math.Round(value).

Check the below code where maintaining the original size of the image when it’s loaded and then scaling it based on the mouse wheel action.

public partial class Form1 : Form
{
    private Image originalImage;
    private float zoomLevel = 1.0f;
    private const float ZoomIncrement = 0.1f;

    public Form1()
    {
        InitializeComponent();
        this.pictureBox1.MouseWheel += pictureBox1_MouseWheel;
    }

    private void button1_Click(object sender, EventArgs e)
    {
        originalImage = Image.FromFile(@"D:\Deskock\a.png");
        pictureBox1.Image = originalImage;
    }

    private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
    {
        if (originalImage == null)
            return;

        if (e.Delta > 0)
        {
            // Increase zoom
            if (zoomLevel < 2.0f) // Limit max zoom level
            {
                zoomLevel += ZoomIncrement;
                UpdateImageSize();
            }
        }
        else
        {
            // Decrease zoom
            if (zoomLevel > 0.2f) // Limit minimum zoom level
            {
                zoomLevel -= ZoomIncrement;
                UpdateImageSize();
            }
        }
    }

    private void UpdateImageSize()
    {
        pictureBox1.Width = (int)(originalImage.Width * zoomLevel);
        pictureBox1.Height = (int)(originalImage.Height * zoomLevel);
    }
}

Leave a Comment