Firemonkey TButton style with two different texts

Question

I'm trying to create a virtual keypad, where each button has both a number and a few letters. For example, the number 2 will also have the text ABC next to it, in a smaller font size, and the number 3 will have DEF next to it.

I can successfully edit the custom style of these buttons one by one. A single button, I can drop a TText style element, change the alignment and text settings of each, and it works fine...

However, I have to do this one by one, customizing the style of each button by itself. If I try to re-use this style, the extra letters ABC will be the same on all keys. But I need them each to be different.

How can I make a single re-usable style which can also allow me to use varying sub-text in each button? Or will I have to create a unique style for each button?

I had to do something similar and at the end I created a custom style for each. Not the best idea but it worked — Alberto Miola, Apr 25 '17 at 16:46

score 6 · Accepted Answer · answered Apr 25 '17 at 18:05

You can do a workaround, set text StyleName of ABC Label to text and the StyleName of Number Label to Number.

Create a class that overrides the button class.

TButton = class(FMX.StdCtrls.TButton)
protected
  procedure ApplyStyle; override;
end;

procedure TButton.ApplyStyle;
  var NumberLabel : TLabel;
begin
  //That method will find for a label with stylename number and set the tag of component in it.
  inherited;
  if FindStyleResource<TLabel>('Number', NumberLabel) then
    NumberLabel.Text := IntToStr(Tag);
end;

Now set the style for all buttons. Text property will set text alphanumeric text and tag will set the Number. It will work only in runtime.

Firemonkey TButton style with two different texts

1 Answers1