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.