Change the background color of a TEdit

[dummzeuch 1505]

Some things that were obvious in the VCL apparently are not in FMX.

 

I want to change the background color of a single control on a form, e.g. set a TEdit control which failed input validation to yellow. This must not affect the color of the other controls on the form.

 

In the VCL I would simply set TheEdit.Color := clYellow. An FMX TEdit does not have a Color property. Instead apparently one has to use styling, controlled by the properties StyledSettings, StyleLookup and StyleName.

 

Am I missing something? How can I accomplish this?

Edited November 1, 2018 by dummzeuch

[Sherlock 663]

Off the top of my head, how about putting a client aligned yellow panel rectangle inside the TEdit, HitTest and TabStop set to False, then set its visibility to whatever you need. Untested idea.

Edith adds the need for transparency.

[Sherlock 663]

Tried it, and this is what it looks like:

 

To the edit I added this line of code to the OnChangeTracking Event:

procedure TForm20.Edit1ChangeTracking(Sender: TObject);
begin
  Rectangle1.Visible := Edit1.Text.Length > 5;
end;

That's it.

[dummzeuch 1505]

Thanks, that is a workaround I could use. But what about changing the actual background color of a control? Is that not possible at all?

[Sherlock 663]

There seems to be a tradeoff going on between VCL-flexibility and FMX-platform...ummm...style adaption. I'm pretty sure you might be able to achieve this with the style thingy, but I never quite understood that. Every time I try to use it, it just frustrates me and I end up building quick workarounds like this. Pretty sad. Does anyone have a nice tutorial for the FMX Style Designer?

[Markus Kinzler 174]

The "official" way is to create a new style with a copy of the component and switch at runtime.

[Sherlock 663]

But how?

[Kryvich 165]

Documentation says that FireMonkey provide a great deal of customizations without subclassing. I found this:

1. Prepare PNG for ActiveLink and SourceLink backgrounds.
2. Right click on the edit.
3. Edit customs style...
4. Select EditStyle.Background
5. Double click ActiveLink
6. Add your PNG image.
7. Adjust positions for SourceLink and ActiveLink.

How to make it easier and more correct - you decide.

P.S. FMX is multiplatform so you may have to make a style for each platform for which the program is intended.

Edited November 1, 2018 by Kryvich

[Rollo62 536]

Just a fast test ...

You can e.g. add a custum style by rightclick on the Edit1.

This will open Stylebook, with some automatic naming.
I usually use my own names, e.g. with starting "_", to easier find them again in that possible long list of styles.

Analyse the control, and add or change what you like.
E.g. you can add TRectangle in the style, as I did here.
Other controls may have direct access to colors, rectangles, etc.
With the added rectangle, you can add a specific name, here "background_rect", and you can find and access this as you wish.

! The Edit1.StyleLookup must of coarse now get the new style name "_myeditstyle", to switch to that.

 

I hope that helps to show one possible options howto customize the styles.

Rollo

T223_EditStyle.zip

[Andrea Raimondi 13]

Just find the corresponding style resource.

The colour is there.

[John Kouraklis 94]

The "Edit Custom Style..." does not exist any more.

 

As said, the official (cross-platform) way to change the background is to use a style.

 

Although this is not what you are asking, try to use a glow effect (yellow or red) on the edit field instead a yellow rectangle. Super easy to implement and the effect looks cool in all platforms 🙂 

[Rollo62 536]

You mean "Edit Custom Style..." will be gone in 10.3, because I still have it stioll available in 10.2.3 ?
This would be a major change in possibilities of the style system, from where do you have that information ?

[Andrea Magni 75]

9 hours ago, John Kouraklis said:

The "Edit Custom Style..." does not exist any more.

???

 

I would really go for customizing the EditStyle (use "Edit Custom Style", beware you might need to do this for each platform you are targeting) and then set the StyleLookup property of your edits accordingly.

 

Doesn't matter then how you decide to customize the style (add a TRectangle, change the style's bitmap, add an effect) and you'll have a consistent behavior as you will be following the DRY principle (one style definition, many edits using it so if you'll ever need to change the visual aspect of your "edit_invalid" style, you'll have a single place to edit and have the change propagated automatically).

 

The other way is to actually manipulate the standard edit style (through some call to FindStyleResource) but that may lead to future issues for example if you'll change the style of your application one day or another (new style, different definition of editstyle).

 

HTH,

Andrea

 

[Tommi Prami 130]

Once tried to do something like this on FMX, 1. Could not get it to look right 2. Was so much work. 

 

Memory of the process is very vague, tried to make some style thingy and use that.

 

My observation was so that some things on Fmx are very complicated. Easier to make style than totally new VCL component with similar support build in, maybe. it depends I guess.

 

