The size of the components resize with the screen resolution c#

Question

I have 5 textboxes in winform and when the resolution is 1366x768, their position and size are correct. But, once I have changed the resolution to 1024x768, two of the textboxes are overlap with each other.

My question is: How could I make the width of the textboxes scale depending on the screen resolution?

Here is the images:

1366x768 screen resolution:

1024x768 screen resolution:

Here for the 1024x768 screen resolution, the description textbox overlap with the quantity textbox.

Here is the code that I am using:

void SetComponents()
        {
            _screen = Screen.PrimaryScreen.WorkingArea;

            this.label1.Text = "Product Code";

            this.label1.Location = new Point(40, (_screen.Height - _screen.Height) + 125);

            this.textBox1.Location = new Point(25, (_screen.Height - _screen.Height) + 150); // textbox for the product code

            this.label2.Text = "Quantity";

            this.label2.Location = new Point(215, (_screen.Height - _screen.Height) + 125);

            this.numericUpDown1.Location = new Point(185, (_screen.Height - _screen.Height) + 150); // numeric up down for the quantity

            this.label3.Text = "Description";

            this.textBox2.Size = new Size((_screen.Width / 2) + 100, 20); // textbox for the description

            this.label3.Location = new Point((_screen.Width / 2) + 50, (_screen.Height - _screen.Height) + 125);

            this.textBox2.Location = new Point((_screen.Width / 2) - 325, (_screen.Height - _screen.Height) + 150); // textbox for the description

            this.label4.Text = "Price (@ Rp)";

            this.label4.Location = new Point((_screen.Width - 150), (_screen.Height - _screen.Height) + 125);

            this.textBox3.Location = new Point((_screen.Width - 165), (_screen.Height - _screen.Height) + 150); // textbox for the price

            this.label5.Text = "Date / Time: ";

            this.textBox4.Size = new Size(145, 20); // textbox for the date / time

            this.label5.Location = new Point((_screen.Width - 275), (_screen.Height - _screen.Height) + 58);

            this.textBox4.Location = new Point((_screen.Width - 200), (_screen.Height - _screen.Height) + 55); // textbox for the date / time

            this.label6.Text = _welcomeText + UserInformation.CurrentLoggedInUser + " - " + UserInformation.CurrentLoggedInUserType;

            this.label6.Location = new Point((_screen.Width - _screen.Width) + 10, (_screen.Height - _screen.Height) + 30);

            this.button1.Text = "Submit";

            this.button1.Location = new Point((_screen.Width / 2) - 150, (_screen.Height - _screen.Height) + 185);

            this.button2.Text = "Reset";

            this.button2.Location = new Point((_screen.Width / 2) + 100, (_screen.Height - _screen.Height) + 185);

            this.button3.Text = "Delete";

            this.button3.Location = new Point((_screen.Width / 2) + 20, (_screen.Height - _screen.Height) + 185);

            this.button4.Text = "Edit";

            this.button4.Location = new Point((_screen.Width / 2) - 70, (_screen.Height - _screen.Height) + 185);

            this.button5.Text = "Update";

            this.button5.Location = new Point((_screen.Width / 2) - 70, (_screen.Height - _screen.Height) + 185);

            this.button6.Text = "Cancel";

            this.button6.Location = new Point((_screen.Width / 2) + 100, (_screen.Height - _screen.Height) + 185);

            this.button7.Text = "Information";

            this.button7.Location = new Point(10, (_screen.Height - _screen.Height) + 185);

            this.dataGridView1.Size = new Size((_screen.Width) - 40, (_screen.Height - _screen.Height) + 460);

            this.dataGridView1.Location = new Point((_screen.Width - _screen.Width) + 10, (_screen.Height - _screen.Height) + 225);
        }

I really appreciate your answer

Thank you

Answer 1

The usual approach to this is to use the container controls from winform TableControlLayout, then bind those control to your form will the Fill property. Inside the Container, add your usual controls which should snap to the Container and resize as you want.

In your case, you seem to be using a DataGridView which fills the whole bottom of the form, which should be correct.

Inside the DataGridView column editor, you can edit the fill property of each column either in percentage, absolute value or tell them to fill remaining space

EDIT:

Seems like I misread your question. Anyway it is all about the Containers and the Fill property

Answer 2

Try this:

ctl.Height = ctl.Height * (My.Computer.Screen.Bounds.Height / 768);
ctl.Width = ctl.Width * (My.Computer.Screen.Bounds.Width / 1366);