Let the user select rectangular areas in an image in C#


This program lets the user click and drag to select rectangular areas in an image.

The program starts by defining a couple of variables that it uses while selecting the area.

// The original image.
private Bitmap OriginalImage;

// True when we're selecting a rectangle.
private bool IsSelecting = false;

// The area we are selecting.
private int X0, Y0, X1, Y1;

The OriginalImage variable holds a copy of the original image so we don’t mess it up. The value IsSelecting is true while the user is selecting an area. Finally, X0, Y0, X1, and Y1 are the corners of the selected rectangle.

To let the user select an area, this example uses a PictureBox‘s MouseDown, MouseMove, and MouseUp events. When the user presses the mouse down, the following MouseDown event handler starts the process.

// Start selecting the rectangle.
private void picOriginal_MouseDown(object sender, MouseEventArgs e)
    IsSelecting = true;

    // Save the start point.
    X0 = e.X;
    Y0 = e.Y;

This code sets IsSelecting to true and saves the current mouse position in variables X0 and Y0.

When the user moves the mouse, the following MouseMove event handler executes.

// Continue selecting.
private void picOriginal_MouseMove(object sender, MouseEventArgs e)
    // Do nothing it we're not selecting an area.
    if (!IsSelecting) return;

    // Save the new point.
    X1 = e.X;
    Y1 = e.Y;

    // Make a Bitmap to display the selection rectangle.
    Bitmap bm = new Bitmap(OriginalImage);

    // Draw the rectangle.
    using (Graphics gr = Graphics.FromImage(bm))
            Math.Min(X0, X1), Math.Min(Y0, Y1),
            Math.Abs(X0 - X1), Math.Abs(Y0 - Y1));

    // Display the temporary bitmap.
    picOriginal.Image = bm;

This code saves the mouse’s current location in variables X1 and Y1. It then copies the original Bitmap and draws a rectangle with corners (X0, Y0) and (X1, Y1) on the copy. The event handler finishes by displaying the result in the PictureBox.

The following MouseUp event handler finishes the process.

// Finish selecting the area.
private void picOriginal_MouseUp(object sender, MouseEventArgs e)
    // Do nothing it we're not selecting an area.
    if (!IsSelecting) return;
    IsSelecting = false;

    // Display the original image.
    picOriginal.Image = OriginalImage;

    // Copy the selected part of the image.
    int wid = Math.Abs(X0 - X1);
    int hgt = Math.Abs(Y0 - Y1);
    if ((wid < 1) || (hgt < 1)) return;

    Bitmap area = new Bitmap(wid, hgt);
    using (Graphics gr = Graphics.FromImage(area))
        Rectangle source_rectangle = 
            new Rectangle(Math.Min(X0, X1), Math.Min(Y0, Y1),
                wid, hgt);
        Rectangle dest_rectangle = 
            new Rectangle(0, 0, wid, hgt);
        gr.DrawImage(OriginalImage, dest_rectangle, 
            source_rectangle, GraphicsUnit.Pixel);

    // Display the result.
    picResult.Image = area;

This code sets IsSelecting to false so future MouseMoves don't do anything. It then makes the selection PictureBox display the original image.

The event handler then makes a new Bitmap big enough to hold the selected area and copies that area from the original image. Finally the code displays the copied part of the image in the picResult PictureBox. (Your program could do something different, such as copying the new Bitmap to the clipboard or saving it into a file.)

Download Example   Follow me on Twitter   RSS feed

This entry was posted in graphics and tagged , , , , , , , , , . Bookmark the permalink.

9 Responses to Let the user select rectangular areas in an image in C#

  1. Rod Stephens says:

    Sorry but I don’t understand. Perhaps this didn’t translate very well.

    Do you mean to clear the output area while selecting an image? That’s certainly possible.

  2. Sam says:

    Thanks for helping me…

  3. Pingback: How to draw a selection box with mouse in a picture box? [on hold] – program faq

  4. Jack says:

    I cannot get this to run correctly. It is exactly what I need but when I try and run this it tells me that “OriginalImage” is undefined.
    Please advise

    • RodStephens says:

      Hi Jack. OriginalImage is a variable defined in the program’s code. You can see it just below the picture at the top of the post.

      Download the example to see all of the details including things that may not have fit in the post’s text.

  5. Tom says:


    I was able to do your tutorial and it partially works. My problem is that the bitmap after MouseMove and MouseUp is squeezed tight to the left side. I had to change a few lines where “picOriginal.Image = bm”, now is “picOriginal.Source = BitmapToImageSource (bm);”.

    I use System.Windows.Controls and I’m working in WPF.
    Do you know how to solve this problem?

Comments are closed.