Magnifier over TEdit

[tudi_x]

hi All,
in Lazarus 1.6.4 i need to place a magnifier over a TEdit in order to indicate the search capabilities using the TEdit as per attached screen capture.
the magnifier should dissappear when the user would write in the TEdit (change event).

please advise if there is a way to place the magnifier over the TEdit (ex. in TImage) or the canvas should be drawn over the TEdit.

thank you

[Handoko]

There are basically 2 ways to do it. The easy and the hard ways.

The hard way is the best. You write your own component, add all the features you want. Just that simple, but the code will be very complex if you never write a component.

I guess you choose the easy one.

You need a TPanel and a TImage. Why TPanel? Without TPanel, the image will hide behind the TEdit.

1. Put a TImage inside a TPanel.
2. Resize them properly.
3. The TPanel.Height should be at least 4 pixels smaller than TEdit.Height
4. Position the TPanel properly above the TEdit.
5. Set the TEdit's OnEnter and OnExit events to hide/show the TPanel.

You can download the test.zip.

Note:
I tested the code using Lazarus 1.6.4 Gtk2 on Ubuntu Mate 16.10. The appeareance may be different if you switch to other desktop themes. Also, on Windows, the results will be much different, because Windows default TEdit.Height is not the same as on Linux.

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Forms, Controls, StdCtrls, ExtCtrls;
9.  
10. type
11.  
12.   { TForm1 }
13.  
14.   TForm1 = class(TForm)
15.     Edit1: TEdit;
16.     Edit2: TEdit;
17.     Image1: TImage;
18.     Label1: TLabel;
19.     Label2: TLabel;
20.     Panel1: TPanel;
21.     procedure Edit1Enter(Sender: TObject);
22.     procedure Edit1Exit(Sender: TObject);
23.   end;
24.  
25. var
26.   Form1: TForm1;
27.  
28. implementation
29.  
30. {$R *.lfm}
31.  
32. { TForm1 }
33.  
34. procedure TForm1.Edit1Exit(Sender: TObject);
35. begin
36.   Panel1.Visible := True;
37. end;
38.  
39. procedure TForm1.Edit1Enter(Sender: TObject);
40. begin
41.   Panel1.Visible := False;
42. end;
43.  
44. end.

[tudi_x]

Thank you.
What I like about the easy way is that it works on Linux also.
I saw a lot of questions of this type but I did not find a component that supports the behavour out of the box.