How to get FlowLayoutPanel.AutoSize to work with FlowBreak

Question

I have a problem with a FlowLayoutPanel and I don't know how to solve it.

I'm placing two FlowLayoutPanels inside another; the second inner flp has 3 buttons inside.

The properties from FlowLayoutPanel child are:

FlowDirection = LeftToRight;
AutoSize = true;
AutoSizeMode = GrowAndShrink;
WrapContents = true;

Now I set for each button the FlowBreak property to true, however the behavior I see is not the one I want, I want the FlowLayoutPanel to shrink to the width of the buttons,

Changing FlowDirection to UpToDown is not an option.

Anyone know why the AutoSize is not working?

this is the code.

//
//FlowLayoutPanel1
//
this.FlowLayoutPanel1.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.FlowLayoutPanel1.Controls.Add(this.FlowLayoutPanel3);
this.FlowLayoutPanel1.Location = new System.Drawing.Point(84, 77);
this.FlowLayoutPanel1.MinimumSize = new System.Drawing.Size(10, 10);
this.FlowLayoutPanel1.Name = "FlowLayoutPanel1";
this.FlowLayoutPanel1.Size = new System.Drawing.Size(308, 265);
this.FlowLayoutPanel1.TabIndex = 0;
//
//FlowLayoutPanel3
//
this.FlowLayoutPanel3.AutoSize = true;
this.FlowLayoutPanel3.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.FlowLayoutPanel3.Controls.Add(this.Button1);
this.FlowLayoutPanel3.Controls.Add(this.Button2);
this.FlowLayoutPanel3.Controls.Add(this.Button3);
this.FlowLayoutPanel3.Location = new System.Drawing.Point(127, 3);
this.FlowLayoutPanel3.MinimumSize = new System.Drawing.Size(10, 10);
this.FlowLayoutPanel3.Name = "FlowLayoutPanel3";
this.FlowLayoutPanel3.Size = new System.Drawing.Size(162, 87);
this.FlowLayoutPanel3.TabIndex = 1;
//
//Button1
//
this.FlowLayoutPanel3.SetFlowBreak(this.Button1, true);
this.Button1.Location = new System.Drawing.Point(3, 3);
this.Button1.Name = "Button1";
this.Button1.Size = new System.Drawing.Size(75, 23);
this.Button1.TabIndex = 0;
this.Button1.Text = "Button1";
this.Button1.UseVisualStyleBackColor = true;
//
//Button2
//
this.FlowLayoutPanel3.SetFlowBreak(this.Button2, true);
this.Button2.Location = new System.Drawing.Point(3, 32);
this.Button2.Name = "Button2";
this.Button2.Size = new System.Drawing.Size(75, 23);
this.Button2.TabIndex = 1;
this.Button2.Text = "Button2";
this.Button2.UseVisualStyleBackColor = true;
//
//Button3
//
this.Button3.Location = new System.Drawing.Point(3, 61);
this.Button3.Name = "Button3";
this.Button3.Size = new System.Drawing.Size(75, 23);
this.Button3.TabIndex = 2;
this.Button3.Text = "Button3";
this.Button3.UseVisualStyleBackColor = true;

Mychael

this is the problem in my GUI one control docs.google.com/document/d/… when i put 2 controls and set FlowBrake to True docs.google.com/document/d/… I want the controls to remain up, but as the width change does not fit. – Mychael

Can you please add two images - one with what you have and another with what you try to achieve. From text description it's not clear what problem you are facing with – Ruella

I added a new image with the result, and in my previous comment i put two links with the behaviour on my GUI – Mychael

Why is changing direction to TopDown not an option? – Trail

TL;DR version of the question Why with AutoSize there is enough space on the right of a layout panel reserved as if it was going to fit the biggest of all existing buttons there? – Trail

@Neolisk if I change direction to TopDown, then, if I want to put all the controls horizontally I have to put FlowBrake in all of them, and the height of the FlowLayoutPanel then is bigger. – Mychael

@Natalia: So you get the same issue, transposed 90 degrees. Okay, I see it... interesting... Looks like a bug in FlowLayoutPanel to me. – Trail

Answer 1

It is a bug, it's been around for a very long time. The issue is that the layout engine for FlowLayoutPanel calculates the width of the first row wrong, including the width of the 2nd control, even though it got wrapped to the second row.

The workaround is silly but effective, add a dummy Panel with a Width of 0 after the 1st control. If you are doing this with the designer then drop it first and drag it in the right place, to the right of the 1st control. Then set its Margin to (0, 0, 0, 0) and Size to (0, 0) in the Properties window.

Maryleemarylin

Answer 2

I don't believe the FlowLayoutPanel was designed to do what you're trying to do. A TableLayoutPanel would probably be better suited. Add a TableLayoutPanel with a single column, and add each button to a row.

Edit: I found a hackish work around. After the first button, create a Panel with the size of 0,0 and the margin of 0,0. Make sure that FlowBreak is set to false.

Edit: You only need to create one panel, after the first button, not one for each.

Twiddle

Same thoughts, same time. Upvoting... :) – Trail

Your hackish work around is amazing. I tried to find one like that as well, but Panel control did not come to my mind. I wish I could give you another upvote for that. – Trail

Answer 3

Not a solution, but a workaround. It looks like you are trying to simulate behavior of TableLayoutPanel by using flow breaks in FlowLayoutPanel. Did you try using TableLayoutPanel instead? According to your screenshots in the comments, it should work perfectly for your needs.

Trail

In my gui, the user can arrange the order and position of any button. the user can also drag and drop button in and out of the container. if I create a table layout panel then when the user drops the control over this, the behavior of the table is not trivial, because, we can have a column of control or a row or a table. – Mychael

@Natalia: are you trying to implement this? – Trail