How do you Change the Color of a Panel in FireMonkey?

The above is a question which comes up frequently from newbies to FireMonkey. It’s an important question, and answering it opens the door to learning a lot of the power of FireMonkey.

The Short Answer
The short answer is: In FireMonkey the appearance of a control comes from the style. So, to change the appearance you need to change the style.

The Long Answer
Let’s look at how to do that in detail. Fire up XE3, start a new project and add two TPanels to the form.

Right click on a panel and select Edit Default Style.

The Structure Pane shows the style for the panel, ‘panelstyle’. Select it to edit it.

Now make some edits, in my case I’ve changed the Fill.Kind property to bkGradient and the Stroke.Thickness and Stroke.Dash properties.

Click Apply and Close to return to the form.

Note that the IDE has made a few changes for you here, it has:
* Added a TStyleBook to the form (StyleBook1).
* Set the form’s StyleBook property to StyleBook1.

The StyleBook contains the styles which have been modified for this form. In this case we have modified the default style for a TPanel. In other words we have added a style for a panel to the stylebook and this has overridden the default style of the app (note how both panels have changed to the new style).

Custom Styles

But suppose you only want to change the style for just one or two panels instead of all of them. This time, right click on a panel an select Edit Custom Style.

Notice now that the IDE has created a custom style for us, panel1style1.

Let’s make some more changes and again click Apply and Close. I’ve now changed the gradient to some funky colors and set the Stroke.Kind to bkNone.

Look at the properties for the panel and you’ll note that the StyleLookup is set to Panel1Style1, the name of the custom style the IDE created for us.

Changing the StyleLookup property tells FireMonkey to look for a style other than the default one. Now set the StyleLookup for the other panel to Panel1Style1 and you’ll see both panels using the same custom style.

You can use the same process to create as many different panel styles as you want, or to change the styles for other classes of controls.

Note: If you’re using XE2, some of the property names of the TRectangle will be slightly different, but otherwise everything works the same.

Commenting is not available in this channel entry.