firemonkey - Delphi/FMX: How to add a dynamically created top-aligned component under all previously added top-aligned components, instead of second from the top?

Question

I am making an app for Android with Delphi and FMX. In the onclick-procedure of a button I dynamically create a TPanel (with some components in it) which I then add to a TVertScrollBox. I want the TPanels to stack on top of each other, so I set the Align property to Top.

procedure TMainForm.AddGroupButtonClick(Sender: TObject);
var Group : TPanel;
begin
   Group := TPanel.Create(Self);
   Group.Parent := Groups;         // where Groups is a TVertScrollBox on the form
   Group.Align := TAlignLayout.Top;

   //Then I create some other components and set their Parent to Group
end;

A user would probably expect the new TPanel to be added under all the other TPanels. However, unless there's no TPanels added previously, every new TPanel is added directly under the topmost one, i.e. second from the top.

Why is this and how do I add the new TPanel under all the previously added ones?

I saw a similar question on here, but they were using VCL, where there apparently is a Top-property you can change. There doesn't seem to be one when working with FMX components though.

Answer 1

When you create a new Firemonkey panel, its Position property is by default X=0, Y=0.

When you set Align := TAlignLayout.Top; it compares with previously placed components, finds that there is already a panel at Y = 0 and squeezes the new panel next below that existing panel.

To place the new panel below all other panels set

...
Group.Position.Y := 1000; // any sufficiently large value (bigger than the last panel's Y)
Group.Align := TAlignLayout.Top;