Rubber band selection rectangle in C#
Rubber band selection rectangle -- This is how it looks like finally
You might have selected a couple of icons from your desktop by dragging the left mouse button and my drawing a rectangle over the icons. Such rectangles are called Rubber band selection rectangles. A rubber band selection is a selection rectangle that will track down the mouse pointer when the left mouse button is held.
In this artilce, we will try to draw those kina rectangles in C#. The article covers only the drawing part.
Lets get started.
Here are the terms used in the explanation,
I will be helping you draw the rectangle using four connected lines.
- Origin point (O) to denote the place from which the user has started to draw the rectangle
- Intermediate point (I) to refer to the incremental points over which the user has moved his mouse pointer
- Nearer – close to the mouse pointer
- Farther – distant from the mouse pointer
- Ox, Oy referes to the Origin’s X and Origin’s Y
The drawing of the rectangle can be divided in to 4 main steps.
Using GDI in C# to draw the selection rectangle
1. Subscribed for the following events.
- Mouse Down — to know that the user has started to draw the rubber band selection rectangle
- Mouse Move — to track where the user’s mouse is at that instant
- Mouse Up — to know when the user has released the mouse button
this.MouseUp += new System.Windows.Forms.MouseEventHandler(this.OnMouseUp);
this.MouseMove += new System.Windows.Forms.MouseEventHandler(this.OnMouseMove);
this.MouseDown += new System.Windows.Forms.MouseEventHandler(this.OnMouseDown);
2. Have two Point objects to refer to Origin and Intermediate
points. Let them be class level variables. Out of the two members, the myOriginPoint object will be initialised only during the MouseDown as it represents the start point of the rectangle, while the myIntermediatePoint will be updated only during the MouseMove as it represents the intermediate points through which the mouse has moved.
private Point myOriginPoint = new Point(); //Represents the Ox, Oy
private Point myIntermediatePoint = new Point(); //Represents the Ix, Iy
private Pen mySelectionRectangle = new Pen(Brushes.Blue); //Pen that will be used to draw the rectangle3. Define MouseDown handler.
private void OnMouseDown(object sender, MouseEventArgs e)
{
myOriginPoint.X = e.X; //Represents the current mouse's X location
myOriginPoint.Y = e.Y; //Represents the current mouse's Y location
}
4. Define MouseMove handler.
private void OnMouseMove(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) //Draw the rectangle only when the left mouse button is pressed { myIntermediatePoint.X = e.X; //Change the value of Ix dynamically on mouse move myIntermediatePoint.Y = e.Y; //Change the value of Iy dynamically on mouse move Graphics aGraphics = this.CreateGraphics(); //To draw over the form aGraphics.Clear(this.BackColor); //Clear the previously drawn rectangles //drawing the horizontal line -- nearer edge aGraphics.DrawLine(mySelectionPen, myOriginPoint.X, myOriginPoint.Y, myIntermediatePoint.X, myOriginPoint.Y); //drawing the vertical line -- farther edge aGraphics.DrawLine(mySelectionPen, myIntermediatePoint.X, myIntermediatePoint.Y, myIntermediatePoint.X, myOriginPoint.Y); //drawing the horizontal line -- farther edge aGraphics.DrawLine(mySelectionPen, myIntermediatePoint.X, myIntermediatePoint.Y, myOriginPoint.X, myIntermediatePoint.Y); //drawing the vertical line -- nearer edge aGraphics.DrawLine(mySelectionPen, myOriginPoint.X, myOriginPoint.Y, myOriginPoint.X, myIntermediatePoint.Y); } }
5. Thats it. You rubber band selection rectangle is over. Try it out. There are many other ways in drawing this. If you have a really quick method of drawing the rectangle, put it over here
Hints: You can change the style of the rubber band selection lines.
Try playing with the mySelectionPen.DashStyle property.
