How to resize 2 Datagridview equally?

Question

I have a form with 2 DataGridView and when resizing the form I can only resize 1 of DataGridView on all sides (with anchor 4 sides) without overlapping the other side DataGridView.

Taking the image into consideration, in case I put the anchor 4 sides at 2 DataGridView, the first DataGridView superimposes the second DataGridView, as the form increases. If I put the anchor of the second DataGridView right and down, only the first DataGridView size increases.

Question: Is there any way to resize the 2 DataGridView everywhere (anchor on the 4 sides) without one blow to the other and both stay the same size?

Answer 1

One option would be to use the control Tablelayoutpanel with the property Dock to Fill, has even the option to put the column width in percentage. Each cell only allows a control, use a container if you need more than one control per cell. Also put Dock to Fill in the Controls...

Here is an example with Controls created in Runtime:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        CreateControls();
    }

    private void CreateControls()
    {
        var tableLayoutPanel = new TableLayoutPanel
        {
            RowCount = 2,
            ColumnCount = 3
        };

        tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 45F));
        tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 10F));
        tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 45F));

        tableLayoutPanel.RowCount = 2;
        tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Absolute, 30F));
        tableLayoutPanel.RowStyles.Add(new RowStyle());

        var label = new Label { Text = "Grupo: LLL" };

        var groupBox1 = new GroupBox { Dock = DockStyle.Fill };
        var textBox1 = new TextBox { Dock = DockStyle.Top };
        var dataGridView1 = new DataGridView { Dock = DockStyle.Fill };

        // A ordem que os controlos são adicionados tem importancia
        // o que tem 'DockStyle.Fill' tem de ser o primeiro a ser adicionado
        groupBox1.Controls.Add(dataGridView1);
        groupBox1.Controls.Add(textBox1);

        var groupBox2 = new GroupBox { Dock = DockStyle.Fill };
        var textBox2 = new TextBox { Dock = DockStyle.Top };
        var dataGridView2 = new DataGridView { Dock = DockStyle.Fill };

        groupBox2.Controls.Add(textBox2);
        groupBox2.Controls.Add(dataGridView2);
        // Em design mode, poderia ser 'Bring to Front'
        groupBox2.Controls.SetChildIndex(dataGridView2, 0);

        tableLayoutPanel.Controls.Add(label, 0, 0);
        tableLayoutPanel.Controls.Add(groupBox1, 0, 1);
        tableLayoutPanel.Controls.Add(groupBox2, 2, 1);

        tableLayoutPanel.Dock = DockStyle.Fill;
        tableLayoutPanel.Padding = new Padding(20);

        this.Controls.Add(tableLayoutPanel);
    }
}