I’ve created a design-time component in FMX Delphi which starts with a TLayout and includes a GridLayout and in the grid I have a couple of other components. When I create the component programmatically to test it all is well.

When I drop it in a form the first time, the component looks as one entry in the structure panel and in the form like this:

Then, if I switch to the code or to another unit and go back to the form, the structure reveals the contents of the component like this:

Now, I can click on the elements and in fact I can move the other components within the component. From this point, the alignment of the inner components is a mess.

I declare the inner components as private variables:

type
TMyControl = class(TStyledControl)
private
fMainLayout,
fLeftLayout,
fRightLayout: TLayout;
fMainGridLayout: TGridPanelLayout;
fTabBar: TTabControl;
//more fields here

and then I create the components in the Create method:

constructor TMyControl.Create(AOwner: TComponent);
begin
inherited;
fMainGridLayout:=TGridPanelLayout.Create(Self);
fMainGridLayout.Align:=TAlignLayout.Client;
fMainGridLayout.Parent:=self;
//and the rest in the same way by assigning the parent to the appropriate component

Why does this happen? Shouldn’t the component be one “element”?

Anyone any ideas?

Thanks

UPDATE: Here is a test case project: https://www.cubbyusercontent.com/pli/MyTestStyled.zip/_c4bee140f1854a46b4168653f8d6b6a4

How to reproduce:
1. Install the MyStyledControl
2. Create a new project and add the MyTeststyled in the form

So far all good- you should be able to see the structure like in the first image

Save the project and reopen it. Then, you have the structure similar to the second image