Monday, September 30, 2019

Did you try to design an FMX-Style?

Do you like the styles that are included or downloadable from getit?

Perhaps you have tried to design your own style with the Bitmap-Style-Designer. 

Did it work for you?

Perhaps the problem is, that the Style-Designer is more on the VCL side... Let's take a look. First create a new "Modern Windows Style". There are two color entries (Colors and SysColors) Let's set all Colors to green (Except three that are really needed) and all SysColors to Cyan except the only two that are used from here. Then it looks like this:


If you change a color like "Window" (I did orange) the color value is not indexed to all components, the color is copied to the components. Like:



Perhaps it's a feature to be able to change this color...

Hmm, and where did I already set the font- /back-colors to white/black? 



OK, some colors are not set over color values, because the color is rendered from the bitmap.

Take a look at the edits.


Wow the Edit background is lighter, but how to set background color? It's set by this bitmap. The background of this image-part has just a  not 100% transparent Alphacolor. 



The Run-Test-Button is helpful, because you can change something and check the results... Like this:

That is colorful - but where are all their colors from? Not from the color settings - too bad! These colors are set under Listbox (but not all).

Listbox Header - two different colors - but not set with the header:


If you think this is perhaps set with PlainHeader, no PlainHeader is the Teal-Group Header and of course always the Font-Color not the Color entry. It would be to easy just set PlainHeader.Text.Color := clBlack. and this property will also set the Fontcolor. The blue GroupHeader is set by GroupHeader.Text.Font.Color and BottomDetail.Text is also set with BottomDetail.Text- that's fine. DetailText is correct. PlainItem is not PlainItem. DetailText2 is not Detail it is the ItemText5 and Detail from this is set with BasicText2. Get confused?
Scroll down there is a single entry for ListBoxHeaderLabel - this is the other ListBoxHeader. The other (Black ListBoxHeader) is not set under Listbox, because this is a ToolLabel and set under ToolLabel. This is the same for the ListItemButton.Text.


And this colors?
Purple backgrounds are set with - roll drum - clBtnFace under Syscolors. This is also the color for the Splitter.


The yellow border is set under Colors - Border.
But where to set the Arc and the CornerButton? This is not set by the Bitmap...


Here comes the best part. The CornerButton is set with a gradient and the gradient has two colors.
And no - the color is not set over Color and of course not set over Font.Color the Color value hast Du be set over PARAMS! But don't forget to switch From ARGB to ABGR (Blue and Red color switch places)

This is not a complete list of problems with the colors and I did not test this colors with a real world app so far. I did not test this on all platforms. I will try to implement some kind of color - converter - post-setup for the styles... 

So stay tuned.

PS.: Here is a litte update!

1 comment: