Discussion :

[adipie]

Bonjour,
Depuis une bonne semaine je galère pour changer la couleur de fond d'un TEdit.
Malgré les nombreux posts à ce sujet je n'arrive pas.
Je suis donc à la recherche d'un bon tutoriel qui explique de façon détaillée la marche à suivre.
Sous Windows 7 (32) + Delphi Berlin.
Je suis un peux déçu de FMX par rapport à Delphi.

[gbegreg]

Bonjour,

Il y a cette discussion sur les forums Embarcadero : https://community.embarcadero.com/fo...kground-colour
C'est un exemple C++ Builder mais très facilement transposable en Delphi. Dans l'événement OnPaint du TEdIt (exemple en mettant le fond en couleur "Tomato" et le texte en noir) ça donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
procedure TForm1.Edit1Paint(Sender: TObject; Canvas: TCanvas; const [Ref] ARect: TRectF);
var
  pinceau : TStrokeBrush;
begin
  pinceau := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColorRec.Tomato); // Création du pinceau pour peindre le fond
  Canvas.FillRect(ARect,0,0, AllCorners,1,pinceau);  // On remplit le fond
  Canvas.Fill.Color := TAlphaColorRec.Black;   // Couleur du texte
  Canvas.FillText(ARect, (Sender as TEdit).Text, false, 1, [], TTextAlign.Leading, TTextAlign.Center);  // Affichage du texte
end;

Si on veut conserver le contour du TEdit et ainsi visualiser le fait que le composant a le focus ou non, il suffit de définir une zone TRectF un peu plus petite que le Arect fourni en paramètre. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
procedure TForm76.Edit1Paint(Sender: TObject; Canvas: TCanvas; const [Ref] ARect: TRectF);
var
  pinceau : TStrokeBrush;
  zone : TRectf;
begin
  // Définition d'une nouvelle zone plus petite de 1 pixel à droite, à gauche, en haut et en bas du ARect
  // afin de conserver le contour du TEdit et de la symbolisation du focus
  zone.Top := ARect.top + 1;
  zone.left := ARect.left + 1;
  zone.Width := ARect.width -2;
  zone.Height := ARect.height -2;
 
  pinceau := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColorRec.Tomato); // Création du pinceau pour peindre le fond
  Canvas.FillRect(zone,0,0, AllCorners,1,pinceau, TCornerType.Bevel);  // On remplit le fond
  Canvas.Fill.Color := TAlphaColorRec.Black;   // Couleur du texte
  Canvas.FillText(zone, (Sender as TEdit).Text, false, 1, [], TTextAlign.Leading, TTextAlign.Center);  // Affichage du texte
end;

Il est possible de remplir le fond avec un dégradé ou une image également...

[SergioMaster]

Bonjour,

Je suis un peux déçu de FMX par rapport à Delphi.

oui, bon là il y a un peu de mélange, c'est Delphi mais deux frameworks VCL ou FMX, c'est une question d'habitudes qu'il faut faire bouger

Depuis une bonne semaine je galère pour changer la couleur de fond d'un TEdit.

avec ou sans style (question piège car en ait il y en a toujours un implicite) et sous quelles conditions ?

la méthode proposée par Gregory en est une, celle que j'aime le moins en fait
mais il y a d'autres possibilités allant de l'utilisation d'un rectangle et un style transparent (stylelookup=transparentEdit),

à la modification en style personnalisé ou l'utilisation d'un effet cela dépend beaucoup du but recherché

[gbegreg]

Bien vu Serge !

Effectivement c'est plus simple. Par contre, j'aurai mis le TEdit enfant du TRectangle et affecté la propriété Align du TEdit à Client. On est ainsi certain que le TEdit s'adaptera automatiquement à la taille de son conteneur le TRectangle.

Éventuellement, on peut jouer sur les événements OnEnter et OnExit pour modifier la couleur du contour du TRectangle en fonction si le focus est dans le TEdit ou non.

[SergioMaster]

Par contre, j'aurai mis le TEdit enfant du TRectangle et affecté la propriété Align du TEdit à Client. On est ainsi certain que le TEdit s'adaptera automatiquement à la taille de son conteneur le TRectangle.

C'est effectivement ce que je voulais faire mais impossible d'y arriver (la fièvre sans doute, je suis pas au meilleur de ma forme)

on peut jouer sur les événements OnEnter et OnExit pour modifier la couleur du contour du TRectangle

ou encore pour moins (pas) de code, utiliser un TColorAnimation

pour et contre de cette méthode :
+ un avantage du rectangle, le fond peut être du uniforme mais aussi un dégradé ou même une image
+ on accéde facilement aux propriétés du rectangle
- c'est quand même "lourdingue" pour chaque Edit un Rectangle (et dans ma première présentation un layout)

J'ai aussi la possibilité du style : en faire un personnalisé, supprimer le background qui est un TStyleObject et ajouter un TRectangle à la place et en arrière-plan

Tu verras peut être pourquoi j'avais un TLayout
NOTE : bien faire attention au moment de la modification personnalisée à ce que le style corresponde bien à la plateforme (mésaventure de cet été)
pour et contre de cette méthode :
+ un avantage du rectangle, le fond peut être du uniforme mais aussi un dégradé ou même une image
+ ce n'est plus "lourdingue" pour chaque Edit que l'on veut avec un fond il suffit d'indiquer le style
+ on peut accéder à la propriété Fill du TRectangle de cette manière Trectangle(MonEdit.FindStyleResource('Rectangle')).Fill.Color := TAlphaColors.Red;

