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?

Answer 1

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.