c# - How to zoom in using Mouse Position on that image

Question

I have a userControl library, which consists of the main Panel and a PictureBox, I want to make a zoomable PictureBox tool, I zoom in and out using mouseWheel event of the main Panel, the problem that I can't figure out how do I zoom in by the mouse position on the image, so whenever I zoom in, the zoom goes the Top-Left corner of the panel, so how do I fix that?

private double ZOOMFACTOR = 1.15;   // = 15% smaller or larger
private int MINMAX = 5;
void picPanel_MouseWheel(object sender, MouseEventArgs e)
    {
        if (e.Delta > 0)
        {
            ZoomIn();
        }
        else
        {
            ZoomOut();
        }
    }

    private void ZoomIn()
    {
        if ((picBox.Width < (MINMAX * this.Width)) &&
            (picBox.Height < (MINMAX * this.Height)))
        {
            picBox.Width = Convert.ToInt32(picBox.Width * ZOOMFACTOR);
            picBox.Height = Convert.ToInt32(picBox.Height * ZOOMFACTOR);
        }
    } 
    private void picBox_MouseEnter(object sender, EventArgs e)
    {
        if (picBox.Focused) return;
        picBox.Focus();
    }

Update :

I have tried this, it looks like working, but not exactly as it should be!! Any ideas?

    private void ZoomIn()
    {
        if ((picBox.Width < (MINMAX * this.Width)) &&
            (picBox.Height < (MINMAX * this.Height)))
        {
            picBox.Width = Convert.ToInt32(picBox.Width * ZOOMFACTOR);
            picBox.Height = Convert.ToInt32(picBox.Height * ZOOMFACTOR);

            Point p = this.AutoScrollPosition;
            int deltaX = e.X - p.X;
            int deltaY = e.Y - p.Y;
            this.AutoScrollPosition = new Point(deltaX, deltaY);
        }
    } 

Answer 1

The problem is that your control is acting like a viewport - the origin is top left, so every time you stretch the image you're doing it from that corner - the upshot is you wind up zooming into the top left corner, you need to offset the stretched image and centre the point the user zoomed in on.

• image size: 200,200
• user clicks 100,50 and zooms in x2
• stretch the image
• image size 400,400, and the place the user clicked is now effectively at 200,100
• you need to slide the image 100 px left and 50 px up to correct for re-sizing the image

You'll need to override the paint event handler to draw the image offset:

 RectangleF BmpRect = new RectangleF((float)(Offset.X), (float)(Offset.Y), (float)(ZoomedWidth), (float)(ZoomedHeight));
  e.Graphics.DrawImage(Bmp, ViewPort , BmpRect, GraphicsUnit.Pixel);

Bmp is your image; ViewPort is a Rectangle defined by your pictureBox control

Here is a thread that might help.