Moins des deux
- au cas où l'on joue avec plusieurs styles ces deux méthodes ne sont pas réactives au changement

Conclusion ces deux propositions dépendent beaucoup de l'objectif souhaité, une autre proposition que j'ai écarté est de carrément modifier le style complet

Je suis donc à la recherche d'un bon tutoriel qui explique de façon détaillée la marche à suivre.

c'est dans ma liste des Todos mais loin en bas
Il me reste encore bien des questions sans réponses quand à ces TStyleObject ou à comment obtenir les couleurs par défaut si simple en VCL

[adipie]

Merci pour vos réponses, je vais tester les deux variantes.

[adipie]

Bonjour, dans l'exemple de Sergio utilisant les styles je n'arrive pas à mettre le rectangle en arrière plan.
J'ai loupé quelque chose, mais je ne trouvé pas quoi.
A la saisie d'un texte dans Edit1 je vois une partie du texte si je déplace le rectangle.
Merci d'avance si Sergio peut m'aider.

[SergioMaster]

Bonjour,

dans l'exemple de Sergio utilisant les styles je n'arrive pas à mettre le rectangle en arrière plan.

en éditant le style, un cliquer droit sur le rectangle (dans la partie structure) un menu contextuel apparait, sélectionner Control/Mettre en arrière plan
en profiter pour changer la propriété StyleName (Rectangle1Style c'est pas sexy, FondSaisie nettement plus explicite) surtout si l'on veut, après, jouer sur le remplissage TRectangle(MonEdit.FindStyleResource('FondSaisie')).Fill.Color := TAlphaColors.Red;

[adipie]

Bonjour,

en éditant le style, un cliquer droit sur le rectangle (dans la partie structure) un menu contextuel apparait, sélectionner Control/Mettre en arrière plan
en profiter pour changer la propriété StyleName (Rectangle1Style c'est pas sexy, FondSaisie nettement plus explicite) surtout si l'on veut, après, jouer sur le remplissage TRectangle(MonEdit.FindStyleResource('FondSaisie')).Fill.Color := TAlphaColors.Red;

Bonjour,
Merci pour cette réponse, mais rien à faire, le clic droit sur le rectangle dans la partie structure ouvre bien Control/Mettre en arrière plan, mais rien ne réagit.
Je vais devoir utiliser la méthode GbeGreg.
Bon week end.

[SergioMaster]

Bonjour,

je pense qu'il y a un simple problème d'utilisation du style
Voici mes tests
voir en particulier Stylebook1

[adipie]

Merci pour cette aide, entre temps j'ai trouvé l'astuce:

Création pas à pas d'un style personnalisé pour un TEdit en FMX :

Glisser un composant Edit1 sur la vue maître de la Form.
Faire un clic droit sur Edit1.
Clic sur Modifier un style personnalisé, le concepteur de style s'ouvre.
Dans la fenêtre structure, étendre Edit1Style1.
Clic sur Content glisser un composant Rectangle1.
Dans l'inspecteur d'objet de Rectangle1 :
_ Mettre HitTest à false.
_ Adapter les propriétés (Fill, Stroke, Radius etc...)
_ Mettre la propriété Align à Client.
Clic sur le bouton Appliquer le style pour valider les modification.
Retour à la Form.

Encore merci pour vos conseils et aides.

[JP CASSOU]

Bonjour,

Il y a cette discussion sur les forums Embarcadero : https://community.embarcadero.com/fo...kground-colour
C'est un exemple C++ Builder mais très facilement transposable en Delphi. Dans l'événement OnPaint du TEdIt (exemple en mettant le fond en couleur "Tomato" et le texte en noir) ça donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
procedure TForm1.Edit1Paint(Sender: TObject; Canvas: TCanvas; const [Ref] ARect: TRectF);
var
  pinceau : TStrokeBrush;
begin
  pinceau := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColorRec.Tomato); // Création du pinceau pour peindre le fond
  Canvas.FillRect(ARect,0,0, AllCorners,1,pinceau);  // On remplit le fond
  Canvas.Fill.Color := TAlphaColorRec.Black;   // Couleur du texte
  Canvas.FillText(ARect, (Sender as TEdit).Text, false, 1, [], TTextAlign.Leading, TTextAlign.Center);  // Affichage du texte
end;

Ne fonctionne pas sous Android (texte non affiché)

Si on veut conserver le contour du TEdit et ainsi visualiser le fait que le composant a le focus ou non, il suffit de définir une zone TRectF un peu plus petite que le Arect fourni en paramètre. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
procedure TForm76.Edit1Paint(Sender: TObject; Canvas: TCanvas; const [Ref] ARect: TRectF);
var
  pinceau : TStrokeBrush;
  zone : TRectf;
begin
  // Définition d'une nouvelle zone plus petite de 1 pixel à droite, à gauche, en haut et en bas du ARect
  // afin de conserver le contour du TEdit et de la symbolisation du focus
  zone.Top := ARect.top + 1;
  zone.left := ARect.left + 1;
  zone.Width := ARect.width -2;
  zone.Height := ARect.height -2;
 
  pinceau := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColorRec.Tomato); // Création du pinceau pour peindre le fond
  Canvas.FillRect(zone,0,0, AllCorners,1,pinceau, TCornerType.Bevel);  // On remplit le fond
  Canvas.Fill.Color := TAlphaColorRec.Black;   // Couleur du texte
  Canvas.FillText(zone, (Sender as TEdit).Text, false, 1, [], TTextAlign.Leading, TTextAlign.Center);  // Affichage du texte
end;

Il est possible de remplir le fond avec un dégradé ou une image également...