three panels layout on form [closed]

Question

I'm trying to construct a form layout, which will meet following requirements:

• panel1 is fixed height - it will contain only a label which will be some kind of header with title, etc
• panel2 will contain datagridview with dockstyle fill, here user will find objects which he can select to show their properties
• panel3 is fixed height - it will be positioned at the bottom of the form and will contain properties of selected object from the datagridview

My problem is to make panel2 to to fill the whole place which left after panel1 and panel3. So if panel1 and panel3 has both fixed height 100, and the form has height 500, then panel2 should have 300 height, if form will be resized to 600, then panel2 should also resize to 400, etc.

I was trying some dock combinations, trying to set panel1 dock as top, panel3 as bottom and panel2 as fill, but it gives other results than expected. I know I can handle the form resize event and resize panel2 to a size which will left, but I'm wondering if there's some more elastic and clean way to do this.

Answer 1

The docking space is related to the order of objects on your form as im_a_noob has mentioned. You can change object z-order to change how they dock. You should be able to right-click the panel that needs to fill the space in the middle and then select "Bring to Front" from the menu. That should make it fill the space correctly and the whole form behind the other panels.

So you would dock your top panel to the top, bottom panel to the bottom, and then the center one to "Fill". Then right-click and bring the center one to the front.

Answer 2

this is because of the Document Outline.

go to

View -> Other Windows -> Document Outline (or ctrl + w, u)

make sure your dock fill pannel (middle one) is the first of the 3 pannel in that list. This should fix you.

Answer 3

It seems like a tableLayoutPanel would be a good choice here. That way you have the ability to set absolute values for row 1 (panel 1) and row 3 (panel 3) and then use 100% for the middle row (panel 2) guaranteeing that it will take up the remaining space without overlapping the other panels.

Then once you put your datagridview into the middle row of the tableLayoutPanel you should be able to set the Dock property to fill and it should work correctly.

TableLayoutPanels only allow for one element to be placed in a cell, however you can get around this by adding a panel as the main element and then configure everything in that panel.