Keeping a PictureBox centered inside a container

Question

I am designing a simple picture viewer with ability to do some basic image processing. At the moment I have the problem of keeping the PictureBox centered inside a TabPage all the time as well as keeping the picturebox width and size same as the picture its showing. So far I had no success.

I have the following code that I call in form constructor to position it in center. it works the first time to center the picturebox:

private void SetPictureBoxOriginalSizeAndLocation(bool makeImageNull = false, DockStyle dockStyle = DockStyle.None)
{
    if (makeImageNull) picBoxView.Image = null;
    picBoxView.Dock = dockStyle;

    var xPoint = tabImageView.Location.X + ((splitContainer.Panel2.Width / 2) / 2);
    var yPoint = tabImageView.Location.Y;

    var width = tabImageView.Width / 2;
    var height = (tabImageView.Height / 2) - toolStripImageView.Height;

    if (picBoxView.Image == null) return;

    //Resize image according to width
    picBoxView.Image = ImageMethods.ResizeImage(picBoxView.Image.Tag.ToString(), width, height, false); 

    picBoxView.Location = new Point(xPoint, yPoint);
    picBoxView.Width = width;
    picBoxView.Height = height;
}

But it does not resize the picturebox to its image (you can see the black part that is back color for the picturebox control):

The problem is getting worse as soon as I resize the form, the picturebox position will goes to top:

I call the code above in form's resize event as well, no idea why it works when application starts. Would be nice if someone can tell me what properties I should take care of to achieve a nicely centered picturebox which always is as big as its image.

Anther

Try to set Dock to fill and set the Image as background image. BackgroundImageLayout can be set to Center. And BackGroundColor to Transparent – Bruni

Does the picturebox.Image size equalst to picturebox size? because I need to work on the pixels of the image, I dont know if the picturebox is larger than picture, the image I am working on will be the picturebox itself?! sounds stupid I know! – Anther

but then again I think I will have problem if I want to zoom in in the picture! – Anther

Answer 1

It's pretty easy if you just set the Anchor style to none:

picBoxView = new PictureBox();
picBoxView.SizeMode = PictureBoxSizeMode.AutoSize;
picBoxView.Anchor = AnchorStyles.None;
tabImageView.Controls.Add(picBoxView);
CenterPictureBox(picBoxView, myImage);

Then just center the PictureBox initially whenever you change the image of the PictureBox:

private void CenterPictureBox(PictureBox picBox, Bitmap picImage) {
  picBox.Image = picImage;
  picBox.Location = new Point((picBox.Parent.ClientSize.Width / 2) - (picImage.Width / 2),
                              (picBox.Parent.ClientSize.Height / 2) - (picImage.Height / 2));
  picBox.Refresh();
}

Having the Anchor = None will center the PictureBox control for you whenever the parent container gets resized because it "isn't" anchored to the default Left and Top locations.

Hackett

Answer 2

Givien a Form with TabControl, which has Dock set to Fill, below will keep your PictureBox in the centre. It also sets PictureBox size to Bitmap size:

    public partial class Form1 : Form
    {
        Bitmap b = new Bitmap(320, 200);
        public Form1()
        {
            InitializeComponent();
            CenterTheBox();
        }

        private void Form1_Resize(object sender, EventArgs e)
        {
            CenterTheBox();
        }

        void CenterTheBox()
        {
            pictureBox1.Size = b.Size;
            var left = (tabPage1.ClientRectangle.Width - pictureBox1.ClientRectangle.Width) / 2;
            var top = (tabPage1.ClientRectangle.Height - pictureBox1.ClientRectangle.Height) / 2;
            pictureBox1.Location = new Point(tabPage1.ClientRectangle.Location.X + left, tabPage1.ClientRectangle.Location.Y + top);

        }
    }

Haggard

Answer 3

I believe your problem lies here

var xPoint = tabImageView.Location.X + ((splitContainer.Panel2.Width / 2) / 2);
var yPoint = tabImageView.Location.Y;

var width = tabImageView.Width / 2;
var height = (tabImageView.Height / 2) - toolStripImageView.Height;

ypoint is alwways set to tabImageView Y, althought it should be set to

tabImageView.Location.Y + (tabImageView.Size.Height - picBoxView.Size.Height)/2

should be almost the same with xPoint

tabImageView.Location.X + (tabImageView.Size.Width - picBoxView.Size.Width)/2

and

width = picBoxView.Image.Width;
height = picBoxView.Image.Height;

Bruni