Customizing TComboBox dropdown in FMX

Yesterday a customer asked me about customizing the FMX dropdown in order to make it consistent with the rest of UI. Specifically, we were trying to change the background of the dropdown list to a semitransparent color. Even if this sounded trivial to me at first, it turned out to be a little tricky, hence this blog post (and also the Quality Center issue RSP-36079).

First thing I tried was to customize the TComboBox style and change the background but soon I noticed the background element included was the one defining the combobox background when it’s closed and it has nothing to do with the dropdown list.

After digging a bit around the TComboBox source code, I understood:

1. a TListBox instance is used internally by TComboBox to render the dropdown list;
2. I already knew it was possible to customize a TListbox appearance through style;
3. there is a ListBoxResource property in TComboBox class that is supposed to be the way you drive the style selection (affecting StyleLookup property) of the actual TListBox instance used as dropdown;

The tricky thing is that you also have to set DropDownKind property to Custom to make everything work, otherwise (when DropDownKind = Native) you’ll never see your custom listbox style applied to the dropdown.

The following screenshot shows the combobox with the dropdown list opened. On the left you can see a TListBox instance I’ve used to customize the listbox style in the IDE. You can also notice the combobox and the listbox are actually semi-transparent as I’ve placed a TRectangle instance in the background to emphasize it.

If you look with attention, however, you’ll notice the dropdown is not actually semi-transparent: there’s something in between the styled listbox and the background. It is the Popup the combobx uses to host the listbox. It has its own style (‘combopopupstyle’) that is probably somehow “solid” in the Win10 FMX default style.

You can add a TLayout instance to the TStyleBook instance on your form to override the combopopupstyle definition (just set its StyleName property to ‘combopopupstyle’).

This is the final effect:

Hope this can be useful to others.

Andrea