C++ Builder is the easiest and fastest C++ IDE for building everything from simple to professional applications using visually amazing GUI controls and forms. Each form and component can be skinned with Styles which allow your application to have its own professionally designed attractive look and feel. The Style systems of the VCL and FMX (FireMonkey) award-winning frameworks is very easy to use but there is sometimes a learning curve to climb to understand how to get the best out of them. In this post, we explain how to change background color of an Edit (TEdit) which is one of the most frequently asked questions. These methods below, can be applied to other components too.
How to change the background color of an Edit control using Styles?
Styles are sets of graphical details that define the look and feel of an application visually. They are one of most beautiful and useful UI features of RAD Studio, that makes your UI elements ‘skinned’ with a professionally designed graphical look and feel. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps (not wrapped in some kind of runtime interpretation layer) and the powerful FireMonkey (FMX) framework for cross-platform UIs. Both VCL and FMX apps support Styles.
There are many different styles available, and they cater for almost every possible taste in aesthetics as well as providing dark and light mode versions. More details about Styles can be found here. You can also find additional Premium Styles here. If you want to learn how you can modernize your components with styles here is the post you need;
- Right-click on the Edit and select
'Edit Custom Style...' - Expand
Edit1Style: you’ll see thebackgroundnode. Click onbackgroundto select it. Then add aTRectanglevia thePalette. The IDE should expand thebackgroundnode and show a newRectangle1Styletied to theTRectangle, - Via the
Object Inspectorchange the Color ofTRectangle - Click on the
Apply Stylebutton in the'Style Designer'. - Compile and run your application
If you still have problems to set color, may be this docwiki can help you : https://blogs.embarcadero.com/edit-custom-style-to-change-the-background-color-of-a-fmx-tedit/
How to change background color of an Edit in C++ code?
If you want to change the background color of a Edit component (TEdit) in C++ Builder, first you should set the StyleLookup property to “Editstyle” as below.
|
1 2 3 |
Edit1->StyleLookup = "Editstyle"; |
If you look at the Custom Style of Edit,
there is “background” property, so we should find this resource by using the FindStyleResource() method of Edit as given example below.
|
1 2 3 4 |
Edit1->StyleLookup = "Editstyle"; auto fmxobj = Edit1->FindStyleResource("background", false); |
if this resource object found, we can create a rectangle (TRectangle) as a background as below.
|
1 2 3 |
std::unique_ptr<TRectangle> rect(new TRectangle(fmxobj)); |
Here we used unique_ptr which more modern to create this rectangle. Now we can set properties of our Rectangle, including its color.
|
1 2 3 4 5 6 7 |
rect->Align = TAlignLayout::Client; rect->Fill->Color = color; rect->Stroke->Color = color; // = claNull; rect->HitTest = false; rect->SendToBack(); |
Now, at last we need to add this object by using .get() method of unique_ptr. And the final trick here is you must release this unique_ptr by using .release() otherwise it doesn’t have any effect.
|
1 2 3 4 |
fmxobj->AddObject(rect.get()); rect.release(); |
I asked one of Embarcadero’s engineers to explain this a little more to me and he noted that “If you insist on using unique_ptr, you must add a call to .release(); to tell the unique_ptr that you no longer want it to clean up the pointer; otherwise, it will not work“.
Let’s sum up all in a full example.
Is there a full example of how to change the background color of an Edit in C++ code?
Here is a full C++ Builder FMX example that changes the color of 3 TEdit components with the names Edit1, Edit2, and Edit3. To do this we create a EditColor() function that uses Edit name and your color. Don’t forget to drag them into your application form, before you run this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
//--------------------------------------------------------------------------- #include <fmx.h> #pragma hdrstop #include "Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.fmx" TForm1 *Form1; bool ChangeEditColor(TEdit *edit, TAlphaColor color) { edit->StyleLookup = "Editstyle"; auto fmxobj = edit->FindStyleResource("background", false); if(fmxobj!=NULL) { std::unique_ptr<TRectangle> rect(new TRectangle(fmxobj)); rect->Align = TAlignLayout::Client; rect->Fill->Color = color; rect->Stroke->Color = color; // = claNull; rect->HitTest = false; rect->SendToBack(); fmxobj->AddObject(rect.get()); rect.release(); return true; } else return false; } //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { ChangeEditColor(Edit1, claYellow); ChangeEditColor(Edit2, claDeepskyblue); ChangeEditColor(Edit3, claGreenyellow); } //--------------------------------------------------------------------------- |
C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.
There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise version.
