In the second part of our Creating a scrollable and zoomable image viewer in C# series we will update our component to support automatic scrolling when auto size is disabled and the image is larger than the client area of the control.
Originally we inherited from
Control, however this does not
support automatic scrolling. Rather than reinventing the wheel
at this point, we'll change the control to inherit from
ScrollableControl instead. This will expose a number of new
members, the ones we need are:
AutoScroll- Enables or disables automatic scrolling
AutoScrollMinSize- Specifies the minimum size before scrollbars appear
AutoScrollPosition- Specifies the current scroll position
OnScroll- Raised when the scroll position is changed
Using the above we can now offer full scrolling.
As the control will take care of the scrolling behaviour, we
don't want the
AutoScrollMinSize property to be available, so
we'll declare a new version of it and hide it with attributes.
Initially the component only offered auto sizing and so we had
AdjustSize method which was called in response to
various events and property changes. As we now need to set up
the scrolling area if
AutoScroll is enabled, this method is no
longer as suitable. Instead, we add a pair of new methods,
AdjustScrolling. Existing calls to
AdjustSize are changed to call
AdjustLayout instead, and
this method now calls either
depending on the state of the
AdjustScrolling method is used to set the
AutoScrollMainSize property. When this is correctly set, the
ScrollableControl will automatically take care of displaying
By overriding the
OnScroll event we get notifications whenever
the user scrolls the control, and can therefore redraw the
The initial version of our
ImageBox tiled a bitmap across the
client area of the control. In this new version, when we create
the background tile, we now create a new
drawing we can call
FillRectangle and pass in the new brush
and it will be tiled for us.
Another shortcoming of the first version was the borders. These were painted last, so that if the image was larger than the controls client area, the image wouldn't be painted on top of the borders. Now, the borders are drawn first and a clip region applied to prevent any overlap.
Finally of course, the position of the drawn image needs to reflect any scrollbar offset.
You can download the second sample project from the link below. The next article in the series will look at panning the image using the mouse within the client area of the image control.
- 2010-08-13 - First published
- 2020-11-21 - Updated formatting
Like what you're reading? Perhaps you like to buy us a coffee?
- Displaying multi-page tiff files using the ImageBox control and C#
- Adding drag handles to an ImageBox to allow resizing of selection regions
- ImageBox 184.108.40.206 update
- ImageBox and TabList update's - virtual mode, pixel grid, bug fixes and more!
- ImageBox update, version 220.127.116.11
- Zooming to fit a region in a ScrollableControl
- Zooming into a fixed point on a ScrollableControl
- Creating an image viewer in C# Part 5: Selecting part of an image
- Extending the ImageBox component to display the contents of a PDF file using C#
- Creating a scrollable and zoomable image viewer in C# Part 4
- Creating a scrollable and zoomable image viewer in C# Part 3
- Creating a scrollable and zoomable image viewer in C# Part 2
- Creating a scrollable and zoomable image viewer in C# Part 1