Posts from December 2012

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.

MonkeyStyler Build 12: Component Palette

MonkeyStyler build 12 is now available. The main change is a new component palette, ver much like you’re used to in Delphi. Search (except in the XE2 edition), select and click on the components tree or control preview to add a new component. You can also use drag and drop.

Other improvements are drag and drop support in the components tree and a fix for a bug which caused errors at startup on computers where the regional settings for a decimal separator where not a period (.).

Full changelist
Added: Component palette with search and highlighting of search terms.
(Note search is unavailable in XE2 due to treeview issues.
Added: Select component on Palette and click on Component Tree of Viewer to add it.
Fixed: Editing StyleName property caused editor to lose focus.
Fixed: Work around for effects not updating in Control Viewer (QC 110506).
Added: Drag/drop support to the components tree.
Fixed: Errors at start up if decimal separator was a comma in users regional settings.