Delphi XE2: Applying a Style to FireMonkey

It took me a little while to figure out how to apply a style to a fireMonkey application in Delphi XE2 so I thought I’d share the information here. The following information was obtained from the trial version that is now available for download.  First of all, create a fireMonkey application by going to the File menu and selecting FireMonkey HD Application – Delphi

With that you should find yourself with an empty FM form:

You’ll notice that I like the original tabbed interface for selecting components (just right-click over the tool bar and select component). With the new form in place I am now going to drop various controls to make my application.

The first thing I noticed is that there is no anchors property. The closest thing I could find was alScale in the Align property, however this stretches the control. If anyone knows how to anchor FM controls I would love to know. A couple of other points, there are no guides as one finds in the VCL designer and apparently I could not select multiple controls using the shift key, that’s a significant loss if true. Perhaps others will have better luck with these issues. Here is a completely made up form with random controls:

XE2 gives us the default style for the particular OS you’re running on. What if we wanted to override that style? It turns out to be relatively easy. All we do is select one of the panels and pick Edit Custom Style from the popup menu, this gives us the following new window:

From here we select the load button on the left and look for the style directory which on my computer can be found at:

C:\Program Files (x86)\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx

In this directory pick out a suitable style, for example, dark.style. Once we select Open and then Apply and Close we end up with the following look to our form:

 

I have to admit that the surrounding forms style doesn’t quite match the style of the form but still we get a new fresh look to our UIs.

Update 1: I was looking through the old VGScene forum messages and came across someone asking how to select multiple controls at design time, apparently it was not possible. This behavior therefore appears to have been carried over to fireMonkey. In the forum, the answer was to put your controls into layouts, which isn’t quite as convenient as using Shift and move. I hope in later releases selecting multiple controls will be restored.

Update 2: The anchors property in VCL has apparently been replaced by Margins and Padding (due to performance considerations) and I found some documentation at the XE2 wiki (http://docwiki.embarcadero.com/RADStudio/en/FireMonkey_Application_Design). I doubt if anchors will be put in at a later date. To anchor two buttons (Ok and Cancel) at the bottom of a form on the right side do the following, see image above.

Place a small panel aligned to the bottom on the form, say about 40 height. Set the ‘Margins’ on the bottom panel to create a smaller space in which the buttons will live, make sure you set the align the button to alRight. For example the gap between the right edge of the form and the right most button has a margin of 15. The top and bottom margins were set to 12.  That anchors the right most button.

‘Padding’ is the opposite to a margin, the padding puts space outside the control. To the right most button I added a padding of 20 to the *left* side, this will be the space between the two buttons. For the second button to the left of the first all we need to do is set the align property to alRight, no need to adjust the padding or margins.

Update 3: I just noticed that I have two copies of TScrollBar on the FM tabbed interface for selecting controls. As far as I can tell they are identical.

The scrollbar to the right of the rightmost circled component is the TSmallScrollBar.

Update 4: When changing a style at design time it is necessary to do an explicit compile project (Ctrl-F9) in order for the style to be applied.

Update 5: Possible bug in TColorComboBox? The color selection is displaced, see below:

Happens in a clean new project.

This entry was posted in Delphi, Programming, Software. Bookmark the permalink.

5 Responses to Delphi XE2: Applying a Style to FireMonkey

  1. hsauro says:

    That’s true, but its not obvious when it first happens.

  2. Orhan ODABA?I says:

    Hi,

    Multiple selection works, but selection handles disappear if multiple items are selected. You can move, delete vs. them….

  3. Thanks for the feedback. We have plans to introduce Anchor support in FireMonkey.

  4. hsauro says:

    Anchors are definitely easier to use. I’ve not yet tried a more complicated arrangement than above but in my VCL apps I use anchors a lot. There is a possibility that anchors will be reintroduced in a later release. I’m beginning to think that FMX 1.0 is equivalent to VCL 1.0 in Delphi 1. An email from Embarcadero suggested that they are going to try and do more frequent updates for XE2. It definitely needs it because I think there are too many issues at the moment to make FMX a viable platform for complex graphical user interfaces. The next couple of months is likely to determine the future of FMX.

  5. Lars Fosdal says:

    Margins and Padding vs Anchor. This means that if you want to do complex anchoring (such field stretching on resize, you have to use several layers of panels. Anchor was added to VCL to avoid layers of panels for performance, hence I have some reluctance to accept that the opposite should be true for FMX?
    VCL also have Margins and Padding, which ensure spacing to neighbouring or surrounding controls. For reasons unknown – the effect of the values in Margins and Padding – are opposite between VCL and FMX.

Leave a Reply

Your email address will not be published.