How can I make datagridviews not collide with button when I'm resizing form?

Question

I have form in WinForms that looks like this

I want the user to be able to resize the form. Buttons would stay the same size and datagridviews would grow when he does this.

Right now, datagridviews are colliding with buttons and It looks pretty ugly . I want datagridviews to grow, but not collide with buttons.

I've tried many different combinations of code and It doesn't work like I wanted. I want buttons to be between datagridviews.

Designer:

 // 
        // dataGridView1
        // 
        this.dataGridView1.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.dataGridView1.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
        this.dataGridView1.Location = new System.Drawing.Point(13, 60);
        this.dataGridView1.Name = "dataGridView1";
        this.dataGridView1.RowTemplate.Height = 24;
        this.dataGridView1.Size = new System.Drawing.Size(291, 326);
        this.dataGridView1.TabIndex = 0;
        // 
        // dataGridView2
        // 
        this.dataGridView2.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.dataGridView2.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
        this.dataGridView2.Location = new System.Drawing.Point(566, 60);
        this.dataGridView2.Name = "dataGridView2";
        this.dataGridView2.RowTemplate.Height = 24;
        this.dataGridView2.Size = new System.Drawing.Size(284, 326);
        this.dataGridView2.TabIndex = 1;
        // 
        // button1
        // 
        this.button1.Anchor = System.Windows.Forms.AnchorStyles.None;
        this.button1.Location = new System.Drawing.Point(375, 93);
        this.button1.Name = "button1";
        this.button1.Size = new System.Drawing.Size(121, 83);
        this.button1.TabIndex = 2;
        this.button1.Text = "button1";
        this.button1.UseVisualStyleBackColor = true;
        // 
        // button2
        // 
        this.button2.Anchor = System.Windows.Forms.AnchorStyles.None;
        this.button2.Location = new System.Drawing.Point(375, 187);
        this.button2.Name = "button2";
        this.button2.Size = new System.Drawing.Size(121, 83);
        this.button2.TabIndex = 3;
        this.button2.Text = "button2";
        this.button2.UseVisualStyleBackColor = true;
        // 
        // button3
        // 
        this.button3.Anchor = System.Windows.Forms.AnchorStyles.None;
        this.button3.Location = new System.Drawing.Point(375, 281);
        this.button3.Name = "button3";
        this.button3.Size = new System.Drawing.Size(121, 83);
        this.button3.TabIndex = 4;
        this.button3.Text = "button3";
        this.button3.UseVisualStyleBackColor = true;
        // 
        // Form1
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(862, 398);
        this.Controls.Add(this.button3);
        this.Controls.Add(this.button2);
        this.Controls.Add(this.button1);
        this.Controls.Add(this.dataGridView2);
        this.Controls.Add(this.dataGridView1);
        this.Name = "Form1";
        this.Text = "Form1";
        ((System.ComponentModel.ISupportInitialize)(this.dataGridView1)).EndInit();
        ((System.ComponentModel.ISupportInitialize)(this.dataGridView2)).EndInit();
        this.ResumeLayout(false);

Answer 1

Try a TableLayoutPanel . You can define 3 columns, the first one set to 50%, the second one to the width of your buttons (or set to AutoSize , initially set it to an absolute or percentage value, then place your buttons. One placed go back and change to autosize otherwise the column will shrink to nothing if there's nothing in the column) and the third to 50%. Then you'll need at least 3 rows, 1 row per button.

Put your first DataGridView in Cell 0,0 (Col 0, Row 0) and set RowSpan to 3. Put your second DataGridView in Cell 2,0 (Col 2, Row 0) and, again, set RowSpan to 3. Then in the middle column (col 1) put your 3 buttons, one in each row. You can remove anchoring at that point so the buttons float in the middle of the column. Set your datagridviews to DockStyle.Fill and you shouldn't have any issues with the DataGridRow overlapping the buttons.

Here's a couple of screenshots.

Answer 2

对您的Datagridview和按钮使用Anchor属性。