Search code examples
delphifiremonkey

Firemonkey component save design time size

In regard to this question I have been able to create an FMX component that is a white rectangle with a black border that can be drawn inside with the cursor of the mouse (like with MS Paint).

enter image description here

When I compile and run the program I get this:

enter image description here

Why?

If I set the Align property for example it works (Client aligns this to client). If I align the component to Center it is on the center but the size is smaller (like in the picture).

It looks like it doesn't "save" the width and the height that I set on the Object Inspector. My component has this relevant code:

type
  Test = class(TControl)
  strict private
    FLineFill: TStrokeBrush;
  protected
    procedure Paint; override;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  published
    property Align;
property Anchors;
property ClipChildren;
property ClipParent;
property Cursor;
property Enabled;
property Locked;
property Height;
property HitTest;
property Opacity;
property Margins;
property Position;
property Visible;
property Width;
property OnClick;
property OnDblClick;
property OnMouseDown;
property OnMouseMove;
property OnMouseUp;
property OnMouseWheel;
property OnMouseEnter;
property OnMouseLeave;
property OnPainting;
property OnPaint;
property OnResize;
property OnResized;
end;

And here's the implementation:

constructor Test.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  FLineFill := TStrokeBrush.Create(TBrushKind.Solid, $FF222222);
  //more...
end;

destructor Test.Destroy;
begin
  FLineFill.Free;
  inherited;
end;

procedure Test.Paint;
var
begin
  Canvas.Stroke.Assign(FLineFill);
  Canvas.ClearRect(ClipRect, TAlphaColorRec.White);

  Canvas.Stroke.Color := TAlphaColorRec.Black;
  //more code...
end;

I have given a look at the source code of TPlotGrid which is a simple component and it does what I'm doing basically. Do I have to setup something more in the Paint event?

Solution

  • You need to add the Size property because it is the one that takes care of the dimension of the component. It returns TControlSize which does exactly what you need. From the doc:

    A TControlSize object is used for managing the size of the component. This can be specified through the Size, Width, Height, and PlatformDefault attributes.

    Just add this code in the published part:

    property Size;

    If you look at its implementation you'll find

    property Width: Single read GetWidth write SetWidth stored StoreWidthHeight;
property Height: Single read GetHeight write SetHeight stored StoreWidthHeight;