Search code examples
delphifiremonkeydelphi-11-alexandriafiremonkey-style

How to customize Combobox dropdown List background (trasparet and make it rounded if posible) in delphi 11.3 FMX


I am tring to make a rounded combobox and a the dropdown trasparent (and rounded if posibole )

and so far all i can thik of is that i can put it inside a rectangel and edit the background style of the combobox to trasparent but ... the dropdown List Background is not trasparent and from what i read from this Post https://blog.andreamagni.eu/2021/11/customizing-tcombobox-dropdown-in-fmx/ it's bien handel by another style of Listbox i tried what he said in the post but it's not working so is there anythin that i am missing or it's a dephi vertion problem (I am using the latest vertion of delphi 11.3 in FMX fram work)


Solution

  • It still works fine for me, see the attached screenshots. You're missing the combopopupstyle part. Here is the content of a .style file:

    object TStyleContainer
      object TRectangle
        StyleName = 'ListBoxstyle'
        Align = Center
        Fill.Color = x3060BBFF
        HitTest = False
        Margins.Bottom = 2.000000000000000000
        Size.Width = 200.000000000000000000
        Size.Height = 200.000000000000000000
        Size.PlatformDefault = False
        Stroke.Kind = None
        Stroke.Thickness = 0.000000000000000000
        Visible = False
        XRadius = 12.500000000000000000
        YRadius = 12.500000000000000000
        object TScrollBar
          StyleName = 'vscrollbar'
          Align = Right
          SmallChange = 0.000000000000000000
          Orientation = Vertical
          Margins.Top = 7.000000000000000000
          Margins.Right = 3.000000000000000000
          Margins.Bottom = 7.000000000000000000
          Position.X = 189.000000000000000000
          Position.Y = 7.000000000000000000
          Size.Width = 8.000000000000000000
          Size.Height = 186.000000000000000000
          Size.PlatformDefault = False
          StyleLookup = 'ListBoxstyleScrollBarStyle'
          TabOrder = 1
        end
        object TLayout
          StyleName = 'content'
          Align = Client
          ClipChildren = True
          Margins.Left = 3.000000000000000000
          Margins.Top = 3.000000000000000000
          Margins.Right = 4.000000000000000000
          Margins.Bottom = 3.000000000000000000
          Size.Width = 182.000000000000000000
          Size.Height = 194.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 2
          object TRoundRect
            StyleName = 'selection'
            Fill.Color = x40AAAAFF
            HitTest = False
            Size.Width = 50.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Stroke.Kind = None
          end
        end
      end
      object TRoundRect
        StyleName = 'ComboBoxStyle'
        Align = Center
        Fill.Color = x60000000
        HitTest = False
        Size.Width = 150.000000000000000000
        Size.Height = 24.000000000000000000
        Size.PlatformDefault = False
        Stroke.Kind = None
        Stroke.Thickness = 0.000000000000000000
        Visible = False
        object TPath
          StyleName = 'arrow'
          Align = Right
          Data.Path = {
            26000000000000007F0A8D43A2059942010000006DE78543B7F3784202000000
            F8F38443F95371420200000086DB83432C876D4202000000779E82432C876D42
            020000002D6281432C876D4202000000DB498043F953714202000000CDAC7E43
            B7F37842010000004C770E43E5702E43010000009318F241C9F6784202000000
            3BDFE2410B577142020000001C5AD1413E8A6D42020000005C8FBD413E8A6D42
            020000008FC2A9413E8A6D4202000000703D98410B5771420200000025068941
            C9F6784201000000B4C83640AE079942020000003333733F81D59C4202000000
            00000000C936A1420200000000000000FC29A6420200000000000000291CAB42
            02000000CFF7733F717DAF4202000000B4C83640444BB3420100000025E60743
            69B15E43020000000ECD09439498604302000000F4FD0B43098C614302000000
            4C770E43098C614302000000A4F01043098C6143020000008320134394986043
            020000002B07154369B15E43010000007F0A8D43444BB34202000000F4FD8D43
            EE7CAF4202000000E9768E43A61BAB4202000000E9768E43FC29A64202000000
            E9768E43C936A14202000000F4FD8D4381D59C42020000007F0A8D43A2059942
            030000007F0A8D43A2059942}
          Fill.Color = claWhite
          HitTest = False
          Margins.Top = 9.000000000000000000
          Margins.Right = 9.000000000000000000
          Margins.Bottom = 9.000000000000000000
          Position.X = 131.000000000000000000
          Position.Y = 9.000000000000000000
          Size.Width = 10.000000000000000000
          Size.Height = 6.000000000000000000
          Size.PlatformDefault = False
          Stroke.Color = claNull
          Stroke.Thickness = 0.000000000000000000
          WrapMode = Fit
        end
        object TLayout
          StyleName = 'content'
          Align = Client
          Locked = True
          Margins.Left = 3.000000000000000000
          Margins.Top = 3.000000000000000000
          Margins.Bottom = 3.000000000000000000
          Size.Width = 128.000000000000000000
          Size.Height = 18.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 1
        end
      end
      object TLayout
        StyleName = 'combopopupstyle'
        Align = Center
        Size.Width = 50.000000000000000000
        Size.Height = 50.000000000000000000
        Size.PlatformDefault = False
        Visible = False
        TabOrder = 12
      end
      object TLayout
        StyleName = 'ListBoxItemstyle'
        Align = Center
        Size.Width = 150.000000000000000000
        Size.Height = 24.000000000000000000
        Size.PlatformDefault = False
        Visible = False
        TabOrder = 16
        object TActiveStyleTextObject
          StyleName = 'text'
          Align = Client
          Margins.Left = 8.000000000000000000
          Margins.Top = 1.000000000000000000
          Margins.Right = 8.000000000000000000
          Margins.Bottom = 1.000000000000000000
          Size.Width = 134.000000000000000000
          Size.Height = 22.000000000000000000
          Size.PlatformDefault = False
          Text = 'Text'
          TextSettings.WordWrap = False
          TextSettings.HorzAlign = Leading
          ShadowVisible = False
          ActiveTrigger = Selected
          ActiveColor = claBlack
        end
      end
      object TLayout
        StyleName = 'ListBoxstyleScrollBarStyle'
        Align = Center
        Size.Width = 200.000000000000000000
        Size.Height = 200.000000000000000000
        Size.PlatformDefault = False
        Visible = False
        TabOrder = 3
        object TTrack
          StyleName = 'vtrack'
          Align = Client
          Locked = True
          Orientation = Horizontal
          Margins.Left = 1.000000000000000000
          Size.Width = 199.000000000000000000
          Size.Height = 200.000000000000000000
          Size.PlatformDefault = False
          StyleLookup = 'vscrollbarscrollbarvtrackstyle'
        end
      end
      object TRoundRect
        StyleName = 'vscrollbarscrollbarvtrackstyle'
        Align = Center
        Fill.Color = x15000000
        HitTest = False
        Size.Width = 6.000000000000000000
        Size.Height = 316.000000000000000000
        Size.PlatformDefault = False
        Stroke.Kind = None
        Stroke.Thickness = 0.000000000000000000
        Visible = False
        object TThumb
          StyleName = 'thumb'
          Locked = True
          Size.Width = 6.000000000000000000
          Size.Height = 50.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 0
          object TRoundRect
            StyleName = 'scrollthumb'
            Align = Contents
            Fill.Color = x30000000
            HitTest = False
            Size.Width = 6.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Stroke.Kind = None
            Stroke.Thickness = 0.000000000000000000
          end
        end
      end
    end
    

    Style file structure Resulting styled ComboBox