ZoomPictureBox: picture control with mouse-centred zooming

[boops boops]

New version February 2019. See post #75 for details and zip files, and post #79 for a testing procedure.. The new version works much better with large images and includes a DragMargin property to prevent the image from being dragged out of view.

Introduction

This control offers easy zooming and dragging of any image. Out of the box, you can zoom the image with the mouse wheel and drag it with the left mouse button. But you can implement other ways of zooming and dragging in your code.

To whet your appetite, here's an illustration from the test project in the zip file:


The ZoomPictureBox has three different zoom modes. You can zoom to the centre of the control, to the centre of the image or to the mouse position. The last is my own favourite, so I have made it default.

You can set Image and the ZoomMode in the Designer or in your code. There are some other useful variables you can presently set only in your code. These include the minimum and maximum zoom sizes, and the MouseWheelDivisor which affects zooming speed with the mouse.

If you want to use some other way of controlling zoom, say a + and - button, set the control's EnableMouseWheelZooming to False, and change the ZoomFactor property in your code. The same applies to dragging; if required set EnableMouseDragging to false and implement some other way of dragging, for example with the arrow keys. In your code, you can move the image by setting the ImagePosition property.


Technical notes

1. I started off by inheriting from a PictureBox which explains the name. But I changed that later to a UserControl to save exposing unnecessary properties such as SizeMode and ImageSource.

2. The control works by changing the size and position of a rectangle (_ImageBounds). The image is rendered into the rectangle in the OnPaint sub.

3. Quite a few of the public fields could be usefully turned into properties which could be set in the designer. I will do that later that if there is enough interest.

4. The attached zip file is a complete solution (without the obj and bin folders and the dll file). It includes a demo Forms project. You should be able to unzip all the files and run the demo (I hope).

5. You can copy the ZoomPictureBox.vb file (in the ZoomPictureBox_Source folder) to use the control in your own projects.

6. Alternatively, you could give the ZoomPictureBox a permanent place in your ToolBox complete with its own icon . To do that:
a. check that the bitmap ZoomPictureBox.bmp has its Properties/Build Action set to Embedded Resource.
b. build the project
c. right click in the ToolBox and select Insert Items....
d. browse to the ZoomPictureBox_Build folder and select ZoomPictureBox.dll.