Custom Firemonkey style - linking properties between control and style?

Question

Delphi XE-6

I am trying to create my own style for a TGroupBox control.

I looked at numerous demos and tutorials, but can't seem to figure this one out.

How do you make the text from the control become blank and show up on the style's text control instead?

I know it has to do with the StyleName, but I dont know what i am doing wrong.

Can someone provide a simple example? For example, a TGroupbox - has a caption at top, but what if you want to have it on a banner part way down from top. Creating the banner i can do, but how can i then link the text item on the banner with the caption property of the control?

thanx

Answer 1

You don't have to do the linking yourself.

The FireMonkey controls do it themselves:

function TPresentedTextControl.FindTextObject: TFmxObject;
begin
  Result := FindStyleResource('text'); // Do not localize
end;

Make sure that the text control in your StyleBook is named text.

I've made a small example like this:

object TStyleContainer
  object TLayout
    StyleName = 'grouboxstylebottom'
    Padding.Left = 2.000000000000000000
    Padding.Top = 8.000000000000000000
    Padding.Right = 2.000000000000000000
    Padding.Bottom = 2.000000000000000000
    Position.X = 410.000000000000000000
    Position.Y = 360.000000000000000000
    Size.Width = 120.000000000000000000
    Size.Height = 100.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 0
    object TStyleObject
      StyleName = 'background'
      Align = Client
      CapMode = Tile
      Locked = True
      SourceLookup = 'Windows 10 Desktopstyle.png'
      Size.Width = 116.000000000000000000
      Size.Height = 90.000000000000000000
      Size.PlatformDefault = False
      WrapMode = Tile
      SourceLink = <
        item
          CapInsets.Left = 2.000000000000000000
          CapInsets.Top = 2.000000000000000000
          CapInsets.Right = 2.000000000000000000
          CapInsets.Bottom = 2.000000000000000000
          SourceRect.Left = 166.000000000000000000
          SourceRect.Top = 83.000000000000000000
          SourceRect.Right = 213.000000000000000000
          SourceRect.Bottom = 130.000000000000000000
        end>
      object TPanel
        StyleName = 'banner'
        Align = Bottom
        Position.Y = 70.000000000000000000
        Size.Width = 116.000000000000000000
        Size.Height = 20.000000000000000000
        Size.PlatformDefault = False
        TabOrder = 0
      end
      object TText
        StyleName = 'text'
        Align = Bottom
        ClipParent = True
        Locked = True
        HitTest = False
        Margins.Left = 1.000000000000000000
        Margins.Top = 2.000000000000000000
        Margins.Right = 1.000000000000000000
        Margins.Bottom = -15.000000000000000000
        Position.X = 1.000000000000000000
        Position.Y = 70.146484375000000000
        Size.Width = 114.000000000000000000
        Size.Height = 14.853515625000000000
        Size.PlatformDefault = False
        Text = 'Groupbox'
        TextSettings.Font.Family = 'Showcard Gothic'
        TextSettings.WordWrap = False
      end
    end
  end
end

So the final control will look like this:

Set the StyleLookup of your GroupBox to groupboxstylebottom in this case.