After part 2 added scrolling support, we are now going to extend this to support keyboard scrolling and panning with the mouse.
In order to enable panning, we're going to add three new
AutoPan property will control if the user can
click and drag the image with the mouse in order to scroll.
Also, we'll add an
InvertMouse property to control how the
scrolling works. Finally the
IsPanning property; however it
can only be read publicly, not set.
As well as the backing events for the above properties, we'll
also add extra events -
PanEnd The normal
Scroll event will be utilized while panning is in progress
rather than a custom event.
To pan with the mouse, the user needs to "grab" the control by
clicking and holding down the left mouse button. As they move
the mouse, the control should automatically scroll in the
opposite direction the mouse is moving (or if
set, in the same direction). Once the button is released,
scrolling should stop.
We'll implement this by overriding
OnMouseUp, shown below.
UpdateScrollPosition is a common method to set the viewport
and refresh the control. The
IsPanning property is used to
notify the control internally that a pan operation has been
started. It will also set a semi-appropriate cursor (we'll look
at custom cursors another time), and raise either the
The first two versions of this component effectively disabled
keyboard support via the
TabStop property. However, we now want to allow
keyboard support. So the first thing we do is remove the call to
disable the selectable style and resetting of the tab stop
property from the constructor. We also remove the custom
TabStop property we had implemented for attribute overriding.
With this done, we can now add some keyboard support. As the
ScrollableControl doesn't natively support this, we'll do it
ourselves by overriding
OnKeyDown. One of the initial
drawbacks is that it won't always capture special keys, such as
the arrow keys.
In order for it to do so we need to let the control know that
such keys are required by overriding
IsInputKey - if this
true, then the specified key is required and will be
When the left, right, up or down arrow keys are pressed, the control checks to see if a modifier such as shift or control is active. If not, then the control is scrolled either horizontally or vertically using the "small change" value of the appropriate scrollbar. If a modifier was set, then the scroll is made using the "large change" value.
AdjustScroll method is used to "nudge" the scrollbars in
the given direction, using values read from the
VerticalScroll - reading the
AutoScrollPosition property didn't return appropriate results
in our testing.
You can download the third sample project from the links below. The final article in the series will add autofit, centering and of course, zoom support.
- 2010-08-23 - 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 18.104.22.168 update
- ImageBox and TabList update's - virtual mode, pixel grid, bug fixes and more!
- ImageBox update, version 22.214.171.124
- 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