Search code examples
delphifiremonkey

How can I change the background color of Ttabitem of TTabcontrol in firemonkey?


How can I change the background color of Ttabitem of TTabcontrol in firemonkey ?


Solution

  • You can modify the StyleBook for your TabItem and add a color layer (e.g. tabcolor rectangle) like this:

    object TStyleContainer
      object TLayout
        StyleName = 'tabitemstylecolor'
        Position.X = 546.000000000000000000
        Position.Y = 397.000000000000000000
        Size.Width = 67.000000000000000000
        Size.Height = 26.000000000000000000
        Size.PlatformDefault = False
        TabOrder = 0
        object TTabStyleObject
          StyleName = 'top'
          Align = Contents
          ClipChildren = True
          Locked = True
          SourceLookup = 'Windows 10 Desktopstyle.png'
          Size.Width = 67.000000000000000000
          Size.Height = 26.000000000000000000
          Size.PlatformDefault = False
          ActiveTrigger = Selected
          ActiveLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 55.000000000000000000
              SourceRect.Top = 90.000000000000000000
              SourceRect.Right = 97.000000000000000000
              SourceRect.Bottom = 114.000000000000000000
            end>
          SourceLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 5.000000000000000000
              SourceRect.Top = 90.000000000000000000
              SourceRect.Right = 47.000000000000000000
              SourceRect.Bottom = 113.000000000000000000
            end>
          HotLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 105.000000000000000000
              SourceRect.Top = 90.000000000000000000
              SourceRect.Right = 147.000000000000000000
              SourceRect.Bottom = 113.000000000000000000
            end>
          ActiveHotLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 55.000000000000000000
              SourceRect.Top = 90.000000000000000000
              SourceRect.Right = 97.000000000000000000
              SourceRect.Bottom = 114.000000000000000000
            end>
          FocusedLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 5.000000000000000000
              SourceRect.Top = 90.000000000000000000
              SourceRect.Right = 47.000000000000000000
              SourceRect.Bottom = 113.000000000000000000
            end>
          ActiveFocusedLink = <
            item
              CapInsets.Left = 4.000000000000000000
              CapInsets.Top = 4.000000000000000000
              CapInsets.Right = 4.000000000000000000
              CapInsets.Bottom = 4.000000000000000000
              SourceRect.Left = 105.000000000000000000
              SourceRect.Top = 118.000000000000000000
              SourceRect.Right = 147.000000000000000000
              SourceRect.Bottom = 142.000000000000000000
            end>
          object TRectAnimation
            Duration = 0.000009999999747379
            PropertyName = 'Margins'
            StartValue.Left = -1.000000000000000000
            StartValue.Top = 2.000000000000000000
            StartValue.Right = -1.000000000000000000
            StopValue.Left = -1.000000000000000000
            StopValue.Right = -1.000000000000000000
            StopValue.Bottom = -2.000000000000000000
            Trigger = 'IsSelected=True'
            TriggerInverse = 'IsSelected=false'
          end
          object TGlyph
            StyleName = 'glyphstyle'
            Margins.Left = 4.000000000000000000
            Margins.Right = -4.000000000000000000
            Align = Left
            Size.Width = 16.000000000000000000
            Size.Height = 16.000000000000000000
            Size.PlatformDefault = False
          end
          object TColorAnimation
            StyleName = 'coloranimation1'
            Duration = 0.200000002980232200
            StartValue = xFF29F029
            StopValue = xFFEA1818
            Trigger = 'IsSelected=true'
            TriggerInverse = 'IsSelected=false'
          end
          object TRectangle
            StyleName = 'tabcolor'
            Align = Client
            Fill.Color = xFFE76565
            HitTest = False
            Size.Width = 67.000000000000000000
            Size.Height = 26.000000000000000000
            Size.PlatformDefault = False
          end
          object TTabStyleTextObject
            StyleName = 'text'
            Align = Client
            Locked = True
            Margins.Left = 8.000000000000000000
            Margins.Top = 4.000000000000000000
            Margins.Right = 8.000000000000000000
            Margins.Bottom = 4.000000000000000000
            Size.Width = 51.000000000000000000
            Size.Height = 18.000000000000000000
            Size.PlatformDefault = False
            TextSettings.WordWrap = False
            ShadowVisible = False
            ActiveTrigger = Selected
            ActiveColor = claBlack
            HotColor = claBlack
          end
        end
        object TLayout
          StyleName = 'bottom'
          Align = Contents
          ClipChildren = True
          Locked = True
          Size.Width = 67.000000000000000000
          Size.Height = 26.000000000000000000
          Size.PlatformDefault = False
          object TRectAnimation
            Duration = 0.000009999999747379
            PropertyName = 'Margins'
            StartValue.Left = -1.000000000000000000
            StartValue.Right = -1.000000000000000000
            StartValue.Bottom = 2.000000000000000000
            StopValue.Left = -1.000000000000000000
            StopValue.Top = -2.000000000000000000
            StopValue.Right = -1.000000000000000000
            Trigger = 'IsSelected=True'
            TriggerInverse = 'IsSelected=false'
          end
          object TTabStyleObject
            Align = Contents
            Locked = True
            SourceLookup = 'Windows 10 Desktopstyle.png'
            RotationAngle = 180.000000000000000000
            Size.Width = 67.000000000000000000
            Size.Height = 26.000000000000000000
            Size.PlatformDefault = False
            ActiveTrigger = Selected
            ActiveLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 55.000000000000000000
                SourceRect.Top = 90.000000000000000000
                SourceRect.Right = 97.000000000000000000
                SourceRect.Bottom = 114.000000000000000000
              end>
            SourceLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 5.000000000000000000
                SourceRect.Top = 90.000000000000000000
                SourceRect.Right = 47.000000000000000000
                SourceRect.Bottom = 113.000000000000000000
              end>
            HotLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 105.000000000000000000
                SourceRect.Top = 90.000000000000000000
                SourceRect.Right = 147.000000000000000000
                SourceRect.Bottom = 113.000000000000000000
              end>
            ActiveHotLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 55.000000000000000000
                SourceRect.Top = 90.000000000000000000
                SourceRect.Right = 97.000000000000000000
                SourceRect.Bottom = 114.000000000000000000
              end>
            FocusedLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 5.000000000000000000
                SourceRect.Top = 90.000000000000000000
                SourceRect.Right = 47.000000000000000000
                SourceRect.Bottom = 113.000000000000000000
              end>
            ActiveFocusedLink = <
              item
                CapInsets.Left = 4.000000000000000000
                CapInsets.Top = 4.000000000000000000
                CapInsets.Right = 4.000000000000000000
                CapInsets.Bottom = 4.000000000000000000
                SourceRect.Left = 105.000000000000000000
                SourceRect.Top = 118.000000000000000000
                SourceRect.Right = 147.000000000000000000
                SourceRect.Bottom = 142.000000000000000000
              end>
          end
          object TGlyph
            StyleName = 'glyphstyle'
            Margins.Left = 4.000000000000000000
            Margins.Right = -4.000000000000000000
            Align = Left
            Size.Width = 16.000000000000000000
            Size.Height = 16.000000000000000000
            Size.PlatformDefault = False
          end
          object TTabStyleTextObject
            StyleName = 'text'
            Align = Client
            Locked = True
            Margins.Left = 8.000000000000000000
            Margins.Top = 4.000000000000000000
            Margins.Right = 8.000000000000000000
            Margins.Bottom = 4.000000000000000000
            Size.Width = 51.000000000000000000
            Size.Height = 18.000000000000000000
            Size.PlatformDefault = False
            TextSettings.WordWrap = False
            ShadowVisible = False
            ActiveTrigger = Selected
            ActiveColor = claBlack
            HotColor = claBlack
          end
        end
      end
    end
    

    Which will result in:

    enter image description here