Search code examples
c#winformsresize

resizing pictureBox proportionally to Form resizing


I want everytime , the user resizes the Form , the Image in the pictureBox , also resizes with the same Values ( proportionally ) ,

I searched on the internet for some codes and found this answer in StackOverFlow https://stackoverflow.com/a/6501997/3264464

static public Bitmap ScaleImage(Image image, int maxWidth, int maxHeight)
{
    var ratioX = (double)maxWidth / image.Width;
    var ratioY = (double)maxHeight / image.Height;
    var ratio = Math.Min(ratioX, ratioY);
    var newWidth = (int)(image.Width * ratio);
    var newHeight = (int)(image.Height * ratio);
    var newImage = new Bitmap(newWidth, newHeight);
    Graphics.FromImage(newImage).DrawImage(image, 0, 0, newWidth, newHeight);
    Bitmap bmp = new Bitmap(newImage);
    return bmp;
}

I added the function for my code , and am not sure about the MaxHeight,MaxWidth thing , i mean why do i need to send it via parameters

and In the Form1_Resize event handler i wrote:

private void Form1_Resize(object sender, EventArgs e)
{
    Bitmap NewImg = ScaleImage(pictureBox1.Image, 1000, 1000);
    pictureBox1.Image = NewImg;
}

but It won't work .. Nothing Happens when I resize the form

UPDATE: Tried everything with same results

Look at the pictures below , The black point is the Left of the PictureBox and it must not move , what you suggested is good , but i want , The left of the pictures stays on the same point at the beggining

Before Resize:

Before

After Resize

enter image description here


Solution

  • In Winforms you can use the Picturebox properties to do this, without code:

    Add a picture box and go the control properties

    enter image description here

    This gives you 5 choices. The effect of which are of the same image on a Winform below:

    enter image description here

    • Normal just shows the image and fits (I believe from pixel 0,0) at no scaling or moving.
    • StretchImage will scale and force a fit of the image, even if it means skewing the image
    • AutoSize in this case shows the full image, in this case the image is bigger than the form which is why there is just a huge blue chunk.
    • Center image leaves the control intact and shows the center region of the image
    • Zoom zooms in or out of the image so that it shows in its entirety in the picturebox control.

    Use this in combination with anchor or dock of the control to keep the control where you want it, and also to scale the image.

    It sounds like you might want Zoom.

    Zoom in action, with Anchor points set to all sides (And a group box added to simulate a control box:

    enter image description here

    I can then resize the form, in this case maximized and the PictureBox control takes care of itself with out additional code:

    enter image description here

    Note, because I am using a very rectangular image I have set a gray background to show where the control is versus the image. You could set control color background to make this less obvious, or use stretchImage instead of zoom to force the image to always fill the control, although this creates plenty of ugly artifacts on non-square images.

    example of stretched artifacts:

    enter image description here