Creating a Canvas for Drawing Rectangles in Windows Forms

Setting up the environment:

  1. Open Visual Studio and create a new Windows Application;
  2. Open the Form1;
  3. Drag and drop 5 panels onto the form. Be careful not to drop it onto the panels you are dropping;
  4. Select any panel and name it "canvas".

Now copy and paste the code bellow:

public partial class Form1 : Form
{
    Rectangle rectangle = new Rectangle();
    int startPointX, startPointY; //start points
    bool drawRectangle; //flag

    public Form1()
    {
        InitializeComponent();

        panel1.Dock = DockStyle.Left;
        panel2.Dock = DockStyle.Right;
        panel3.Dock = DockStyle.Bottom;
        panel4.Dock = DockStyle.Top;
        canvas.Dock = DockStyle.Fill;

        panel1.BackColor = Color.Gray;
        panel2.BackColor = Color.Gray;
        panel3.BackColor = Color.Gray;
        panel4.BackColor = Color.Gray;
        canvas.BackColor = Color.White;

        panel1.Width = 22;
        panel2.Width = 22;
        panel3.Height = 22;
        panel4.Height = 22;

        canvas.Paint += new PaintEventHandler(canvas_Paint);
        canvas.MouseDown += new MouseEventHandler(canvas_MouseDown);
        canvas.MouseMove += new MouseEventHandler(canvas_MouseMove);
        canvas.MouseUp += new MouseEventHandler(canvas_MouseUp);

        canvas.BringToFront();
    }

    private void canvas_Paint(object sender, PaintEventArgs e)
    {
        if (drawRectangle) //drawing rectangle only when flag is on
            e.Graphics.DrawRectangle(new Pen(Color.Black), rectangle);
    }

    private void canvas_MouseDown(object sender, MouseEventArgs e)
    {
        //setting the start points
        startPointX = e.X;
        startPointY = e.Y;
        rectangle.X = e.X;
        rectangle.Y = e.Y;

        this.Cursor = Cursors.Cross;

        drawRectangle = true; //set flag on
    }

    private void canvas_MouseMove(object sender, MouseEventArgs e)
    {
        this.Text = "(" + e.X + ", " + e.Y + ")";

        if (drawRectangle) //calculating points only when flag is on
        {
            int x = (e.X < 0) ? 0 : e.X;
            int y = (e.Y < 0) ? 0 : e.Y;

            //switch places
            rectangle.X = (x < startPointX) ? x : startPointX;
            rectangle.Y = (y < startPointY) ? y : startPointY;

            rectangle.Width = Math.Abs(x – startPointX);
            rectangle.Height = Math.Abs(y – startPointY);

            canvas.Refresh(); //re-paint
        }
    }

    private void canvas_MouseUp(object sender, MouseEventArgs e)
    {
        //reset points
        rectangle.X = 0;
        rectangle.Y = 0;
        rectangle.Width = 0;
        rectangle.Height = 0;

        //uncommenting this next line out will clear the canvas
        //canvas.Refresh();

        this.Cursor = Cursors.Default;

        drawRectangle = false; //set flag off
    }
}

drawing-rectangle-windows-forms

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s