VB / C#: Resizing two controls equally

Question

I have made a window in which I will be having two groups/panels and some buttons in between them. I want to code the resizing behavior in a way that when the window expands, the two panels increase their widths while keeping the distance between them constant.

Please see this mockup:

As you see above, I want the 'Local' and 'Server' Panels to resize while keeping the distance in between them same. If I use anchors (Top+Left+Right+Bottom), the left panel will overlap the right one and the right's width one will go out of the window. I want them to share the increased width of the window equally.

As for the buttons in between, I have kept ancors as Top only. By removing Left anchor from button, it automatically places itself in the center of the window when window is expanded, which is just the way I want it to be.

Any ideas how to manage resizing of panels?

Thanks.

Answer 1

Use the TableLayoutPanel control.

First add the TableLayout to the Form and set its Dock() property to Fill. Next you'll need to setup 3 columns and two rows. Add the two buttons to the middle column with each one is in its own row. Afterwards, setup the column values so they are like this:

Leave the rows at 50% on both. Now add your two GroupBoxes to the 1st and 3rd columns in the 1st row. For both GroupBoxes, set Dock() to Fill, and RowSpan() to 2. For the top Button, turn on only the Bottom Anchor. For the bottom Button, turn only the Top Anchor. For the TableLayoutPanel, set Padding() to 5,5,5,5.

Here is what it looked like when I was all done:

Resize the window and observe how the controls behave...