Click here to Skip to main content
Click here to Skip to main content

Pan and Zoom Very Large Images

, 31 Oct 2009 Ms-PL
Rate this:
Please Sign up or sign in to vote.
Smoothly panning and zooming very large images can be a challenge. Here’s a control, with source code, that demonstrates one way of overcoming this challenge, as well as a few "Extra" image processing features.

Note: This was written against .NET 2.0, then manually converted to .NET 1.1.

Sample image


I recently wrote an article showing a simple method for panning an image. The code worked very well for small to moderate sized images. However, when using very large images, the performance degraded significantly.

That article used a picture box within a panel, and used the auto scroll functionality of the panel to perform scrolling. I received quite a bit of feedback indicating the need for a version that could handle very large images and still pan very smoothly. I also received requests for ideas on how to zoom the image in and out. So, I got to work.

What I came up with is a control that could smoothly pan super-sized images, and also provided zoom functionality. My tests were with a 49MB GIF (7000 x 7000). The performance was very smooth. Of course, the control works equally as well with small images. The control is demonstrated in the included sample project.

This custom control does not use a picture box, nor does it inherit from one. Neither is there a panel or any "auto-scrolling". This is very different and very much a better way of panning an image (in my opinion). An added benefit to this example is the ability to zoom the image without resizing a picture box (which can get quite large in memory).

How It Works

  1. Only paints the part of the image currently visible.
  2. Double-buffering provides flicker free panning.
  3. GDI+ automatically scales the image for us.

Public Properties

  • Public Property PanButton() As System.Windows.Forms.MouseButtons
  • Public Property ZoomOnMouseWheel() As Boolean
  • Public Property ZoomFactor() As Double
  • Public Property Origin() As System.Drawing.Point

Public Shadows

  • Public Shadows Property Image() As System.Drawing.Image
  • Public Shadows Property initialimage() As System.Drawing.Image

Public Methods

  • Public Sub ShowActualSize()
  • Public Sub ResetImage()

Using the control is as simple as using a standard PictureBox. First, drop the control on a form, then when you need to show an image, you can do it this way:

Dim bmp As New Bitmap("Image.jpg")
Me.ImageViewer1.Image = bmp

Don't forget to change the filename!

It is important to note: If you are working with very large images, you should not pre-load them in the designer. This seriously bloats the project, and can result in "Out of Memory" issues. Instead, load your images during run-time.

Default Behavior

  • Panning the image: Click and hold the left mouse button while the cursor is over the image. Then, simply move your mouse around, with the button still depressed.
  • Zooming: Make sure the control has focus (click the image). Then, use your mouse wheel to zoom in and out.

Customized Usage

You can tell the control what button to use for panning, with the "PanButton" property. You can turn off the default zooming by setting the ZoomOnMouseWheel property to False.

You can manually set the zoom factor so you could implement your own zoom functionality (i.e., using a slider, or buttons).

You can move the image around programmatically by setting the origin. The origin property gets or sets the coordinates of the top left corner of the viewable window in relation to the original image. For example, if you wanted to see the bottom right corner of an image with a size of 5000 x 5000, and your viewable control size was 500 pixels x 500 pixels, you could set the origin to 4500, 4500. This assumes, of course, that you have a zoom factor of 1 (not zoomed in or out).

You could catch the paint event of the control and overlay your own graphics. Just be careful to take the zoom factor into consideration if you need to draw at precise coordinates in relation to the original image.


Due to popular demand, scrollbars have now been implemented.

Double Buffering

Double buffering is accomplished by setting the control styles in the constructor as such:

Public Sub New()
     'This call is required by the Windows Form Designer.
     'Add any initialization after the InitializeComponent() call
     Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
     Me.SetStyle(ControlStyles.DoubleBuffer, True)
End Sub

Just In Time Painting?

Well, sort of. While we do have a copy of the image in memory, we only paint the area currently viewable.

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
End Sub

