Lazarus

Miscellaneous => Other => Topic started by: simonbosti on January 20, 2009, 10:05:43 pm

Title: TEdit with rounded corners.
Post by: simonbosti on January 20, 2009, 10:05:43 pm
Hello :)


Is there any way to round TEdit corners ? Normally TEdit is a rectangle. I would change its look. How can I draw TEdit by myself?


Thx in advance,
Simon
Title: Re: TEdit with rounded corners.
Post by: felipemdc on February 16, 2009, 09:06:22 am
Quote from: simonbosti on January 20, 2009, 10:05:43 pm
Is there any way to round TEdit corners ?

No

Quote
Normally TEdit is a rectangle. I would change its look. How can I draw TEdit by myself?

You need to create your own control and implement all necessary features. There are several design options. You can descend from either TCustomControl, TWinControl or TCustomEdit. To have a start about descending from TCustomControl have a look here:

http://wiki.lazarus.freepascal.org/Developing_with_Graphics#Create_a_custom_control_which_draws_itself

This explains how to draw the control. Then you just need to add caret and input support.
Title: Re: TEdit with rounded corners.
Post by: edgarrod71 on April 22, 2018, 06:18:57 am
Yes, it's not like modifying windows messages, but this is an approach.

Even tested in any platform, it works.

Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormShow(Sender: TObject);
  2. var
  3.     i: Integer;
  4.     TC: TCustomEdit;
  5.     aShape: TShape;
  6. begin
  7.   for i:=0 to ComponentCount-1 do begin
  8.       if (Components[i] is TCustomEdit) and
  9.          not (Components[i] is TMemo) then begin
  10.         TC := Components[i] as TCustomEdit;
  11.         aShape := TShape.Create(Self);
  12.         aShape.Parent := Self;
  13.         aShape.SetBounds(TC.Left,TC.Top,TC.Width+4,TC.Height+2);
  14.         TC.BorderStyle:=bsNone;
  15.         TC.SetBounds(TC.Left+4,TC.Top+4,TC.Width-6,TC.Height);
  16.         aShape.Shape:=stRoundRect;
  17.         aShape.Brush.Color:=clWhite;
  18.         aShape.Brush.Style:=bsSolid;
  19.         aShape.Pen.Cosmetic:=True;
  20.         aShape.Pen.Style:=psSolid;
  21.         aShape.Pen.Color:=clGreen;
  22.         aShape.Pen.Width:=1;
  23.       end;
  24.   end;
  25. end;                          
Title: Re: TEdit with rounded corners.
Post by: RayoGlauco on April 22, 2018, 10:21:39 am
edgarrod71, I like your code. I tested it, and I found a problem, because I like to put some tEdit inside a tPanel and, in this case, the shapes were misplaced. I found a simple solution, changing the line 12 of your code:

Code: Pascal  [Select][+][-]
  1. aShape.Parent := TC.Parent;  // Instead aShape.Parent := Self;
Title: Re: TEdit with rounded corners.
Post by: edgarrod71 on April 23, 2018, 07:43:38 am
hi, Thank you, it's strange, because I put Tedits on a panel and they worked, nevertheless I accept your code, now it looks more clean and failproof. :)
Title: Re: TEdit with rounded corners.
Post by: edgarrod71 on April 23, 2018, 08:43:49 am
A simpler and better code, even on the onCreate event handler.  Tested with different colors on the Edit and the Fonts.

Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormCreate(Sender: TObject);
  2. var i: Integer;
  3.     TC: TCustomEdit;
  4.     aShape: TShape;
  5. begin
  6.   for i:=0 to ComponentCount-1 do begin
  7.       if (Components[i] is TCustomEdit) and
  8.          not (Components[i] is TMemo) then begin
  9.         TC := Components[i] as TCustomEdit;
  10.         TC.AutoSize:=false;
  11.         TC.BorderStyle:=bsNone;
  12.         aShape := TShape.Create(Self);
  13.         aShape.Parent := TC.Parent;
  14.         aShape.SetBounds(TC.Left,TC.Top,TC.Width,TC.Height);
  15.         TC.SetBounds(TC.Left+4,TC.Top+3,TC.Width-10,TC.Height-5);
  16.         aShape.Shape:=stRoundRect;
  17.         aShape.Brush.Color:=TC.Brush.Color;
  18.         aShape.Pen.Color:=clWindowFrame;
  19.       end;
  20.   end;
  21. end;
  22.  
Title: Re: TEdit with rounded corners.
Post by: edgarrod71 on February 27, 2023, 04:08:37 am
I was remembering my old programming times... and now this version uses Helpers... Enjoy! ;)

Activate the switch before the Interface section
Code: Pascal  [Select][+][-]
  1. {$MODESWITCH TYPEHELPERS}
  2.  

Put this on the Interface section
Code: Pascal  [Select][+][-]
  1.   { TCustomEditHelper }
  2.  
  3.   TCustomEditHelper = class helper for TCustomEdit
  4.     procedure HInit;
  5.     procedure HPaint;
  6.   end;

Put this on the Implementation section
Code: Pascal  [Select][+][-]
  1. procedure TCustomEditHelper.HInit;
  2. var
  3.   WC: TWinControl;
  4. begin
  5.   AutoSize := false;
  6.   WC := Self;
  7.   while not (WC is TCustomControl) do
  8.     WC := WC.parent;
  9.   If WC is TPanel then begin
  10.     (WC as TPanel).BevelInner := bvSpace;
  11.     (WC as TPanel).BevelWidth := 5;
  12.   end;
  13.   BorderStyle := bsNone;
  14.   SetBounds(Left + 2, Top + 2, Width - 5, Height - 6);
  15. end;
  16.  
  17. procedure TCustomEditHelper.HPaint;
  18. var
  19.   WC: TWinControl;
  20.   CV: TCanvas;
  21.   R: TRect;
  22. begin
  23.   R := BoundsRect;
  24.   WC := Self;
  25.   while not (WC is TCustomControl) do
  26.     WC := WC.parent;
  27.   CV := (WC as TCustomControl).Canvas;
  28.   CV.Brush := Brush ;
  29.   CV.Pen.Color := clWindowFrame;  //clActiveBorder;
  30.   CV.RoundRect(Left - 2 , Top - 2, R.Right + 3, R.Bottom + 3, 10, 10);
  31.  


Put some TEdit and TMemo on your project, even works when you have TPanel as a container.  Initialize them this way
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormCreate(Sender: TObject);
  2. begin
  3.   { ... Other Stuff ... }
  4.   Edit1.HInit;
  5.   Memo1.HInit;
  6.   Memo2.HInit;
  7. end;
  8.  
Put inside OnPaint methods for TForm and TPanel.
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormPaint(Sender: TObject);
  2. begin
  3.   Edit1.HPaint;
  4.   Memo2.HPaint;
  5. end;
  6.  
  7. procedure TForm1.Panel1Paint(Sender: TObject);
  8. begin
  9.   Memo1.HPaint;
  10. end;
  11.  

As I said... Enjoy!
TinyPortal © 2005-2018