13

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.

enter image description here

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,

enter image description here

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;
Natalia
  • 470
  • 2
  • 5
  • 12
  • this is the problem in my GUI one control https://docs.google.com/document/d/1I6OtboresNk-gfOR3sEM8gyYHVX9sGohdNtX6heeQwI/edit?usp=sharing when i put 2 controls and set FlowBrake to True https://docs.google.com/document/d/17C02PoL8LCyymfXNtEP8N6kkzZETxkiOCb6mPTbzGf0/edit?usp=sharing I want the controls to remain up, but as the width change does not fit. – Natalia Mar 25 '13 at 20:30
  • 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 – Sergey Berezovskiy Apr 03 '13 at 13:28
  • I added a new image with the result, and in my previous comment i put two links with the behaviour on my GUI – Natalia Apr 03 '13 at 14:28
  • Why is changing direction to `TopDown` not an option? – Victor Zakharov Apr 03 '13 at 14:42
  • 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?` – Victor Zakharov Apr 03 '13 at 14:47
  • @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. – Natalia Apr 03 '13 at 14:53
  • @Natalia: So you get the same issue, transposed 90 degrees. Okay, I see it... interesting... Looks like a bug in FlowLayoutPanel to me. – Victor Zakharov Apr 03 '13 at 14:55

3 Answers3

17

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.

Hans Passant
  • 922,412
  • 146
  • 1,693
  • 2,536
6

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.

enter image description here

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

Michael G
  • 6,695
  • 2
  • 41
  • 59
2

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.

Victor Zakharov
  • 25,801
  • 18
  • 85
  • 151
  • 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. – Natalia Apr 03 '13 at 15:04
  • @Natalia: are you trying to implement [this](http://www.devexpress.com/Products/NET/Controls/WinForms/Layout/)? – Victor Zakharov Apr 03 '13 at 15:05