Question

I am trying to use TFlowPanel component in the following manner:

1. Place on the main form Form1 component FlowPanel1: TFlowPanel.
2. Set Form1.Width = 400, FlowPanel1.Align = alTop, FlowPanel1.AutoSize = True, FlowPanel1.AutoWrap = True.
3. Place on the FlowPanel1 5 SpeedButtons and set their Width to 64.
4. Compile and run.
5. Reduce width of the form (something about Form1.Width = 200).

For some reason, the speedbuttons do not automatically line up in two rows when user resizes the form. Although, they do line up in two rows when AutoSize = False, AutoWrap = True.
What is the reason for this behavior and how to solve it?

Edit: I’ve found “quick and dirty” solution. The following code is the event handler to the TFlowPanel.OnResize event:

procedure TForm1.FlowPanel1Resize(Sender: TObject);
begin
  with FlowPanel1 do
  begin
    AutoSize := False;
    Realign;            // line up controls
    AutoSize := True;   // adjust TFlowPanel.Height
  end;
end;

However, I still wonder if there is a standard way to solve the problem.

Answer 1

I wasn’t able to find the exact reason of such behavior in code, but basically you’ve challenged two sizing properties to fight, the AutoSize and Align. The problem is, I think, that when you resize a form, the control with AutoSize configured to True and Align set to alTop will first try to autosize the control and then align to top of its parent. What I can tell for sure, these two properties shouldn’t be combined at least from their logical meaning.

What I would suggest to your workaround is turn off the autosize by default and in OnResize event turn it temporary on and back to off to automatically adjust the height. So in code it would change simply to:

procedure TForm1.FlowPanel1Resize(Sender: TObject);
begin
  // there's no Realign here, since the AlignControls request is called
  // at control resize, so here you have children already aligned, what
  // you then need is to request the control to autosize the height and
  // turn off the autosizing to the default, disabled state
  FlowPanel1.AutoSize := True;
  FlowPanel1.AutoSize := False;
end;