Click here to Skip to main content
13,357,514 members (67,662 online)
Click here to Skip to main content
Add your own
alternative version


78 bookmarked
Posted 22 Nov 2005

ImageBox Control with Zoom/Pan Capability

, 6 Dec 2005
Rate this:
Please Sign up or sign in to vote.
How to create a simple control that extends the capability of an ImageBox by adding zoom and pan (scroll).


This control extends the capability of an ImageBox by including scrollbars to pan the image and a method for zooming the size of the image. My goal here is to show you two things:

  1. How to create your own controls that extend the System.Windows.Forms controls.
  2. How to add zoom/pan capability to an image display in a simple fashion.

Creating the control

Using Microsoft Visual Studio .NET, the easiest way to create a control is to begin by right-clicking on the project and selecting "Add -> Add User Control".

The Zoom control was created by adding a GroupBox, TrackBar, and three Labels for the minimum zoom (25%), center zoom (100%) and maximum zoom (300%). I set the Anchor property of the GroupBox and TrackBar to "Right, Top, Left" so that resizing the window will resize the width of these controls. To keep the 100% Label aligned to the center of the GroupBox, I set the Anchor property to "Top".

The Image control with automatic scroll bars was created by dropping a Panel onto the control and sizing it to fill the remaining section of the control (below the Zoom control) and setting its Anchor property to "Left, Top, Right, Bottom" so that it will resize with the control. Set the AutoScroll property to "true". Finally, I dropped an ImageBox inside the panel with Location = 0,0 and SizeMode=StretchImage.

The properties must be set with AutoScroll=true and SizeMode=StretchImage in order for the zoom and scroll bars to work properly.

// zoom controls
private System.Windows.Forms.GroupBox groupBox1;
private System.Windows.Forms.TrackBar scrollZoom;
private System.Windows.Forms.Label lblMax;
private System.Windows.Forms.Label lblMin;
private System.Windows.Forms.Label lblCenter;    
// image controls
private System.Windows.Forms.Panel imagePanel;
private System.Windows.Forms.PictureBox imgBox;

Developing the code

At this point it becomes very simple. By placing the ImageBox inside a Panel with AutoScroll=true, the Panel will automatically add scrollbars when the ImageBox size exceeds the size of the Panel. So, all you have to do is to add code to get or set the image and a little bit of code to control the zoom.

The image is set by adding a public property. In this case, I chose to make the property available at design time by setting Browsable(true). I also re-center the zoom scroll when a new image is loaded and disable the zoom scroll if the image is null. Finally, I set the size of the ImageBox equal to the size of the Image for a zoom factor of 100%.

As mentioned in the comments below by yfoulon, adding scrollZoom.Focus() should allow the use of mousewheel to zoom the image. (I don't have a mouse so I was unable to test this.)

Description("Image loaded into the box.")]
public Image Image
        return imgBox.Image;
        // Set the image value
        imgBox.Image = value;

        // enable the zoom control if this is not a null image
        scrollZoom.Enabled = (value != null);

        if (scrollZoom.Enabled)
            // reset zoom control
            scrollZoom.Value = this.scrollZoom.Maximum/2;

            // Initially, the zoom factor is 100% so set the
            // ImageBox size equal to the Image size.
            imgBox.Size = value.Size;
            // If null image, then reset the imgBox size
            // to the size of the panel so that there are no
            // scroll bars.
            imgBox.Size = imagePanel.Size;

The zoom is handled with an EventHandler that calls a method when the user scrolls the zoom TrackBar. The zoom factor is currently a hard-coded array with 11 elements which is the same as the number of positions on the TrackBar (min = 0, center = 5, max = 10). The ImageBox is then resized by multiplying the Image size by the new zoom factor. Because the ImageBox's SizeMode is set to "StretchImage", the Image will be scaled to fit the new size of the ImageBox.

private double[] zoomFactor = 
   {.25, .33, .50, .66, .80, 1, 1.25, 1.5, 2.0, 2.5, 3.0}; 

private void scrollZoom_Scroll(object sender, 
                                System.EventArgs e)

private void setZoom()
    // The scrollZoom changed so reset the zoom factor
    // based on the scrollZoom TrackBar position.
    double newZoom = zoomFactor[scrollZoom.Value];

    // Set the ImageBox width and height to the new zoom
    // factor by multiplying the Image inside the Imagebox
    // by the new zoom factor.
    imgBox.Width = 
             Convert.ToInt32 ( imgBox.Image.Width * newZoom); 
    imgBox.Height = 
             Convert.ToInt32 ( imgBox.Image.Height * newZoom );

Additionally, I also added a KeyDown event handler and some code to allow the user to increase or decrease the zoom factor using the Ctrl+ and Ctrl- keys.

private void ImageBoxPanZoom_KeyDown(object sender, KeyEventArgs e)
    // Was the key combination that was pressed Ctrl+ or Ctrl-?
    // If so, then change the zoom level (but only if the zoom
    // is enabled)
    if (scrollZoom.Enabled) 
        // Note: The e.KeyData is the combination of all the
        // keys currently pressed down. To find out if this is
        // the Ctrl key *and* the + key, you "or" the Keys 
        // together. This is a bitwise "or" rather than the 
        // || symbol used for boolean logic.

        if((e.KeyData == (Keys.Oemplus | Keys.Control)) &&
            (scrollZoom.Value != scrollZoom.Maximum))
        else if ((e.KeyData == (Keys.OemMinus | Keys.Control)) &&
            (scrollZoom.Value != scrollZoom.Minimum))

