Click here to Skip to main content
11,932,103 members (51,006 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


46 bookmarked

Zooming and panning in Windows Forms with fixed focus

, 14 Mar 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to do zooming and panning in Windows Forms with fixed focus.



I have found quite a few articles about zooming into a fixed point. I have also tried many solutions, but not all of them worked as they should. Many of them resized the PictureFrame so that it eventually would overlap other parts of the screen, others could not hold focus, and some others lost focus when panning the image. This solution does work. When panning, the image doesn't move when you grab hold of the image, and when zooming, it does keep the same zoom point at all zoom levels.



This image viewer was a small part of a self-encrypting, self-contained image viewer, where I needed a simple image viewer that could zoom at the point I was pointing at.

Using the code

The code is quite simple. The big problem was to hold track of the offset when zooming so I could move the image to the correct position to hold the focus point.

A few event handlers to catch some mouse events:

this.pictureBox.MouseDown += 
  new System.Windows.Forms.MouseEventHandler(this.imageBox_MouseDown);
this.pictureBox.MouseMove += 
  new System.Windows.Forms.MouseEventHandler(this.pictureBox_MouseMove);
this.pictureBox.MouseUp += 
  new System.Windows.Forms.MouseEventHandler(this.imageBox_MouseUp);

ImageZoomMainForm initializes the windows, and sets the initial zoom factor. By default, it zooms the image so it is as wide as the view.

First, I declare some global variables to store the image and keep track of the zoom and the current offset of the image.

Image img;
Point mouseDown;
int startx = 0;             // offset of image when mouse was pressed
int starty = 0;
int imgx = 0;               // current offset of image
int imgy = 0;

bool mousepressed = false;  // true as long as left mousebutton is pressed
float zoom = 1;

ImageZoomMainForm initializes the windows, opens the image, and sets the initial zoom factor. By default, it zooms the image so it is as wide as the view. I have to take into account that the screen and the image can have different resolutions. It did take me quite a long time to figure out why my fully zoomed windows wasn't zoomed, until I realised that the screen had a 96 resolution and the image's was 300.

public ImageZoomMainForm()
    string imagefilename = @"..\..\test.tif";
    img = Image.FromFile(imagefilename);

    Graphics g = this.CreateGraphics();

    //// Fit whole image
    //zoom = Math.Min(
    //  ((float)pictureBox.Height / (float)img.Height) * (img.VerticalResolution / g.DpiY),
    //  ((float)pictureBox.Width / (float)img.Width) * (img.HorizontalResolution / g.DpiX)

    // Fit width
    zoom = ((float)pictureBox.Width / (float)img.Width) * 
            (img.HorizontalResolution / g.DpiX);

    pictureBox.Paint += new PaintEventHandler(imageBox_Paint);

MouseMove, MouseDown, and MouseUp take care of the panning. MouseDown records the starting position, and MouseMove then moves the image box accordingly. MouseUp just sets mousepressed to false so that I know that the button has been released.

private void pictureBox_MouseMove(object sender, EventArgs e)
    MouseEventArgs mouse = e as MouseEventArgs;

    if (mouse.Button == MouseButtons.Left)
        Point mousePosNow = mouse.Location;

        // the distance the mouse has been moved since mouse was pressed
        int deltaX = mousePosNow.X - mouseDown.X;
        int deltaY = mousePosNow.Y - mouseDown.Y;

        // calculate new offset of image based on the current zoom factor
        imgx = (int)(startx + (deltaX / zoom));
        imgy = (int)(starty + (deltaY / zoom));


private void imageBox_MouseDown(object sender, EventArgs e)
    MouseEventArgs mouse = e as MouseEventArgs;

    if (mouse.Button == MouseButtons.Left)
        if (!mousepressed)
            mousepressed = true;
            mouseDown = mouse.Location;
            startx = imgx;
            starty = imgy;

private void imageBox_MouseUp(object sender, EventArgs e)
    mousepressed = false;

OnMouseWheel does the actual zooming. It calculates where in the image the mouse is pointing, calculates the new zoomfactor, make sa new calculation to figure out where the mouse will be positioned after the zoom, and then calculates where to move the image to hold the focus point. Paint does the transform. It resizes the image and moves it to the correct location.

protected override void OnMouseWheel(MouseEventArgs e)
    float oldzoom = zoom;

    if (e.Delta > 0)
        zoom += 0.1F;
    else if (e.Delta < 0)
        zoom = Math.Max(zoom - 0.1F, 0.01F);

    MouseEventArgs mouse = e as MouseEventArgs;
    Point mousePosNow = mouse.Location;

    // Where location of the mouse in the pictureframe
    int x = mousePosNow.X - pictureBox.Location.X;
    int y = mousePosNow.Y - pictureBox.Location.Y;

    // Where in the IMAGE is it now
    int oldimagex = (int)(x / oldzoom);
    int oldimagey = (int)(y / oldzoom);

    // Where in the IMAGE will it be when the new zoom i made
    int newimagex = (int)(x / zoom);
    int newimagey = (int)(y / zoom);

    // Where to move image to keep focus on one point
    imgx = newimagex - oldimagex + imgx;
    imgy = newimagey - oldimagey + imgy;

    pictureBox.Refresh();  // calls imageBox_Paint

private void imageBox_Paint(object sender, PaintEventArgs e)
    e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
    e.Graphics.ScaleTransform(zoom, zoom);
    e.Graphics.DrawImage(img, imgx, imgy);

ProcessCmdKey overrules the default method. It makes it possible to move around in the image using the arrow keys and PgUp and PgDown. Arrow keys move 10%, PgUp and PgDown move 90% of the screen size.

protected override bool ProcessCmdKey(ref Message msg, Keys keyData)
    const int WM_KEYDOWN = 0x100;
    const int WM_SYSKEYDOWN = 0x104;

    if ((msg.Msg == WM_KEYDOWN) || (msg.Msg == WM_SYSKEYDOWN))
        switch (keyData)
            case Keys.Right:
                imgx -= (int)(pictureBox.Width * 0.1F / zoom);

            case Keys.Left:
                imgx += (int)(pictureBox.Width * 0.1F / zoom);

            case Keys.Down:
                imgy -= (int)(pictureBox.Height * 0.1F / zoom);

            case Keys.Up:
                imgy += (int)(pictureBox.Height * 0.1F / zoom);

            case Keys.PageDown:
                imgy -= (int)(pictureBox.Height * 0.90F / zoom);

            case Keys.PageUp:
                imgy += (int)(pictureBox.Height * 0.90F / zoom);

        return base.ProcessCmdKey(ref msg, keyData);


  • Initial release.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Lars Pehrsson
Software Developer (Senior) DSR
Denmark Denmark
No Biography provided

You may also be interested in...

Comments and Discussions

Questionmouse position relative to the image Pin
hayu16-Jul-14 23:46
memberhayu16-Jul-14 23:46 
AnswerRe: mouse position relative to the image Pin
BernhardDieber8-Jan-15 3:22
memberBernhardDieber8-Jan-15 3:22 
QuestionLittle help Pin
Vlade Ilievski28-Oct-13 2:27
memberVlade Ilievski28-Oct-13 2:27 
AnswerRe: Little help Pin
defej12-Feb-14 19:45
memberdefej12-Feb-14 19:45 
QuestionAlternative Pin
general.failure17-Apr-13 0:33
membergeneral.failure17-Apr-13 0:33 
Questioncode for zooming Pin
ayyappa75215-Mar-13 8:31
memberayyappa75215-Mar-13 8:31 
AnswerRe: code for zooming Pin
Lars Pehrsson15-Mar-13 23:16
memberLars Pehrsson15-Mar-13 23:16 
GeneralMy vote of 5 Pin
avnerma10-Feb-13 21:58
memberavnerma10-Feb-13 21:58 
QuestionRotate Image Pin
Faisal437-Aug-12 20:02
groupFaisal437-Aug-12 20:02 
QuestionRotate Image Pin
Faisal437-Aug-12 20:00
groupFaisal437-Aug-12 20:00 
QuestionZoom Speed Pin
Coen Klosters20-Jun-12 5:15
memberCoen Klosters20-Jun-12 5:15 
QuestionVery good job ! How about VB version of the code? Pin
Member 85955969-Mar-12 0:44
memberMember 85955969-Mar-12 0:44 
GeneralGreat Solution! Pin
raananv26-Oct-11 0:13
memberraananv26-Oct-11 0:13 
GeneralMy vote of 4... Pin
Jun Du14-Mar-11 6:05
memberJun Du14-Mar-11 6:05 
GeneralRe: My vote of 4... Pin
Lars Pehrsson14-Mar-11 23:27
memberLars Pehrsson14-Mar-11 23:27 
GeneralSource code is unavailable Pin
robertjb207-Mar-11 5:27
memberrobertjb207-Mar-11 5:27 
GeneralRe: Source code is unavailable Pin
Lars Pehrsson7-Mar-11 7:04
memberLars Pehrsson7-Mar-11 7:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 15 Mar 2011
Article Copyright 2011 by Lars Pehrsson
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid