Scrollable Picture Box


 

Figure 1 - The Scrollable Picture Box

When Microsoft created the PictureBox, they created it with the possibility of four  modes:

 

 

 



Size Mode Description Scaled Clipped
PictureBoxSizeMode.Normal Image placed in Upper Left Hand Corner No Yes
PictureBoxSizeMode.CenterImage Image is centered in the Client No Yes
PictureBoxSizeMode.StretchImage Fits and scales the image to fit to the bounds of the picture box Yes No
PictureBoxSizeMode.AutoSize Control sizes to fit to the Image No No

Table 1 - SizeModes of Regular PictureBox

The only possibility they may have left out was the ability to put a large image in the picture box and scroll to different areas of the image.  This project contains a UserControl that allows you to place an Image inside and scroll around the Image.  It automatically sizes the scrollbars to the size of the control and figures out the scrolling increments along each scrollbar so you can scroll through the entire image.  There is not much to using the scrollable picture box.  Once you compile it, it should appear in the ToolBox.  You can then set the Image property of the Scrollable PictureBox by clicking on the ellipse and searching for the image file or image you want to place in it:

Fig 2 - Scrollable Picture Box Properties

Below is the code that draws the Image based on the scroll positions in the Scrollable PictureBox UserControl.  The code uses the DrawImageUnscaled function to draw the Image so that it is offset in the client rectangle of the control.  The control automatically clips the Image because the Paint Method will not paint outside the boundaries of the control itself. 

private void UserPictureBox_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
Graphics g = e.Graphics;
g.FillRectangle(Brushes.White,this.ClientRectangle);
if (TheImage != null)
{
// Draw the Image Offset by the scroll positions inside the Client Rectangle
g.DrawImageUnscaled(TheImage, -OffsetX, -OffsetY, TheImage.Width, TheImage.Height);
// Draw a little gray rectangle in the portion of the control where the two scrollbars touch
g.FillRectangle(Brushes.Gray, ClientRectangle.Width - vScrollBar1.Width, ClientRectangle.Height - hScrollBar1.Height, vScrollBar1.Width, hScrollBar1.Height);
}
}

Anyway, this should get you going if you need to put an image on your form that you can scroll through.

Up Next
    Ebook Download
    View all
    Learn
    View all