Centered and Scrolled PictureBox in WinForms

Question

I am developing a WinForms application and cannot figure out how to solve the problem. I need to show the image in the form. Since the image can be arbitrarily large, I need scroll bars on the frame with the image so that the user can see it completely. Approaching it, I found that the best way to achieve this is to add a PictureBox as a child of the Panel control and make the panel automatic and automatic. I did this programmatically, because with the help of the constructor, I could not insert the image as a child control of the panel. The problem that I am currently facing is that I cannot possibly be able to center and scroll the image at the same time. If I put the anchor in the upper, left, lower, right bars, the scroll bars are not displayed, and the displayed image is strange, if I return the anchor only left-up, the image is not centered.

Is there a way to do both at the same time? Here is 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, where I set the image:

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

Answer 1

For 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 automatically set the image size. Then you can use this size to set the 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 and then the size of the panel, it will remain in the upper left corner. If you want it to be centered inside the panel, you need to add logic to set its Location accordingly.

Answer 2

Based on earlier answers, I was able to create this complete 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(); } 

Answer 3

The picture should be set to autosave. fixed in the center (or border).

You can manage all this in the designer, do not stop there.

The panel should be set to autoscroll for true.