Click here to Skip to main content
14,921,581 members
Articles / Multimedia / GDI+
Posted 28 Aug 2006


240 bookmarked

A scrollable, zoomable, and scalable picture box

Rate me:
Please Sign up or sign in to vote.
4.78/5 (82 votes)
13 Nov 20064 min read
A scrollable, zoomable, and scalable picture box with context menu.

Sample Image


ScalablePictureBox has the following features.

  • Scrollable: scrolling a picture with scroll bars, mouse wheel, and picture tracker.
  • Zoomable: zooming in/out a picture with context menu and zoom in/out cursors.
  • Scalable: adjusting the size of the picture box, and creating a zoom context menu automatically according to the size of the picture to be shown.

ScalablePictureBox uses the PictureBoxSizeMode.Zoom property of the PictureBox, therefore, it could only work on .NET Framework 2.0. However, it can be modified easily for use in the .NET Framework 1.1 environment by drawing a picture on the Paint event.


Applications for image displaying need to show different sizes of pictures in a limited form area. The size of pictures to be shown is large usually, for example, the size of a digital camera photo with 300 Meg pixels will be about 2000*1500 pixels. Users would want to see the whole image, or a properly zoomed out image. When I was developing a free album manager application (QAlbum.NET), a scrollable picture box control was needed, and I developed ScalablePictureBox.

Using the control

Using ScalablePictureBox is very simple. You can use the ScalablePictureBox as shown here:

// set an image to show
this.scalablePictureBox.Picture = image;

// set pictureBox control of scalablePictureBox
// as active control of the form
// for ScalablePictureBox to receive mouse events
this.ActiveControl = this.scalablePictureBox.PictureBox;


The ScalablePictureBox control consists of four user controls. The structure is shown in Fig. 1. It uses the Facade and Mediator design patterns. ScalablePictureBox is a facade of the ScalablePictureBox control. It also mediates ScalablePictureBoxImp and PictureTracker. ScalablePictureBoxImp is the core implementation of the scrollable, zoomable, and scalable picture box. PictureTracker is a tracker, a scroller, and a thumbnail viewer of the current picture. TransparentButton is a tiny user control used as a close button in PictureTracker. Util provides some helper functions for the controls.

Structure of ScalablePictureBox

How it works

ScalablePictureBox is a facade class. An application should use ScalablePictureBox for showing a picture instead of directly using a ScalablePictureBoxImp control. Therefore, ScalablePictureBoxImp has internal accessibility. On the other hand, ScalablePictureBox controls and mediates ScalablePictureBoxImp and PictureTracker; for example, it shows PictureTracker when the current picture is zoomed in, and hides PictureTracker when the current picture is shown fully.

ScalablePictureBoxImp displays an image by using a PictureBox with the PictureBoxSizeMode.Zoom property. So, the image would be displayed with a zooming mode. ScalablePictureBox dynamically changes the size of the PictureBox with the selected zooming rate, and sets the AutoScroll property to true if the size of the PictureBox is bigger than the size of the client area, letting the image be scrollable.

/// <summary>
/// Resize picture box on resize event
/// </summary>
private void OnResize(object sender, System.EventArgs e)

/// <summary>
/// Scale picture box to fit to current control size and image size
/// </summary>
private void ScalePictureBoxToFit()
    if (this.Picture == null)
        // set size of picture box the same as client size
    else if (this.pictureBoxSizeMode == PictureBoxSizeMode.Zoom ||
            (this.Picture.Width <= this.ClientSize.Width && 
             this.Picture.Height <= this.ClientSize.Height))
        // set size of picture box as not bigger
        // than client size according to current image
        // set size of picture box according
        // to current scale percent selected
        this.AutoScroll = true; // let the control scrollable

    // set cursor for picture box



The zooming context menu should be recreated when an image is loaded, or when the client size changes. And the ContextMenuStrip property should be set to null if the current image is null or the size of the current image is too small to zoom in. We should remember the selected zoom rate so as to let users know the current zooming rate when he/she pops up the context menu the next time, when a user has selected a zooming menu item.

/// <summary>
/// Refresh context menu strip according to current image
/// </summary>
private void RefreshContextMenuStrip()
    int minScalePercent = GetMinScalePercent();
    if (minScalePercent == MAX_SCALE_PERCENT)
        // no need popup context menu
        this.ContextMenuStrip = null;

        // add show whole menu item
        // add scale to fit width menu item
        // add other scale menu items
        for (int scale = minScalePercent / 10 * 10 + 10; 
             scale <= MAX_SCALE_PERCENT; scale += 10)

        this.ContextMenuStrip = this.pictureBoxContextMenuStrip;

        // set last selected menu item checked

    SetCursor4PictureBox();  // update cursor

