CODEWITHSUNDEEP
c#.netwinformsscrollbarpicturebox
brafales
brafales

Reputation: 590

Centered and scrolled PictureBox in WinForms

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

Upvotes: 5

Views: 10706

Answers (3)

John M
John M

Reputation: 14668

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

Upvotes: 1

Jeff Ogata
Jeff Ogata

Reputation: 57783

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.

Upvotes: 6

gbianchi
gbianchi

Reputation: 2138

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.

Upvotes: 0

Related Questions