Docking multiple controls - one fills remaining space

Question

I'm trying to dock N number of controls in a container. I want them all to fill the entire width, but stack. I want one particular control (currently the last one) to fill the remaining space, while all others have fixed sizes.

This:

Button b1 = new Button() { Text = "Button 1", Dock = DockStyle.Top };
Button b2 = new Button() { Text = "Button 2", Dock = DockStyle.Top };
Button b3 = new Button() { Text = "Button 3", Dock = DockStyle.Fill };

Controls.Add(b1);
Controls.Add(b2);
Controls.Add(b3);

Produces this:

Button 3 filling entire parent

As you can see, Button 3 is doing exactly what I told it to: Fill the parent. But that's not what I want it to do. Aside from manually placing, and handling resize events, etc. how can I make Button 3 fill the remaining space?

Note: I am not using the designer.

See [here][1]. This is a duplicate. [1]: http://stackoverflow.com/questions/154543/panel-dock-fill-ignoring-other-panel-dock-setting — Jeff Cuscutis, Oct 13 '11 at 04:30

score 37 · Accepted Answer · answered Oct 14 '11 at 00:32

37

While adding b3.BringToFront() (after it has been added to Controls) works, the simplest solution here, is to simply change the order in which the buttons are added to Controls. The following code works perfectly:

Button b1 = new Button() { Text = "Button 1", Dock = DockStyle.Top };
Button b2 = new Button() { Text = "Button 2", Dock = DockStyle.Top };
Button b3 = new Button() { Text = "Button 3", Dock = DockStyle.Fill };

Controls.Add(b3);    // this guy first!
Controls.Add(b1);
Controls.Add(b2);

The result:

enter image description here

If you take a close look at the borders in this little example, this actually seems to work better than BringToFront().

answered Oct 14 '11 at 00:32

Jonathon Reinhart

132,704
33
254
328

4

If you right on button3 and click "Brint to Front" it exactly does this for you. – CharithJ Oct 14 '11 at 12:04
1

That only works when you're using the designer, which in this case I am not. – Jonathon Reinhart Oct 14 '11 at 22:53
Is there a way to put spacing in between the buttons? With padding/margins? – Erik Berkun-Drevnig Jul 27 '15 at 20:11
@ErikBerkun-Drevnig I think all paddings/margins will be denied, but you can do spacing by wrapping button by panel – Paul WWJD Jan 13 '23 at 16:39

score 6 · Answer 2 · answered Oct 24 '13 at 14:55

6

Basically the DockStyle.Fill control should be added first in the Controls collection.

answered Oct 24 '13 at 14:55

vezenkov

4,009
1
26
27

score 5 · Answer 3 · answered Oct 13 '11 at 04:27

5

Use Bring to Front on your Button 3 in the designer, or call this code:

b3.BringToFront();

answered Oct 13 '11 at 04:27

Jay Riggs

53,046
9
139
151

1

Thanks for pointing out the Z-order to me. I knew it affected the order in which they were docked (esp. for the `DockStyle.Top` ones) but I didn't think to move my `DockStyle.Fill control`. See my answer for a different take. – Jonathon Reinhart Oct 14 '11 at 00:35
1

Yeah, that's the right answer. The Z-Order is important. You can also do this in the IDE. Also it is recommended to use panels for the layout. – Dominik Dec 06 '16 at 10:20

DavidG · Answer 4 · 2016-09-28T15:59:49.450

-1

button 1 and 2 should have dock property set to top and to make button 3 take the rest of the space you can set its dock property to bottom.

dock = fill will make the button fill the entire space not just the remaining space. Bottom will function just as top did, but anchoring it to the bottom of the parent container. Apply buttons in order of 1, 2, 3.

Furthermore, you could set the dock property to top on all three and simply size button three differently.

edited Sep 28 '16 at 15:59

answered Sep 28 '16 at 15:39

DavidG

785
8
23

WinForms doesn't have a stack panel. Panel, FlowLayoutPanel and TableLayoutPanel are your choices. – LarsTech Sep 28 '16 at 15:49
Sorry, just came off WPF project lol. Edited to be correct. Wouldn't FlowLayoutPanel do the same thing? It flows, but with dock set to top the child control width would equal parent container width so they show flow correctly. Just trying to think outside the box a bit. – DavidG Sep 28 '16 at 15:59

Docking multiple controls - one fills remaining space

4 Answers4

Linked