Question Zoom Image in the PictureBox where user make selection


New member
May 25, 2018
Programming Experience

I have a c# windows form application. There is a PictureBox within a Panel. An image is loaded in the PictureBox. I want the image to be zoomed the area user selects. The user will select by dragging using the left mouse button. What i did is on the mouse down event, i saved the x/y in a variable and in mouse move event i am drawing the rectangle plus i am recording the x/y of the current position in another variable. And in mouse up event, i create a rectangle of the size of the selection made. And i create a bitmap using the rectangle's width and height. Then I created a graphics object using the created bitmap. Then i use the DrawImage function to draw the image to the bitmap created and assigned to the PictureBox. But it always takes the x/y coordinates from 0,0.

Please help

Here's what I would suggest. Add a PictureBox to a Panel and make them the same size. Set the SizeMode of the PictureBox to Zoom. When you want to zoom into the image, you can simply increase the Size of the PictureBox and set its Location such that the section you want visible is within the Panel. For example, let's say that original Image is 100 x 100, so you make the PictureBox and the Panel 100 x 100. You handle the MouseDown and MouseUp events of the PictureBox to get the selection and it ends up being (10,10) to (30,30). You would then increase the dimensions of the PictureBox 5 times and then set the Location to (50,50) which is the top-left corner of the select, multiplied by 5 and negated.
Thanks, jmcilhinney for your quick response. This is my code in the Mouse Up event of the PictureBox.
private void pictureBox1_MouseUp(Object sender, MouseEventArgs e)
    IsLBD = False;

    //Getting the image from the selected area

    Rectangle rectangle = pew Rectangle(
            Math.Min(RectStartPoint.X, RectEndPoint.X),
            Math.Min(RectStartPoint.Y, RectEndPoint.Y),
            Math.Abs(RectStartPoint.X - RectEndPoint.X),
            Math.Abs(RectStartPoint.Y - RectEndPoint.Y));

    SelectedImage = new Bitmap(rectangle.Width, rectangle.Height);

    using (Graphics gr = Graphics.FromImage(SelectedImage))
        gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

        gr.DrawImage(ImageModified, New Rectangle(0, 0,
            SelectedImage.Width, SelectedImage.Height),
            rectangle, GraphicsUnit.Pixel);
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
        pictureBox1.Image = SelectedImage;
    RectStartPoint = Point.Empty;
    RectEndPoint = Point.Empty;
    ImageModified = SelectedImage;

My problem is, on the selection am getting the correct x/y coordinates, but when create aa new BitMap based on the selection, it is always taking 0,0 as the X/Y coordinates. So whatever selection made, it always takes from the top left corner of the image. Any ideas. Thanks Vinu
I suggest that you debug the code, i.e. set a breakpoint and step through the code. Nothing jumps out at me as an obvious cause, which is exactly why you need to debug. If you don't know how, start learning here.

By the way, as you can see, I have reformatted your post to make it far more readable. Please be sure to paste code as plain text and then wrap it in appropriate code formatting tags.
Sorry for the html format. I did debug and i can see the x1,x2 has proper x/y coordinates. But graphics object, i can see VisibleClipBounds X = 0 & Y = 0.

Please see the debug.


  • Debug.png
    55.2 KB · Views: 205
I'm not sure why that would be an issue. The Graphics object is associated with the Bitmap you're drawing onto, not the one you're drawing. Of course that VisibleClipBounds should be the same as the Bounds of the Bitmap it's associated with.
Top Bottom