Using TBitmapLinks with the FireMonkey Style Designer

Question

I have been styling FireMonkey controls, but there is one issue that I have been having some real issues with, and that is how to incorporate bitmaps into FireMonkey styles

Answer 1

I think there is a difference between the bitmap embedded in the .style file (embedded as a resource) and the one stored in the file (C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles\MetropolisUIGreen.png, that is 519x760).

The embedded bitmap seems to be different in size than the external file (you can check that by looking in the Style Editor, selecting the metrogreenstyle.png node, opening the property editor for MultiResBitmap and looking at the image size provided for Scale 1.00: 750x850.

This explains why coordinates seems all wrong. I don't know if it is the external file to be out of date or the opposite.

HTH!

Update: I managed to extract the bitmap stored in the .style file and I can confirm the coordinates are relative to that bitmap!

Update(2): .Style files and .fmx file are very similar so you can do:

1) open MetropolisUIGreen.Style with a text editor and locate the embedded bitmap (line 18), you can see:

object TImage
    StyleName = 'MetroGreenstyle.png'
    MultiResBitmap = <
      item
        Width = 0
        Height = 0
        PNG = {...}

2) create a new FMX application, add a TImage on the form and load a bitmap (any picture you want)

3) copy the PNG value from the .Style file into the XFM file. Beware to also fix the Width and Height properties:

MultiResBitmap = <
  item
    Width = 750
    Height = 850
    PNG = {...}

4) you should be able to see the picture at design time;

5) add a button with Image1.Bitmap.SaveToFile('C:\temp\new_file.png'); run the program and save the file to your disk. :-)

Answer 2

I'd like to verify Andreas solution. This is what I did.

1. Exported the .png as Andrea described
2. Opened the .png in Photoshop and changed some of the various objects
3. Saved the .png from Photoshop
4. Loaded it into the temp project TImage I used to export it in step 1.
5. Alt+F12 and copied the png content into the clipboard
6. Pasted it directly into my .style file (with Ultraedit)
7. Loaded the .style file in the style editor in Delphi

All the color changes was emediatly reflected in my design. Possibly there is a simpler way, but I don't know it. I did this in XE10 Seattle.