ScalablePictureBox uses a zoom in cursor if the current image is displayed in fit-width mode and the image is zoomable, or uses a zoom out cursor if the current image is displayed with scrolling mode. When the picture box is left-mouse-button-clicked, the current picture would be displayed in fit-width mode if the current mode is in scrolling mode, or the current picture would be displayed in full-size mode if the current mode is in fit-width mode.

Zoom cursors of ScalablePictureBox are colored cursors. We use the LoadCursorFromFileW function of user32.dll to load colored cursors, with the following utility method:

/// <summary>
/// Load colored cursor handle from a file
/// </summary>
/// <param name="fileName"></param>
/// <returns></returns>
  EntryPoint = "LoadCursorFromFileW",
  CharSet = CharSet.Unicode)]
static public extern IntPtr LoadCursorFromFile(string fileName);

/// <summary>
/// Create cursor from embedded cursor
/// </summary>
/// <param name="cursorResourceName">embedded cursor resource name</param>
/// <returns>cursor</returns>
public static Cursor CreateCursorFromFile(String cursorResourceName)
    // read cursor resource binary data
    Stream inputStream = GetEmbeddedResourceStream(cursorResourceName)
    byte[] buffer = new byte[inputStream.Length];
    inputStream.Read(buffer, 0, buffer.Length);

    // create temporary cursor file
    String tmpFileName = System.IO.Path.GetRandomFileName();
    FileInfo tempFileInfo = new FileInfo(tmpFileName);
    FileStream outputStream = tempFileInfo.Create();
    outputStream.Write(buffer, 0, buffer.Length);

    // create cursor
    IntPtr cursorHandle = LoadCursorFromFile(tmpFileName);
    Cursor cursor = new Cursor(cursorHandle);
    tempFileInfo.Delete();  // delete temporary cursor file

    return cursor;

PictureTracker creates a thumbnail of the current picture for performance consideration. When the current picture is scrolled, it adjusts the highlighted area of the thumbnail, therefore a user could know which part of the current picture is shown. And, a user can scroll the current picture by dragging the highlighted area with the mouse. PictureTracker is located at the bottom right corner in the ScalablePictureBox control, by default. The problem is that the picture area of the bottom right corner is hidden by the PictureTracker control, and a user can not see that part of the picture. For solving this problem, the ScalablePictureBox provides a functionality for moving PictureTracker control to any position within the ScalablePictureBox control. A user could move PictureTracker to other positions to show hidden parts of the picture. ScalablePictureBox uses the rubber-band drawing technique to move the PictureTracker control, simulating XOR drawing, because the .NET Framework doesn't provide the XOR drawing method. The following code shows the rubber-band drawing technique:

/// <summary>
/// Draw a reversible rectangle
/// </summary>
/// <param name="rect">rectangle to be drawn</param>
private void DrawReversibleRect(Rectangle rect)
    // Convert the location of rectangle to screen coordinates.
    rect.Location = PointToScreen(rect.Location);

    // Draw the reversible frame.
    ControlPaint.DrawReversibleFrame(rect, Color.Red, FrameStyle.Dashed);

/// begin to drag picture tracker control
private void pictureTracker_MouseDown(object sender, MouseEventArgs e)
     // Make a note that we are dragging picture tracker control
    isDraggingPictureTracker = true;

    // Store the last mouse poit for this rubber-band rectangle.

    // draw initial dragging rectangle
    draggingRectangle = this.pictureTracker.Bounds;

/// dragging picture tracker control in mouse dragging mode
private void pictureTracker_MouseMove(object sender, MouseEventArgs e)
    if (isDraggingPictureTracker)
        // caculating next candidate dragging rectangle
        // saving current mouse position to be used for next dragging

        // dragging picture tracker only when the candidate dragging rectangle
        // is within this ScalablePictureBox control
        if (this.ClientRectangle.Contains(newPictureTrackerArea))
            // removing previous rubber-band frame
            // updating dragging rectangle
            draggingRectangle = newPictureTrackerArea;
            // drawing new rubber-band frame