Should give fmx a new change, do simple project with it.

 

-Tee-

[Rollo62 536]

This is all right, I use it only on more primitive controls.
But the style concept of FMX is so much more than only changing PNG images.

Its possible to add components, animations, etc.

You're right, the existing style elements are sometimes hard to configure, but EMBT has added e.g. the TStyleColor Object to ease at least re.coloring.
But for own styles you can do a lot more.

Rollo

[John Kouraklis 94]

12 hours ago, John Kouraklis said:

The "Edit Custom Style..." does not exist any more.

Correction....this option exists only when  you drop components in a form.

 

If it happens to use frames (as I do all the time), this option is not available 

[Markus Kinzler 174]

Quote

Correction....this option exists only when  you drop components in a form.

This features has needed the component from the beginning; this isn't new.

The components on the frame should inherit the styles from their parent Form.

[Rollo62 536]

57 minutes ago, John Kouraklis said:

If it happens to use frames (as I do all the time), this option is not available 

Right, I use a separate form for the Styles editing, and preparing a StyleBook component.

With that Stylebook, you can copy and paste by the way, you can use them in other Frames etc. too.
The nice thing is that the StyleName property is visible project-wide, and can be used everywhere.
Once you have a knd of "common stylebook", its possible to reuse this.
Unfortunately the Style system is far from easy to use, but thankfully EMBT offered the export as .style in text.
If this option would not be there, I would not touch styles either.
 

Edited November 2, 2018 by Rollo62

[John Kouraklis 94]

7 minutes ago, Rollo62 said:

With that Stylebook, you can copy and paste by the way, you can use them in other Frames etc. too.

Yes true.

Many times, I copy paste the text in the style file directly. This can be complicated if you have complex objects (components, animation, layouts, etc.) but after a while you grasp the hierarchy of objects in the style-file

[domus 1]

Back in the days of XE2, this was as easy as

 

TRectangle(Edt.FindBinding('background')).Fill.Color := claYellow;

 

 

Today, ai caramba! You'd have to put an extra TRectangle inside the style, just below the "background" element, set its StyleName to "rect", set HitTest to false, set Align to Contents and then access it through

 

TRectangle(Edt.FindStyleResource('rect')).Fill.Color := TAlphaColorRec.Yellow;

 

I'm sure they'll soon find even more devious ways to scare people away from FMX.

Edited November 5, 2018 by domus

[Rollo62 536]

I almost forgot XE2 already, beside the name, and only that I was very exited about the possibilites of FMX 🙂

 

More problematic than the 'rect' I find the FindStyleResource, which not always gives a valid result.

So you should take care when and where you ask for FindStyleResource, because sometimes you will get nil.

 

I changed all my settings usually from FormCreate to FormShow, which has other issues then, but its not
that easy as in XE2 (or better VCL) any more, your right.

 

 

Edited November 6, 2018 by Rollo62

[domus 1]

The problem with FindStyleResource is that the style needs to have been applied first, otherwise it will indeed return nil. I often issue an ApplyStyleLookup before using FindStyleResource, unless I'm absolutely positive that the control has already been rendered with the style. But I admit, even an ApplyStyleLookup is no guarantee that the style has been applied. The control needs to be correctly parented, etc. etc.

 

Since there really isn't any phenomenal documentation, a bit of witchcraft is involved. And absolutely everything could change again in the next version. I learned that the very hard way. EMBT, today, is all about code breaking and upgrade nightmares.

[Rollo62 536]

Your right, but unfortunately ApplyStyleLookup seems not always be consistent, (ApplyStyle in some cases), depending on the component.
So I would love to find a common "best practice", which could be used for all controls.
Until this may be available, I mostly use rather primitive controls, and I got used to that already well.

Some of these simple controls run even well under the "Defaut" platform style, so no need to define "Win", "OSX" styles, etc. separately.

But I'm talking here about TRectangle or the like.

I understand that the platforms are the reason to have different styles in the first place, but I also would like to have a common set
of controls, which could be easily custom-styled and live in the "Default" style.

Maybe tít would be possible to define some own control sets, which would be able to handle such styles in a more general way,

hopefully one day I will have more time to make such experiments.

 

 

Edited November 6, 2018 by Rollo62

[Tom F 83]

If you found this thread like I did while you were looking how to change the background color on a single control in a VCL style, see this video: 
 

 

[mvanrijnen 123]

20 hours ago, Tom F said:

If you found this thread like I did while you were looking how to change the background color on a single control in a VCL style, see this video: 
 

 

 

Not personal, but there is a reason why we use a webbrowser instead of a TV set.   I like to read this kind of things instead of watching YT 😉

(just a comment)