Centered and scrolled PictureBox in WinForms

Question

I'm developing a WinForms application and can't figure out how to resolve an issue. I need to show an image in a Form. Because the image can be arbitrarily large, I need scrollbars on the picturebox containing the image so the user can see it entirely. Googling around I found out the best way to achieve this is to add the PictureBox as a Child Control of a Panel, and making the Panel autosizable and autoscrollable. I did that programatically since using the designer I was unable to insert the picturebox as a child control of the panel. The problem I'm now facing is that I can't seem to be able to center and scroll the picturebox at the same time. If I put the anchor of the picturebox to top,left,bottom,right, the scrollbars are not shown and the image displayed is strange, if I put back the anchor to only top-left, the image is not centered.

Is there any way to do both at the same time? Here's the code for my Panel and Picturebox:

this.panelCapturedImage = new System.Windows.Forms.Panel();
this.panelCapturedImage.SuspendLayout();
this.panelCapturedImage.AutoScroll = true;
this.panelCapturedImage.AutoSize = true;
this.panelCapturedImage.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.panelCapturedImage.Controls.Add(this.pictureBoxCapturedImage);
this.panelCapturedImage.Location = new System.Drawing.Point(0, 49);
this.panelCapturedImage.Name = "panelCapturedImage";
this.panelCapturedImage.Size = new System.Drawing.Size(3, 3);
this.panelCapturedImage.TabIndex = 4;

this.pictureBoxCapturedImage.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.pictureBoxCapturedImage.Location = new System.Drawing.Point(0, 0);
this.pictureBoxCapturedImage.Name = "pictureBoxCapturedImage";
this.pictureBoxCapturedImage.Size = new System.Drawing.Size(0, 0);
this.pictureBoxCapturedImage.SizeMode = System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.pictureBoxCapturedImage.TabIndex = 0;
this.pictureBoxCapturedImage.TabStop = false;

this.panelCapturedImage.Controls.Add(this.pictureBoxCapturedImage);

And here's where I set the image:

public Image CapturedImage
{
    set 
    { 
        pictureBoxCapturedImage.Image = value;
        pictureBoxCapturedImage.Size = value.Size;
    }
}

Gigot

Answer 1

For the PictureBox, set SizeMode = AutoSize, Anchor it Top, Left, and set its Location to 0, 0.

Set Panel.AutSize to False and Panel.AutoScroll to True.

When you set the PictureBox.Image property, it will auto-size to the size of the image. You can then use that size to set the panel's AutoScrollPosition property:

public Image CapturedImage
{
    set 
    { 
        pictureBoxCapturedImage.Image = value;
        panelCapturedImage.AutoScrollPosition = 
            new Point { 
                X = (pictureBoxCapturedImage.Width - panelCapturedImage.Width) / 2, 
                Y = (pictureBoxCapturedImage.Height - panelCapturedImage.Height) / 2 
            };
    }
}

If the image is smaller then then panel's size, it will remain in the upper left corner. If you want it centered within the panel, you'll have to add logic to set its Location appropriately.

Arevalo

Thanks, I though there was an automatic way to do that. I'll take your approach! – Gigot

You know that all of this can be done auto by setting the properties of the control.. – Watchband

Answer 2

Based on earlier answers I was able to create this full example:

private void testShowPictureBox()
    {
        /* format form */
        Form frmShowPic = new Form();
        frmShowPic.Width = 234;
        frmShowPic.Height = 332;
        frmShowPic.MinimizeBox = false;
        frmShowPic.MaximizeBox = false;
        frmShowPic.ShowIcon = false;
        frmShowPic.StartPosition = FormStartPosition.CenterScreen;

        frmShowPic.Text = "Show Picture";

        /* add panel */
        Panel panPic = new Panel();
        panPic.AutoSize = false;
        panPic.AutoScroll = true;
        panPic.Dock = DockStyle.Fill;

        /* add picture box */
        PictureBox pbPic = new PictureBox();
        pbPic.SizeMode = PictureBoxSizeMode.AutoSize;
        pbPic.Location = new Point(0, 0);

        panPic.Controls.Add(pbPic);
        frmShowPic.Controls.Add(panPic);

        /* define image */
        pbPic.ImageLocation = @"c:\temp\pic.png";

        frmShowPic.ShowDialog();
   }

Duteous

Answer 3

The picturebox has to be set to autosize. anchored at the center (or a border).

You could manage all of this in the designer, don't undertand your problem with that.

The panel has to be set to autoscroll to true.

Watchband

I don't know how to add the PictureBox as a child control of the Panel in the designer, when I drop it onto the panel it's added into the form, not inside the Panel – Gigot

Ok yes it seems the control is added inside the panel, however, if I set the picturebox to autosize, the image is not centered inside the panel. How do I achieve this? I can't see the option to anchor it to the center – Gigot

If you not anchor it to anything, it will be centered by default. – Watchband