/// end dragging picture tracker control
private void pictureTracker_MouseUp(object sender, MouseEventArgs e)
    if (isDraggingPictureTracker)
        isDraggingPictureTracker = false;

        // erase dragging rectangle

        // move the picture tracker control to the new position
        this.pictureTracker.Location = draggingRectangle.Location;


The maximum zoom-in rate of the ScalablePictureBox control is 100%. Some applications may need bigger zoom-in rate to show a more detailed picture. However, I don't think my QAlbum.NET needs this kind of a feature. Therefore, the current ScalablePictureBox doesn't provide this feature.


  • 28/09/2006 -- Added an internal picture tracker control for tracking the visible part of a picture, scrolling a picture, and viewing the thumbnail of the current picture. Updated this article completely.
  • 15/08/2006 -- Initial version of the article and ScalablePictureBox.


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

Bingzhe Quan
Web Developer
China China
Working as a senior software engineer after having worked in a university for about 10 years.

Comments and Discussions

QuestionAbility to use the Mouse Scroll button to Zoom-In Zoom-Out Pin
Tim8w19-Jan-21 5:53
MemberTim8w19-Jan-21 5:53 
QuestionFix for Access Denied in Util Function CreateCursorFromFile Pin
dutchsmoker17-Aug-14 2:35
Memberdutchsmoker17-Aug-14 2:35 
AnswerRe: Fix for Access Denied in Util Function CreateCursorFromFile Pin
PedroNF9-Mar-21 7:12
MemberPedroNF9-Mar-21 7:12 
Questionis there a version for windows forms in visual studio express 2013? Pin
Member 1041098619-Nov-13 14:18
MemberMember 1041098619-Nov-13 14:18 
Questionis there any way to use this control as a form surface ? Pin
gavri20006-Sep-13 0:21
Membergavri20006-Sep-13 0:21 
QuestionImage Disposing Feature Pin
Member 126146215-Jul-13 5:29
MemberMember 126146215-Jul-13 5:29 
QuestionPrinting Pin
karkan28-Dec-12 4:49
Memberkarkan28-Dec-12 4:49 
AnswerRe: Printing Pin
karkan28-Dec-12 19:04
Memberkarkan28-Dec-12 19:04 
Questionrotate image Pin
cerezaei15-May-12 21:05
Membercerezaei15-May-12 21:05 
SuggestionRe: rotate image Pin
Yang Li11-Dec-12 5:32
MemberYang Li11-Dec-12 5:32 
GeneralMy vote of 5 Pin
RAJI @Codeproject18-Mar-12 23:14
MemberRAJI @Codeproject18-Mar-12 23:14 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey24-Feb-12 3:13
professionalManoj Kumar Choubey24-Feb-12 3:13 
GeneralMy vote of 5 Pin
petite pomme2-Jan-12 5:14
Memberpetite pomme2-Jan-12 5:14 
QuestionCompile problem Pin
Code_Newbie26-Oct-11 11:38
MemberCode_Newbie26-Oct-11 11:38 
AnswerRe: Compile problem Pin
Stumpy8424-May-13 10:59
MemberStumpy8424-May-13 10:59 
GeneralRe: Compile problem Pin
Member 1041098619-Nov-13 20:55
MemberMember 1041098619-Nov-13 20:55 
QuestionCan I have the same in Pin
Dave Franco26-Jun-11 0:19
MemberDave Franco26-Jun-11 0:19 
AnswerRe: Can I have the same in Pin
thatraja26-Jan-12 20:52
professionalthatraja26-Jan-12 20:52 
GeneralProblem with write access in windows 7 at runtime and solution Pin
Sylvain Cyr10-Jun-11 5:27
MemberSylvain Cyr10-Jun-11 5:27 
GeneralRe: Problem with write access in windows 7 at runtime and solution Pin
jimpar7-Mar-12 4:56
Memberjimpar7-Mar-12 4:56 
GeneralGrate!! Pin
Sbaia30-Mar-11 3:19
MemberSbaia30-Mar-11 3:19 
GeneralRe: Grate!! Pin
Member 1041098619-Nov-13 20:58
MemberMember 1041098619-Nov-13 20:58 
GeneralMy vote of 4 Pin
minakshijuware21-Jul-10 20:34
Memberminakshijuware21-Jul-10 20:34 
GeneralRe: My vote of 4 Pin
Member 1041098619-Nov-13 20:57
MemberMember 1041098619-Nov-13 20:57 
GeneralMy vote of 1 Pin
dl4gbe3-May-10 21:41
Memberdl4gbe3-May-10 21:41 

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.