C# Drawing Rectangle On the mouse event

Question

I want to draw a rectangle. Thing what I want is that show the user to rectangle on the mouse event.

Like in the image. This is for C# .net Forms application.

Help me to achieve this. Any help is appreciated.

Thank You Yohan

Solution 1

You can do that in three steps:

• First check if mouse is pressed down
• If it is then on mouse move event keep initializing the rectangle with new positions while mouse is being dragged
• Then on paint event draw the rectangle. (It will be raised for almost every mouse event, depends mouse refresh rate and dpi)

You can do somthing like this (in your Form):

public class Form1
{

       Rectangle mRect;

    public Form1()
    {
                    InitializeComponents();

                    //Improves prformance and reduces flickering
        this.DoubleBuffered = true;
    }

            //Initiate rectangle with mouse down event
    protected override void OnMouseDown(MouseEventArgs e)
    {
        mRect = new Rectangle(e.X, e.Y, 0, 0);
        this.Invalidate();
    }

            //check if mouse is down and being draged, then draw rectangle
    protected override void OnMouseMove(MouseEventArgs e)
    {
        if( e.Button == MouseButtons.Left)
        {
            mRect = new Rectangle(mRect.Left, mRect.Top, e.X - mRect.Left, e.Y - mRect.Top);
            this.Invalidate();
        }
    }

            //draw the rectangle on paint event
    protected override void OnPaint(PaintEventArgs e)
    {
                //Draw a rectangle with 2pixel wide line
        using(Pen pen = new Pen(Color.Red, 2))
        {
        e.Graphics.DrawRectangle(pen, mRect);
        }

    }
}

later if you want to check if Buttons (shown in diagram) are in rectangle or not , you can do that by checking the Button's region and check if they lie in your drawn rectangle.

Solution 2

The solution by Shekhar_Pro draws a rectangle just in one direction (top to bottom, left to right) if you want to draw a rectangle regardless of the mouse position and the direction of the movement the solution is:

Point selPoint;
Rectangle mRect;
void OnMouseDown(object sender, MouseEventArgs e)
{
     selPoint = e.Location; 
    // add it to AutoScrollPosition if your control is scrollable
}
void OnMouseMove(object sender, MouseEventArgs e)
{
     if (e.Button == MouseButtons.Left)
     {
        Point p = e.Location;
        int x = Math.Min(selPoint.X, p.X)
        int y = Math.Min(selPoint.Y, p.Y)
        int w = Math.Abs(p.X - selPoint.X);
        int h = Math.Abs(p.Y - selPoint.Y);
        mRect = new Rectangle(x, y, w, h);   
        this.Invalidate(); 
     }
}
void OnPaint(object sender, PaintEventArgs e)
{
     e.Graphics.DrawRectangle(Pens.Blue, mRect);
}

Solution 3

Those blue rectangles look a lot like controls. Drawing a line on top of a control is hard to do in Winforms. You have to create a transparent window that overlays the design surface and draw the rectangle on that window. This is also the way the Winforms designer works. Sample code is here.

Comments

[Shekhar_Pro]

+1 nice trick.. if you remember my own answer was from one of your answers on MSDN though it won't work in this situation.

[yohan.jayarathna]

hi this works perfectly, Itried same thing on pictureBox control events but it didn't work. Did I do something wrong?

[Shekhar_Pro]

it was working but probably it was drawn under the picturebox (on the form)..show me the code you tried.. also check @hans Passant 's answer.. his trick will work every where.

[yohan.jayarathna]

OK now its working, in my case this.Invalidate(); should be pictureBox1.Invalidate(); Thank You very much :)