Resize 4 picture boxes when form is resized

Question

I am implementing a winform application in c# so that it contains four picture boxes and some control buttons in one corner.

My main problem is that I cannot achieve the behaviour shown in the picture. The idea is to automatically resize the picture boxes when the form is resized. The area of the control panel should stay the same and only the area containing the boxes should be resized accordingly.

I have been playing with anchor and dock properties but I dont get the desire output.

Anyone could give me a hint?

Thanks and kind regards, Bilbinight

Answer 1

So, let's say you have the following picture boxes:

pictureBox1 | pictureBox2 | panel
------------|------------
pictureBox3 | pictureBox4

Then the following should do the trick: set the forms Resize event to this eventhandler:

private void Form1_Resize(object sender, EventArgs e)
{
    int spaceBetweenPictures = 19;
    int widthToFill = (this.Width - 40 - panel.Width) - spaceBetweenPictures;
    int heightToFill = this.Height - 80;

    pictureBox1.Width = widthToFill / 2;
    pictureBox1.Height = heightToFill / 2;

    // Setting the sizes of all the three pictureboxes to the sizes of the first one.
    pictureBox2.Width = pictureBox1.Width;
    pictureBox2.Height = pictureBox1.Height;
    pictureBox3.Width = pictureBox1.Width;
    pictureBox3.Height = pictureBox1.Height;
    pictureBox4.Width = pictureBox1.Width;
    pictureBox4.Height = pictureBox1.Height;

    // Setting the positions:
    pictureBox2.Location = new Point(pictureBox1.Width + spaceBetweenPictures, pictureBox1.Location.Y);
    pictureBox3.Location = new Point(pictureBox1.Location.X, pictureBox1.Height + spaceBetweenPictures);
    pictureBox4.Location = new Point(pictureBox2.Location.X, pictureBox3.Location.Y);
}

Of course you should modify the magic numbers in this code (19, 40, 80) accordingly, to suit your program (that depends a lot on whether you use border on your form or not).

UPDATE:

If you want your pictureboxes square shaped then just ignore the heightToFill variable and use widthToFill instead when setting the Height of pictureBox1. Or set:

pictureBox1.Height = pictureBox.Width;

And I also forgot to mention that the panel of course should be aligned Top, Right. So set the panel's Anchor property to:

AnchorStyles.Top | AnchorStyles.Right;

Answer 2

Are four image boxes supposed to support resizing at runtime (allowing end user to resize)? if not then following will give you desired result.

1 TableLayoutPanel with 2 rows and two columns. Set the initial size to fill the desired area, set the anchor to all four directions. Add 4 picture boxes to 4 cells and set Dock to Fill for all Picture Boxes.

Add a panel to the right side of form, and make it fit to cover your controls area. Set the anchor Top, Bottom, Right.

Here is sample code:

//frmResizing.cs
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class frmResizing : Form
    {
        public frmResizing()
        {
            InitializeComponent();
        }
    }
}
//frmResizing.Designer.cs code
namespace WindowsFormsApplication1
{
    partial class frmResizing
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
            this.panel1 = new System.Windows.Forms.Panel();
            this.pictureBox4 = new System.Windows.Forms.PictureBox();
            this.pictureBox3 = new System.Windows.Forms.PictureBox();
            this.pictureBox2 = new System.Windows.Forms.PictureBox();
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            this.tableLayoutPanel1.SuspendLayout();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox4)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox3)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            this.SuspendLayout();
            // 
            // tableLayoutPanel1
            // 
            this.tableLayoutPanel1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
            | System.Windows.Forms.AnchorStyles.Left) 
            | System.Windows.Forms.AnchorStyles.Right)));
            this.tableLayoutPanel1.ColumnCount = 2;
            this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
            this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
            this.tableLayoutPanel1.Controls.Add(this.pictureBox4, 1, 1);
            this.tableLayoutPanel1.Controls.Add(this.pictureBox3, 0, 1);
            this.tableLayoutPanel1.Controls.Add(this.pictureBox2, 1, 0);
            this.tableLayoutPanel1.Controls.Add(this.pictureBox1, 0, 0);
            this.tableLayoutPanel1.Location = new System.Drawing.Point(2, 1);
            this.tableLayoutPanel1.Name = "tableLayoutPanel1";
            this.tableLayoutPanel1.RowCount = 2;
            this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
            this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
            this.tableLayoutPanel1.Size = new System.Drawing.Size(544, 561);
            this.tableLayoutPanel1.TabIndex = 0;
            // 
            // panel1
            // 
            this.panel1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
            | System.Windows.Forms.AnchorStyles.Right)));
            this.panel1.BackColor = System.Drawing.Color.Red;
            this.panel1.Location = new System.Drawing.Point(553, 1);
            this.panel1.Name = "panel1";
            this.panel1.Size = new System.Drawing.Size(107, 561);
            this.panel1.TabIndex = 1;
            // 
            // pictureBox4
            // 
            this.pictureBox4.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pictureBox4.Image = global::WindowsFormsApplication1.Properties.Resources.download;
            this.pictureBox4.Location = new System.Drawing.Point(275, 283);
            this.pictureBox4.Name = "pictureBox4";
            this.pictureBox4.Size = new System.Drawing.Size(266, 275);
            this.pictureBox4.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
            this.pictureBox4.TabIndex = 3;
            this.pictureBox4.TabStop = false;
            // 
            // pictureBox3
            // 
            this.pictureBox3.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pictureBox3.Image = global::WindowsFormsApplication1.Properties.Resources.pizza_page;
            this.pictureBox3.Location = new System.Drawing.Point(3, 283);
            this.pictureBox3.Name = "pictureBox3";
            this.pictureBox3.Size = new System.Drawing.Size(266, 275);
            this.pictureBox3.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
            this.pictureBox3.TabIndex = 2;
            this.pictureBox3.TabStop = false;
            // 
            // pictureBox2
            // 
            this.pictureBox2.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pictureBox2.Image = global::WindowsFormsApplication1.Properties.Resources.images;
            this.pictureBox2.Location = new System.Drawing.Point(275, 3);
            this.pictureBox2.Name = "pictureBox2";
            this.pictureBox2.Size = new System.Drawing.Size(266, 274);
            this.pictureBox2.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
            this.pictureBox2.TabIndex = 1;
            this.pictureBox2.TabStop = false;
            // 
            // pictureBox1
            // 
            this.pictureBox1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.download__1_;
            this.pictureBox1.Location = new System.Drawing.Point(3, 3);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(266, 274);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
            this.pictureBox1.TabIndex = 0;
            this.pictureBox1.TabStop = false;
            // 
            // Form2
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(660, 562);
            this.Controls.Add(this.panel1);
            this.Controls.Add(this.tableLayoutPanel1);
            this.Name = "Form2";
            this.Text = "Form2";
            this.tableLayoutPanel1.ResumeLayout(false);
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox4)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox3)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.TableLayoutPanel tableLayoutPanel1;
        private System.Windows.Forms.PictureBox pictureBox4;
        private System.Windows.Forms.PictureBox pictureBox3;
        private System.Windows.Forms.PictureBox pictureBox2;
        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.Panel panel1;
    }
}