Drawing on the canvas of a TCornerButton is getting the position wrong

Question

I have created a new component that inherits from TCornerButton to add a drop down menu option.

First question...

Why do I need to override the "AfterPaint" method rather then the "Paint" method as described in the documentation. Overriding the "Paint" did nor result in any drawing.

Second question...

When I do use the "AfterPaint" method to draw a little down pointing arrow its offset right by about 5 pixels until the button gets focus. Just hovering over the button does not appear to fix the problem (as you would expect a repaint to occur). I have tied this with and without the "ScalePoint" in the code and every time its wrong. It also shows in the wrong position at design time. As soon as the button is gets focus at runtime the arrow moves to the expected position. When it looses focus it moves back to the wrong position. FYI. The "Width" is not changing - I have tested for that.

procedure TLFButton.AfterPaint;
var
  down_arrow: TPolygon;
  x, y: Extended;
begin
  inherited;
  if FDropDownButton then
  begin
    Canvas.Fill := TText(FindStyleResource('text')).Fill;
    x := Width - 12;
    y := (Height / 2) - 3;
    SetLength(down_arrow, 3);
    down_arrow[0] := ScalePoint(PointF(x, y), Scale.X, Scale.Y);
    down_arrow[1] := ScalePoint(PointF(x+8,y), Scale.X, Scale.Y);
    down_arrow[2] := ScalePoint(PointF(x+4,y+6), Scale.X, Scale.Y);
    Canvas.FillPolygon(down_arrow, 255);
  end;
end;

Answer 1

A different approach is to use a StyleLookup. By using a StyleLookup, a designer is able to change the down pointing arrow without changing the code.

constructor TLFButton.Create(AOwner: TComponent);
begin
  inherited;
  FDropDownButton := true;
end;

procedure TLFButton.SetDropDownButton(const Value: boolean);
var
  obj: TFmxObject;
begin
  FDropDownButton := Value;
  obj := FindStyleResource('dropdownbutton');
  if obj is TControl then
    TControl(obj).visible := Value;
end;

Save code below in a LFButton.Style text file and load it in a StyleBook. TPath = the little down pointing arrow.

object _1: TLayout
  Align = alClient
  Position.Point = '(0,33)'
  Width = 842.000000000000000000
  Height = 715.000000000000000000
  object TLayout
    StyleName = 'LFButtonStyle'
    Position.Point = '(375,345)'
    Width = 91.000000000000000000
    Height = 24.000000000000000000
    DesignVisible = False
    object TRectangle
      StyleName = 'background'
      Align = alContents
      Width = 91.000000000000000000
      Height = 24.000000000000000000
      HitTest = False
      Fill.Kind = bkGradient
      Fill.Gradient.Points = <
        item
          Color = claWhite
        end
        item
          Color = xFFFEFEFE
          Offset = 0.472727268934249900
        end
        item
          Color = xFFDDDDDD
          Offset = 0.512727260589599600
        end
        item
          Color = xFFDBDBDB
          Offset = 1.000000000000000000
        end>
      Stroke.Color = xFF989898
      XRadius = 3.000000000000000000
      YRadius = 3.000000000000000000
      object TGradientAnimation
        Duration = 0.200000002980232200
        Trigger = 'IsMouseOver=true;IsPressed=false'
        StartValue.Points = <
          item
            Color = claWhite
          end
          item
            Color = xFFFEFEFE
            Offset = 0.472727268934249900
          end
          item
            Color = xFFDDDDDD
            Offset = 0.512727260589599600
          end
          item
            Color = xFFDBDBDB
            Offset = 1.000000000000000000
          end>
        StopValue.Points = <
          item
            Color = xFFA5D9FF
          end
          item
            Color = xFFA5D9FF
            Offset = 0.472727268934249900
          end
          item
            Color = xFFA5D9FF
            Offset = 0.512727260589599600
          end
          item
            Color = xFFA5D9FF
            Offset = 1.000000000000000000
          end>
        PropertyName = 'Fill.Gradient'
      end
      object TGradientAnimation
        Duration = 0.200000002980232200
        Trigger = 'IsMouseOver=false;IsPressed=false'
        StartValue.Points = <
          item
            Color = xFFA5D9FF
          end
          item
            Color = xFFA5D9FF
            Offset = 0.472727268934249900
          end
          item
            Color = xFFA5D9FF
            Offset = 0.512727260589599600
          end
          item
            Color = xFFA5D9FF
            Offset = 1.000000000000000000
          end>
        StopValue.Points = <
          item
            Color = claWhite
          end
          item
            Color = xFFFEFEFE
            Offset = 0.472727268934249900
          end
          item
            Color = xFFDDDDDD
            Offset = 0.512727260589599600
          end
          item
            Color = xFFDBDBDB
            Offset = 1.000000000000000000
          end>
        PropertyName = 'Fill.Gradient'
      end
      object TColorAnimation
        Duration = 0.200000002980232200
        Inverse = True
        Trigger = 'IsMouseOver=false;IsPressed=true'
        StartValue = xFF34BFFE
        StopValue = xFFA5D9FF
        PropertyName = 'Fill.Color'
      end
      object TColorAnimation
        Duration = 0.200000002980232200
        Trigger = 'IsMouseOver=true;IsPressed=true'
        StartValue = xFF34BFFE
        StopValue = xFFA5D9FF
        PropertyName = 'Fill.Color'
      end
    end
    object TText
      StyleName = 'text'
      Align = alClient
      Position.Point = '(5,3)'
      Locked = True
      Width = 66.000000000000000000
      Height = 18.000000000000000000
      Padding.Rect = '(5,3,5,3)'
      HitTest = False
      Text = 'button'
    end
    object TGlowEffect
      Trigger = 'IsFocused=true'
      Enabled = False
      Softness = 0.200000002980232200
      GlowColor = x82005ACC
      Opacity = 0.899999976158142100
    end
    object TLayout
      Align = alRight
      Position.Point = '(76,0)'
      Locked = True
      Width = 15.000000000000000000
      Height = 24.000000000000000000
      object TPath
        StyleName = 'dropdownbutton'
        Align = alCenter
        Position.Point = '(3,9)'
        Width = 8.000000000000000000
        Height = 5.000000000000000000
        HitTest = False
        Fill.Color = claBlack
        Stroke.Kind = bkNone
        Data.Path = {
          04000000000000000000000000000000010000000000803F0000000001000000
          0000003F0000803F030000000000000000000000}
      end
    end
  end
end