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 using the FireMonkey Style Designer (and specifically not the Bitmap Style Designer). Certain styled objects (TButtonStyleObject, for example), have BitmapLink properties, but I cannot see how they are working in the new custom styles that are generated for a FireMonkey control.

Let me try to make the problem as transparent as possible. I add a StyleBook and set its Resource to the MetropolisUIGreen.Style in Delphi's Style directory (in XE7 this is located in C:\Users\Public\Documents\Embarcadero\Studio\16.0\Styles). I then open the FireMonkey Style Designer and locate the buttonstyle style, which consists of a TButtonStyleObject and a TButtonStyleTextObject, both parented to a TLayout. The TButtonStyleObject has a SourceLookup property value of MetroGreenstyle.png, which is a StyleName assoiated with a TImage into which the MetropolisUIGreen.png image has been loaded.

With the TButtonStyleObject (whose StyleName is background) selected, I examine the NormalLink property, which is a collection of TBitmapLinks. It is my understanding that the one BitmapLink that I see defined in NormalLink contains information about the bitmap that should be used for the button, including the coordinates (SourceRect) corresponding to a rectangular region of the MetroGreenstyle.png file.

My assumptions appear to be wrong, because when I examine MetroGreenstyle.png using a graphics program, there is nothing interesting at these coordinates. I have examined the BitmapLinks of many other styles, and there too I find that the SourceRect coordinates do not seem to actually define a meaningful region of the stylelookup png file.

I obviously have this wrong. How does the SourceRect coordinates of a BitmapLink define the bitmap that FireMonkey should use when rendering a control.

-- Edit I actually asked four question. I have updated this question to include just one question. I will include the other questions in another post. --

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.