Create A Custom Styled Firemonkey Component With The Delphi IDE

Andrea Magni has a blog post up that explains a simple method for creating a custom styled control using the Delphi IDE. This lets you bypass the Style Designer. The sample control that he builds is called TGmailLabel because it has a similar look and feel to an element from Gmail. The interesting thing here is that he builds the control that he wants on a normal FMX form and then does ‘View as Text’ on the form to get to the form objects as text. He then copies the form objects as text and puts them straight into a style file. Apparently form objects as text and style files have very similar formats. It looks like the component names are stripped out, any positioning of the main object is removed, and a StyleName line is added to each object. Here is a sample of the style below:

Delphi/Pascal

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

objectTLayout

StyleName='GMailLabelstyle'

Height=25.000000000000000000

Width=100.000000000000000000

objectTRectangle

StyleName='labelRect'

Align=alClient

Height=25.000000000000000000

Sides=[]

Width=75.000000000000000000

objectTText

StyleName='labelText'

Align=alClient

Color=claBlack

Height=21.000000000000000000

HitTest=False

Margins.Left=2.000000000000000000

Margins.Top=2.000000000000000000

Margins.Right=2.000000000000000000

Margins.Bottom=2.000000000000000000

Text='label'

Width=71.000000000000000000

end

The example source code comes with the free TGmailLabel control so you get a free Delphi Firemonkey component too. The resulting component is cross platform and works on IOS, Android, OSX, and Windows. The blog is in Italian and the link auto translates it for you via Google Translate.