Points of interest

At some point, I would like to revisit this project and add a method of scrolling the image by using the arrow keys and/or the mouse.


  • 12/01/05 - Thanks to yfoulon for correcting a mistake I made in the original article. It's even simpler than I thought! :)


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionLicense? Pin
ByteBean4-Mar-15 5:43
memberByteBean4-Mar-15 5:43 
Generalregarding this article Pin
himanshi tyagi3-Apr-12 0:14
memberhimanshi tyagi3-Apr-12 0:14 
GeneralMy vote of 5 Pin
manoj kumar choubey28-Feb-12 23:42
membermanoj kumar choubey28-Feb-12 23:42 
GeneralScrolling Capabilities Pin
GregWilkerson26-May-09 9:25
memberGregWilkerson26-May-09 9:25 
GeneralRe: Scrolling Capabilities Pin
BillWoodruff6-Jul-09 8:30
memberBillWoodruff6-Jul-09 8:30 
GeneralUm Pin
konikula30-Nov-08 18:33
memberkonikula30-Nov-08 18:33 
GeneralAbsolutely awesome. Pin
david_k1315-Aug-07 10:18
memberdavid_k1315-Aug-07 10:18 
GeneralRe: Absolutely awesome. Pin
gabkorta17-Jul-08 3:39
membergabkorta17-Jul-08 3:39 
QuestionDoes this fix everything? Pin
smithsmithsmith2-Jan-07 14:36
membersmithsmithsmith2-Jan-07 14:36 
QuestionMore scrolling issues Pin
Eric Weaver2-Oct-06 10:18
memberEric Weaver2-Oct-06 10:18 
Questiondisable scrolling with MouseWheel? Pin
Smeld18-Sep-06 21:21
memberSmeld18-Sep-06 21:21 
I'm trying to do much the same thing as you with Visual Studio 2005 in C#. I have a form with a panel and inside the panel is a picturebox. At the bottom of the form I have a text box for debug information.

I have autoscroll=true for the panel. When I zoom in and out using the MouseWheel and the image in the picturebox becomes bigger than the panel, the horizontal and vertical scroll bars appear as desired. However, the MouseWheel also scrolls the vertical scroll bar up and down along with zooming (much like in a web browser)!

Is there a way to disable the default MouseWheel event that makes the panel scroll up and down when the vertical scroll bar is showing?

I've found that I have to call focus() on the panel when the mouse event Enters() is called in order to have the MouseWheel event fire off for the panel.

I get the feeling the answer is simple. However, I can find no references after hours of scouring the web(!). Looking for a solution in your example, it occurs to me that your program might have the same problem? You mention that you didn't test the MouseWheel functionality as you didn't have a mouse with a MouseWheel.. (d'oh!).


QuestionAutomatic scroll events Pin
jethro_tull7-Aug-06 23:48
memberjethro_tull7-Aug-06 23:48 
QuestionPoints of interest Pin
rheia8419-Jun-06 3:07
memberrheia8419-Jun-06 3:07 
QuestionMouseClick Event not working? Pin
mhavoc8-Jan-06 20:11
membermhavoc8-Jan-06 20:11 
AnswerRe: MouseClick Event not working? Pin
mhavoc8-Jan-06 21:21
membermhavoc8-Jan-06 21:21 
GeneralLinks Pin
fwsouthern6-Dec-05 19:53
memberfwsouthern6-Dec-05 19:53 
GeneralRe: Links Pin
smallwisdom5-Jan-06 9:34
membersmallwisdom5-Jan-06 9:34 
Questionautofocus, dock to fill and scroll Pin
yfoulon1-Dec-05 0:29
memberyfoulon1-Dec-05 0:29 
AnswerRe: autofocus, dock to fill and scroll Pin
smallwisdom1-Dec-05 14:46
membersmallwisdom1-Dec-05 14:46 
GeneralFocus on trackball Pin
yfoulon30-Nov-05 23:15
memberyfoulon30-Nov-05 23:15 
GeneralRe: Focus on trackball Pin
smallwisdom1-Dec-05 14:22
membersmallwisdom1-Dec-05 14:22 
GeneralNot bad Pin
Tim McCurdy29-Nov-05 3:56
memberTim McCurdy29-Nov-05 3:56 
Generaldownload links broken Pin
sprague29523-Nov-05 5:29
membersprague29523-Nov-05 5:29 
GeneralRe: download links broken Pin
sprague29523-Nov-05 7:51
membersprague29523-Nov-05 7:51 
QuestionWhere's the image ? Pin
saegezauberer22-Nov-05 22:21
membersaegezauberer22-Nov-05 22:21 

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
Web03 | 2.8.180111.1 | Last Updated 7 Dec 2005
Article Copyright 2005 by smallwisdom
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid