Scrollable and RatioStretch PictureBox

• Download source - 9.23 KB

Introduction

The Visual Studio.NET PictureBox control supports four behaviors of SizeMode property: Normal, StretchImage, AutoSize and CenterImage.

When I needed to use the PictureBox control it lacked two behaviors :

1. Scrollable - The ability to use the scroll bars in order to view different areas of large image.
2. RatioStretch - The ability to view stretched image in the same ratio (width / height) of the original image and avoids distortion of the stretched image.

The Viewer control which is available with this article supports the above two behaviors.

Note : This control supports scrolling using the mouse wheel.

Using the code

In order to use the Scrollable and RatioStretch capabilities of the Viewer control, simply add the Viewer control to your project and use it as follows :

    // open an image
    this.viewer1.Image = Image.FromFile(ImageFilepath);
    // set mode as Scrollable
    this.viewer1.ImageSizeMode = SizeMode.Scrollable;

In the sample above, we first load the image from the file specified by ImageFilepath, to the Viewer control. We then set its ImageSizeMode property to Scrollable, so that when the size of the image is greater than the visible area of the Viewer control, scrollbar(s) are added. Now, if we want the image to be displayed to fit within the Viewer control, without affecting the aspect ratio, we set the ImageSizeMode property of the Viewer control to RatioStretch as shown below:

    // set mode as RatioStretch
    this.viewer1.ImageSizeMode = SizeMode.RatioStretch;

That's all.