The ImageBox control is already a versatile little control and
I use it for all sorts of tasks. One of the features I recently
wanted was to allow users to be able to select a source region,
then adjust this as needed. The control already allows you to
draw a selection region, but if you need to adjust that ...
well, you can't. You can only draw a new region.
This article describes how to extend the ImageBox to include
the ability to resize the selection region. A older
demonstration which shows how to drag the selection around has
also been incorporated, in a more tidy fashion than the demo.
Note: The code presented in this article has not been added to
the core ImageBox control. Mostly this is because I don't
want to clutter the control with bloat (something users of the
old PropertiesList control might wish I'd done!) and partly
because I don't want to add changes to the control that I'll
regret down the line - I don't need another mess like the
Color Picker Controls where every update seems to be a
breaking change! It most likely will be added to the core
control after it's been dog-fooded for a while with different
As I mentioned above, this isn't part of the core control (yet)
and so has been added to a new ImageBoxEx control. Not the
most imaginative of names, but with it's current status of
internal demonstration code, it matters not.
In addition to this new sub-classed control, we also need some
helper classes. First amongst these is a new enum to describe
the drag handle anchors, so we know which edges to resize.
Next we have the class that describes an individual drag handle
- nothing special here, although I have added Enabled and
Visible properties to allow for more advanced scenarios, such
as locking an edge, or only showing some handles.
The final support class is a collection for our drag handle
objects - we could just use a List<> or some other generic
collection but as a rule it's best not to expose these in a
public API (and this code will be just that eventually) so we'll
create a dedicated read-only collection.
Again, there's not much special about this class. As it is a
custom class it does give us more flexibility, such as
initializing the required drag handles, and providing a
convenient HitTest method so we can check if a given point is
within the bounds of a DragHandle.
Positioning drag handles around the selection region
The ImageBox control includes a nice bunch of helper methods,
such as PointToImage, GetOffsetRectangle and more, which are
very useful for adding scalable elements to an ImageBox
instance. Unfortunately, they are all virtually useless for the
drag handle code due to the fact that the handles themselves
must not scale - the positions of course must update and
resizing must be accurate whether at 100% zoom or not, but the
size must not. This means we can't rely on the built in methods
and must manually recalculate the handles whenever the control
The code is fairly straightforward, but we need to call it from
a few places, so we have a bunch of overrides similar to the
We call PositionDragHandles from the constructor, and the
Scroll, SelectionRegionChanged, ZoomChanged and Resize
Painting the drag handles
Painting the handles is simple enough - after normal painting
has occurred, we draw our handles on top.
Updating the cursor
As the mouse travels across the control, we need to adjust the
cursor accordingly - either to change it to one of the four
resize cursors if the mouse is over an enabled handle, or to the
drag cursor if it's within the bounds of the selection region.
Of course, we also need to reset it if none of these conditions
Initializing a move or a drag
When the user first presses the left mouse button, check to see
if the cursor is within the bounds of the selection region, or
any visible drag handle. If so, we record the location of the
cursor, and it's offset to the upper left corner of the
The original cursor location will be used as the origin, so once
the mouse starts moving, we use this to determine if a move
should occur, or a resize, or nothing.
The offset is used purely for moving, so that we reposition the
selection relative to the cursor position - otherwise it would
snap to the cursor which would look pretty awful.
Even if the user immediately moves the mouse, we don't want to
trigger a move or a resize - the mouse may have just twitched.
Instead, we wait until it moves beyond an area centred around
the drag origin - once it has, then we trigger the action.
This drag rectangle is determined via the
SystemInformation.DragSize (MSDN) property.
During a mouse move, as well as triggering a move or resize, we
also need to process any in-progress action, as well as update
the cursor as described in the previous section.
Although I'm not going to include the code here as this article
is already very code heavy, the StartMove and StartResize
methods simply set some internal flags describing the control
state, and store a copy of the SelectionRegion property - I'll
explain why towards the end of the article. They also raise
events, both to allow the actions to be cancelled, or to allow
the application to update the user interface in some fashion.
Performing the move
Performing the move is simple - we calculate the new position of
the selection region according to the cursor position, and
including the offset from the original drag for a smooth move.
We also check to ensure that the full bounds of the selection
region fit within the controls client area, preventing the user
from dragging out outside the bounds of the underlying
Performing the resize
The resize code is also reasonably straight forward. We decide
which edges of the selection region we're going to adjust based
on the drag handle. Next, we get the position of the cursor
within the underlying view - snapped to fit within the bounds,
so that you can't size the region outside the view.
The we just update the edges based on this calculation. However,
we also ensure that the selection region is above a minimum
size. Apart from the fact that if the drag handles overlap it's
going to be impossible to size properly, you probably want to
force some minimum size constraints.
Finalizing the move/resize operations
So far, we've used the MouseDown and MouseMove events to
control the initializing and processing of the actions. Now,
we've use the MouseUp event to finish things off - to reset
flags that describe the control state, and to raise events.
Cancelling a move or resize operation
Assuming the user has started moving the region or resizes it,
and then changes their mind. How to cancel? The easiest way is
to press the Escape key - and so that's what we'll implement.
We can do this by overriding ProcessDialogKey, checking for
Escape and then resetting the control state, and restoring the
SelectionRegion property using the copy we started at the
start of the operation.
That covers most of the important code for making these
techniques work, although it's incomplete, so please download
the latest version for the full source. And I hope you find this
addition to the ImageBox component useful!
2014-02-13 - First published
2020-11-21 - Updated formatting
Like what you're reading? Perhaps you like to buy us a coffee?
The founder of Cyotek, Richard enjoys creating new blog content for the site. Much more though, he likes to develop programs, and can often found writing reams of code. A long term gamer, he has aspirations in one day creating an epic video game - but until that time comes, he is mostly content with adding new bugs to WebCopy and the other Cyotek products.
The `ImageBox` control is already a versatile little control and I use it for all sorts of tasks. One of the features I recently wanted was to allow users to be able to select a source region, then adjust this as needed. The control already allows you to draw a selection region, but if you need to adjust that ... well, you can't. You can only draw a new region.
This article describes how to extend the `ImageBox` to include the ability to resize the selection region. A older demonstration which shows how to drag the selection around has also been incorporated, in a more tidy fashion than the demo.
Fourth and final in a multi part series on creating an image viewer that can be scrolled and zoomed in C#. After part three added panning, we now add zoom support via the mouse wheel and clicking with the left or right buttons, along with some additional display properties.