Click here to Skip to main content
12,893,190 members (62,244 online)
Click here to Skip to main content
Add your own
alternative version


51 bookmarked
Posted 31 May 2008

A Zoomable and Scrollable PictureBox

, 31 May 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
An ImagePanel component created to replace the PictureBox.


A big question in the Windows Forms world is "How can I zoom and scroll the PictureBox?" The answer is to use the ImagePanel, which enables you to simply zoom and pan an image.

I use Microsoft Visual C# 2005 Express Edition to build it. It's easy and simple. You can start a new project and add a user control. In the Design window, you drag a vertical scrollbar and a horizontal scrollbar to the user control, then go to the code window and add the code as in the source file, ImagePanel.cs. That's all, a zoomable and scrollable PictureBox replacement has been built and you can use it now.

Zooming is done by a Matrix object:

Matrix mx=new Matrix(); // create an identity matrix
mx.Scale(zoom,zoom); // zoom image

Panning is done by the values returned by the scrollbars. We tell the scrollbar the image size, which is its real size multiplied by the zoom factor:

if ((canvasSize.Width * zoom - viewRectWidth) > 0)
    this.hScrollBar1.Maximum =(int)( canvasSize.Width * zoom) - viewRectWidth;
if ((canvasSize.Height * zoom - viewRectHeight) > 0)
    this.vScrollBar1.Maximum = (int)(canvasSize.Height * zoom) - viewRectHeight;

So, the correct position within the real image is the scrollbar values divided by the zoom factor:

Point pt=new Point((int)(hScrollBar1.Value/zoom),(int)(vScrollBar1.Value/zoom));

To display the image on the center of this control, the Matrix object is used again:

mx.Translate(viewRectWidth/2.0f,viewRectHeight/2.0f, MatrixOrder.Append);

This component has a good feature: during image zoom out, only a portion of the image is drawn. It saves a lot of computer resources:

if (canvasSize.Width * zoom < viewRectWidth && 
            canvasSize.Height * zoom < viewRectHeight)
    srcRect = new Rectangle(0, 0, canvasSize.Width, canvasSize.Height);
    // view all image
else srcRect = new Rectangle(pt, new Size((int)(viewRectWidth / zoom), 
                            (int)(viewRectHeight / zoom)));
// view a portion of image

To test this little but strong control, I put it on a form and added a trackbar to provide the zoom factor. Double click the ImagePanel to load a picture. Try it, how's it?



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


About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

QuestionAlternative solution Pin
djmarcus28-Feb-16 7:07
memberdjmarcus28-Feb-16 7:07 
QuestionDragging image Pin
quicksilver17ro18-Aug-13 5:03
memberquicksilver17ro18-Aug-13 5:03 
Questionhow can i add dragging options? Pin
Member 838204526-Dec-12 1:09
memberMember 838204526-Dec-12 1:09 
GeneralMy vote of 5 Pin
manoj kumar choubey1-Mar-12 22:53
membermanoj kumar choubey1-Mar-12 22:53 
GeneralExactly what I was looking for Pin
EpikYummeh29-Nov-11 15:36
memberEpikYummeh29-Nov-11 15:36 
Generalthanks Pin
asugix18-Jul-10 4:01
memberasugix18-Jul-10 4:01 
GeneralGreat work! Pin
sintesia25-Mar-10 6:56
membersintesia25-Mar-10 6:56 
GeneralA Little Memory Used More Than Requared Pin
Member 278444925-Mar-09 17:21
memberMember 278444925-Mar-09 17:21 
QuestionHow can i transfer this to Windows Mobile 6? Pin
womisa1-Mar-09 11:45
memberwomisa1-Mar-09 11:45 
Questionimage is not kept centered when zoom Pin
dvisions20-Sep-08 4:17
memberdvisions20-Sep-08 4:17 
AnswerRe: image is not kept centered when zoom Pin
richardn6617-Feb-10 9:28
memberrichardn6617-Feb-10 9:28 
GeneralRe: image is not kept centered when zoom Pin
flacolarry19-Feb-10 13:41
memberflacolarry19-Feb-10 13:41 
QuestionHow about to add croping, resizing? Pin
Demaker2-Jul-08 1:20
memberDemaker2-Jul-08 1:20 
Generalmaybe simplified version Pin
Huanacaraz2-Jun-08 21:38
memberHuanacaraz2-Jun-08 21:38 
UserControl has scrolling build in, so you dont need to use another scrollbars. Just set control's AutoScroll property to true and set the AutoScrollMinSize property to the desired size. AutoScrollPosition then contains coordinate of control's origin (0,0).

OnPaint() ....
      //------------- first calculate coordinates of internal 0,0 (centering)
      Point origin = new Point(0 + AutoScrollPosition.X, 0 + AutoScrollPosition.Y);
      if (this.ClientSize.Width > this.container.Bounds.Width)
        origin.X = (this.ClientSize.Width - this.container.Bounds.Width) / 2;
      if (this.ClientSize.Height > this.container.Bounds.Height)
        origin.Y = (this.ClientSize.Height - this.container.Bounds.Height) / 2;
      //-- set move and scale transformations to graphics
      //   so we can use normal coordinates when painting graphic objects
      Graphics g = e.Graphics;
      g.TranslateTransform(origin.X, origin.Y);
      if (scaleMode) g.ScaleTransform(scaleValue[0], scaleValue[1]);
      //Paint control backgound
      g.FillRectangle(bgBrush, g.VisibleClipBounds);
      //user paint 

AnswerRe: maybe simplified version Pin
YLS CS3-Jun-08 4:33
memberYLS CS3-Jun-08 4:33 
GeneralRe: maybe simplified version Pin
Member 1224497215-Jul-16 2:24
memberMember 1224497215-Jul-16 2:24 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 31 May 2008
Article Copyright 2008 by YLS CS
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid