Tlabeledit component for FMX framework

Question

I want a basic TLabeledit as available on VCL framework also inside FMX framework. I can drop the defined component from below on my form at design time, but during run time position , height and width are set to almost 0 . How to transfer the values from design time to the component at run time ? Pls. show the needed additional code

unit TLabelEdit.FM;

interface

uses
  System.SysUtils, System.Classes, System.Types, System.UITypes, FMX.Types,
  FMX.Controls, FMX.Edit,
  FMX.StdCtrls, FMX.Graphics;

type
   [ComponentPlatformsAttribute(pidWin32 or pidWin64)]
  TLabelEditFM = class(TControl)
  private
    { Private declarations }
    FEdit: TEdit;
    FLabel: TLabel;
    function GetText: string;
    procedure SetText(const Value: string);
    function GetCaption: string;
    procedure SetCaption(const Value: string);
    function GetLabel: TLabel;
    function GetEdit: TEdit;
  protected
    { Protected declarations }
    procedure Paint; override;
  public
    { Public declarations }
    constructor Create(AOwner: TComponent); override;
    property Text: string read GetText write SetText;
    property Caption: string read GetCaption write SetCaption;
  published
    { Published declarations }
   property LabelControl: TLabel read GetLabel; // Expose the label control as a published property
   property EditControl: TEdit read GetEdit; // Expose the edit control as a published property
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('TOOLS', [TLabelEditFM]);
end;

{ TCustomLabeledEdit }

constructor TLabelEditFM.Create(AOwner: TComponent);
begin
  inherited;

  FEdit := TEdit.Create(Self); // Create the edit subcomponent
  FEdit.Parent := Self; // Set the edit's parent to the custom labeled edit
  FEdit.Align := TAlignLayout.Client;
  // Position the edit to fill the entire control

  FEdit.Position.X := FX; // Set the X position
  FEdit.Position.Y := FY; // Set the Y position
  FEdit.Width := FWidth;  // Set the width
  FEdit.Height := FHeight; // Set the height





  FLabel := TLabel.Create(Self); // Create the label subcomponent
  FLabel.Parent := Self; // Set the label's parent to the custom labeled edit
  FLabel.Align := TAlignLayout.Top;
  // Position the label at the top of the control
end;

function TLabelEditFM.GetText: string;
begin
  Result := FEdit.Text;
end;

procedure TLabelEditFM.SetText(const Value: string);
begin
  FEdit.Text := Value;
end;

function TLabelEditFM.GetCaption: string;
begin
  Result := FLabel.Text;
end;

function TLabelEditFM.GetEdit: TEdit;
begin
    Result := FEdit;
end;

function TLabelEditFM.GetLabel: TLabel;
begin
    Result := FLabel;
end;

procedure TLabelEditFM.SetCaption(const Value: string);
begin
  FLabel.Text := Value;
end;

procedure TLabelEditFM.Paint;
var
  EditRect, LabelRect: TRectF;
begin
  inherited;

  Canvas.BeginScene;
  try
    // Custom drawing code for the labeled edit control
    // Here you can define how the control should be visually rendered

    // Example: Drawing a border around the control
    Canvas.Stroke.Kind := TBrushKind.Solid;
    Canvas.Stroke.Color := TAlphaColorRec.Black;
    Canvas.Stroke.Thickness := 1;
    Canvas.DrawRect(LocalRect, 0, 0, AllCorners, 1);

    // Example: Defining the edit box and label's position within the control
    EditRect := LocalRect;
    LabelRect := TRectF.Create(LocalRect.Left, LocalRect.Top, LocalRect.Right,
      FLabel.Height);
    FEdit.BoundsRect := EditRect;
    FLabel.BoundsRect := LabelRect;
  finally
    Canvas.EndScene;
  end;
end;

end.