Protected Overrides Sub OnSizeChanged(ByVal e As EventArgs)
     DestRect = New System.Drawing.Rectangle(0, 0, _
                    ClientSize.Width, ClientSize.Height)
End Sub

Private Sub DrawImage(ByRef g As Graphics)
     If m_OriginalImage Is Nothing Then Exit Sub
     SrcRect = New System.Drawing.Rectangle(m_Origin.X, m_Origin.Y, _
                          ClientSize.Width / m_ZoomFactor, _
                          ClientSize.Height / m_ZoomFactor)
     g.DrawImage(m_OriginalImage, DestRect, SrcRect, GraphicsUnit.Pixel)
End Sub

Note that we are taking the current zoom factor into consideration when drawing. By using the DrawImage method of the Graphics object, GDI will scale the image from the source area to fit the destination area.

Panning the Image

The code for panning the image and keeping the zoom factor in mind, is as follows:

Private Sub ImageViewer_MouseMove(ByVal sender As Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles MyBase.MouseMove

     'Make sure we are panning on the correct mouse button
     If e.Button = m_MouseButtons Then
          Dim DeltaX As Integer = m_PanStartPoint.X - e.X
          Dim DeltaY As Integer = m_PanStartPoint.Y - e.Y

          'Set the origin of the new image
          m_Origin.X = m_Origin.X + (DeltaX / m_ZoomFactor)
          m_Origin.Y = m_Origin.Y + (DeltaY / m_ZoomFactor)

          'Make sure we don't go out of bounds
          If m_Origin.X < 0 Then m_Origin.X = 0
          If m_Origin.Y < 0 Then m_Origin.Y = 0

          If m_Origin.X > m_OriginalImage.Width - _
                         (ClientSize.Width / m_ZoomFactor) Then
               m_Origin.X = _m_OriginalImage.Width - _
                            (ClientSize.Width / m_ZoomFactor)
          End If
          If m_Origin.Y > m_OriginalImage.Height - _
                           (ClientSize.Height / m_ZoomFactor) Then
               m_Origin.Y = m_OriginalImage.Height - _
                           (ClientSize.Height / m_ZoomFactor)
          End If

          If m_Origin.X < 0 Then m_Origin.X = 0
          If m_Origin.Y < 0 Then m_Origin.Y = 0

          'reset the startpoints
          m_PanStartPoint.X = e.X
          m_PanStartPoint.Y = e.Y

          'Force a paint
     End If
End Sub


Many of the concepts used within this example project are worthy of their own discrete articles. Therefore, I didn't go into any great detail about what double buffering is, nor did I dive into the intricacies of GDI+ in .NET. However, I hope that I have adequately covered the basics of how this control works, as well as how you can use it.

Please Note...

This is by no means meant to be a complete solution, nor is this code "production-ready". Then too, there are usually many ways to solve a problem; this is one. Hopefully, though, this sample has proven beneficial in some way. Perhaps, this article has given you a great idea about how to do this a better way, or an idea for expanding what is presented here. Great! That's why I wrote it. Please feel free to leave some feedback. Let me know how it went for you. If you do have an idea on how to improve this example or this article, please let me know that too.

P.S.: Don't forget to vote! If you don't have an account, make one!

Revisions and Bug Fixes ...

  • 02/04/2007
    • Added scrollbar functionality
    • Fixed null image bug
    • Fixed memory leak
    • Implemented several performance improving suggestions
    • Added ability to invert colors
    • Added ability to stretch image or set to actual pixels
    • Removed the hard coded image file and added dialogue box to test harness
  • 02/06/2007
    • Added a .NET 1.1 version
  • 30/10/2009
    • Deleted the .NET 1.1 zip file


  1. Change Points to PointF and Rectangles to RectangleF to allow finer panning and scrolling when zoomed in very tight
  2. Update the article to dissect the app and explain why it works the way it does
  3. Update the code presented in the article

Thanks for your patience!


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Anthony Queen
Software Developer (Senior)
United States United States
I started my career in software development back in 2000. Prior to that, I made my living as a detail drafter. My true start in programming, though, goes back much further. I first started learning to program when I was about 10 years old. It was back in ‘82 that I wrote my first application. It was a simple calculator program written on a TRS-80 that my uncle had. Since then, I’ve programmed in Basic, QuickBasic, Pascal, C++, VB 6, VB.NET, Java, HTML, and C #. I have a very diverse background. I’ve worked and written software for several types of companies, including manufacturing, engineering, and finance. I’ve had the opportunity to design and maintain a few enterprise level databases, I’ve written applications to run on windows CE, in a wireless manufacturing environment. I’ve also had opportunities to teach OOP methodologies, and design patterns. I thoroughly enjoy what I do, and my only regret is that I didn’t start sooner.

Comments and Discussions

QuestionAdding a custom dynamic rectangle on the ImageCotrol PinmemberDeepak Raj U28-Nov-14 21:20 
GeneralMy vote of 5 PinmemberMember 1074256324-Oct-14 11:34 
QuestionSimple But Hard to find Answer! PinmemberGheoOp11-Jun-14 6:47 
GeneralMessage Removed PinmemberJoris Vergeest11-Jun-14 5:04 
QuestionAbout the scaling quality Pinmember99117651519-Nov-13 4:37 
GeneralMy vote of 5 PinmemberMember 1021556117-Aug-13 16:35 
GeneralMy vote of 5 Pinmemberaalhanane6-Jun-13 3:26 
QuestionC# PinmemberMember 1001424427-Apr-13 8:55 
QuestionStretchToFit PinmemberSandy Nichols18-Apr-13 9:27 
GeneralMy vote of 5 Pinmembertungpt001796-Feb-13 20:59 
QuestionBug in center stretch code Pinmembersil3nt133216-Nov-12 7:43 
QuestionThis is an excellent control! Pinmemberejf2816-Nov-12 7:20 
QuestionC# PinmemberMichael Lev31-Oct-12 13:36 
AnswerRe: C# PinmemberMichael Lev1-Nov-12 6:39 
Questioni need to center image ..? Pinmemberesaaco24-Oct-12 0:12 
Questioncannot programmically pan(scroll) image PinmemberMember 875329019-Oct-12 17:38 
QuestionHow Add a grid on imageviewer ? Pinmembergoldorakiller10-Oct-12 12:35 
GeneralMy vote of 5 Pinmembermanoj kumar choubey27-Feb-12 1:15 
GeneralMy vote of 5 Pinmembersigma_ivan14-Feb-12 3:01 
QuestionHow to link two image control (created by Anthony Queen) [modified] PinmemberMember 859559626-Jan-12 0:16 
QuestionSmall bug --> Must use ClientSize.Height (or Width) instead of Me.Height (or Width) PinmemberAcquiesce19688-Nov-11 9:04 
QuestionMy Vote 6 Pinmembertamilpuyal_2823-Jun-11 2:09 
GeneralLicences: I want to use this Pinmemberraghushetty1629-May-11 21:40 
GeneralMy vote of 5 PinmemberMember 41476741-May-11 23:25 
GeneralHandle large files PinmemberNijanand11-Apr-11 9:21 
GeneralRe: Handle large files PinmemberJohn Logan6-Oct-11 2:19 
GeneralMy vote of 5 Pinmemberfatih isikhan16-Dec-10 4:29 
GeneralThank you so much Pinmemberjaanu_simi26-Oct-10 2:49 
GeneralMy vote of 5 PinmemberAlex Matthews13-Oct-10 3:35 
GeneralMy vote of 5 Pinmemberspammehard200224-Sep-10 6:29 
QuestionHow to increase the amount of zoom? Pinmembertasuki7820-Aug-10 5:48 
GeneralMy vote of 5 Pinmemberaasif aslam30-Jun-10 0:44 
QuestionI need to implement crop in my application [modified] Pinmemberaasif aslam29-Jun-10 20:12 
please help me!
i am using queens_imageControl Author:Anthony Queen,
Article:Pan and Zoom Very Large Images

which has a feature pan zoom and window zoom,
i need to implement crop feature in it but i am not able to do it.
what i did is :-On DrawingBorad control
i created a cropImage()function which take two params ie.cropImage(img,cropArea)and function returns cropped portion of image(ie.bmpCrop) which i take it in variable of type image ie.m_cropedImage on mouseUpevent of drawingboard control.
image is a:- image of type system.drawing.Image
cropArea is a:-area drawn from a rectangle.

QueensImageControl :-it is image viewer
on mouseUp_event i am calling crop function ie.cropImage(m_OriginalImage, m_Select_Rect)and holding cropped image in variable(ie.m_cropedImage) returned by cropImage()function
then i created a method crop()in QueensImage control in which i am displaying the value of variable(ie.m_cropedImage)to drawingBoard
and in my main form of my application i am calling the crop method
but on run time it doesnot display the croppedimage in the image control
i dont know what is going wrong
My code is:- OnDrawingboard Control

Public Function cropImage(ByVal img As Image, ByVal cropArea As Rectangle) As Image
Dim bmpImage As New Bitmap(img)
Dim bmpCrop As Bitmap = bmpImage.Clone(cropArea, bmpImage.PixelFormat)
Return DirectCast(bmpCrop, Image)
End Function


OnMouseUp_event of Drawingboard Control
Public Sub DrawingBoard_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
If m_OriginalImage Is Nothing Then Exit Sub
If Not PanMode Then
EndPoint = New Point(e.X, e.Y)
If Selected_Rectangle = Nothing Then Exit Sub
m_cropedImage = cropImage(m_OriginalImage, m_Select_Rect)
End If
End Sub

On Queens_ImageControl
Public Sub crop()
Dim crp As DrawingBoard = New DrawingBoard()
Me.DrawingBoard1.Image = crp.m_cropedImage
End Sub

On main form of my application
Private Sub Button8_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button8.Click
End Sub

modified on Wednesday, June 30, 2010 1:27 AM

Questionhow to limit the zoom in Queens_image_control Pinmemberaasif aslam26-Jun-10 0:54 
Questionhow to to implement crop with your Fantastic image control Pinmemberaasif aslam26-Jun-10 0:53 
Questionhow to to implement crop Pinmemberaasif aslam25-Jun-10 20:39 
Questionhow to limit the zoom in Queens image control Pinmemberaasif aslam25-Jun-10 20:37 
Generalproposal PinmemberMr.PoorEnglish31-Oct-09 9:23 
GeneralWell done, just what I was looking for! Pinmemberwalterman29-Oct-09 11:39 
GeneralVery, very nice - thank you - couple l/r scrolling Pinmemberphred218-Aug-09 12:15 
QuestionWhere is the executable? Pinmemberdotbond25-May-09 18:47 
AnswerRe: Where is the executable? PinmemberDean Moe12-Jul-09 17:24 
Generalwant web base user control PinmemberMember 409652918-Feb-09 7:47 
GeneralThank you! Pinmemberradiaki21-Jan-09 6:01 
GeneralMany thanks!! PinmemberNippo3-Dec-08 22:25 
GeneralFeedback Pinmemberkonikula30-Nov-08 18:25 
GeneralTiff file Fax PinmemberMember 118260010-Nov-08 12:47 
GeneralThe Zoom and Pan functions for VB9 (.NET 3.5) Pinmember7amood7-Nov-08 6:35 
GeneralZoom and center to the clicked point when double-clicking on the image Pinmembervutrongkhanh9-Oct-08 4:45 
GeneralRe: Zoom and center to the clicked point when double-clicking on the image Pinmemberalgates002710-Nov-08 23:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.150327.1 | Last Updated 31 Oct 2009
Article Copyright 2006 by Anthony Queen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid