How many times have you seen a UI like this in a drawing program?
That selection rectangle is sometimes called a bounding rectangle. Its purpose is to provide feedback to the designer during the selection process. It's a convenient way to show what is currently selected before applying the next operation. You may have seen it rendered differently, another common look is to have transparent fill and a dotted outline.
In the example above, I selected the kids eyes with the selection rectangle and then used the crop tool to trim the source down to a smaller image.
Creating similar UI in WPF
If you want to draw a selection tool like our example you have to build your own. Fortunately it's not that hard to create the bounding rectangle.
I'll start by creating a basic layout for our application.
Flipping the rectangle
To draw the rectangle we need a starting point and width and height value. The starting point is easy to get, I can capture it in the MouseLeftButtonDown event.
The next part is little a trickier. Once the user clicks and starts dragging the mouse they can drag in four general directions from the starting point; NE, SE, SW and NW. I need to know the upper left hand corner of the rectangle in order to draw it accurately.
If the user is drawing in the NW direction then the current mouse position is the upper left position for the rectangle. If the user drags in the SE direction, then the anchor point is the upper-left.
Here's the logic that determines the correct positions and sizes for the rectangle. It also makes the rectangle visible.
Finally, I have a few lines of code to cleanup when the mouse button is released or the mouse leaves the back canvas.
This is the final results.
This was first published in September 2010