Draw a bounding rectangle during selection

Draw a bounding rectangle during selection

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

    Requires Free Membership to View

    Login

    When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.

    Hannah Smalltree, Editorial Director

    By submitting your registration information to SearchWinDevelopment.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchWinDevelopment.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

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.

Clean up
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

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top