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;
    }
}

Solution 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.

Solution 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();
   }