Adding border to component

[Trenatos]

I've looked around but not found a solution, is there a way to add a border to a component programmatically, or will I have to look into drawing lines and shapes?

[molly]

Which specific component are you talking about ?

TComponent is non visual, so would not be suited to draw a border.

It's common to inherit from something like tcustomcontrol, which brings you canvas etc. that you can draw to. That control has a borderstyle property (which can be set or not), or alternatively you can use a canvas to f.e. draw a 3D frame.

Edit: add small example

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

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs;
9.  
10.  
11. type
12.   TMyCustomControl = class(TCustomControl)
13.   end;
14.  
15. type
16.  
17.   { TForm1 }
18.  
19.   TForm1 = class(TForm)
20.     procedure FormCreate(Sender: TObject);
21.   private
22.     { private declarations }
23.   public
24.     { public declarations }
25.     MyCustomControl : TMyCustomControl;
26.   end;
27.  
28. var
29.   Form1: TForm1;
30.  
31. implementation
32.  
33. {$R *.lfm}
34.  
35. { TForm1 }
36.  
37. procedure TForm1.FormCreate(Sender: TObject);
38. begin
39.   MyCustomControl := TMyCustomControl.Create(Self);
40.   MyCustomControl.Parent := Self;
41.   MyCustomControl.Left := 100;
42.   MyCustomControl.Top := 100;
43.   MyCustomControl.Width := 100;
44.   MyCustomControl.Height := 100;
45.   MyCustomControl.BorderStyle:= bsSingle; // bsNone;
46. end;
47.  
48. end.
49.  

[Trenatos]

Hi Molly

I'm creating buttons, panels, and other things dynamically and am trying to add a border to show onclick to show the currently active item in an editor.

If I understand you right, I should be able to create a button and inherit from customcontrol, which has the ability to use a border or draw one?

[molly]

Hi Trenatos,

If I understand you right, I should be able to create a button and inherit from customcontrol, which has the ability to use a border or draw one?

Nope. My answer was placed in another context, as your situation was not clear yet :-)

The 'normal' way to do that, and assuming you use standard LCL controls is to inherit _all_ your controls to be able to draw a custom border as you wish, or 'abuse' the design interface of the components (i do not have experience with the latter)

I'm creating buttons, panels, and other things dynamically and am trying to add a border to show onclick to show the currently active item in an editor.

Still not sure if you are using standard LCL controls.

If this is for using standard LCL controls _and_ has to work for Windows only, then i might be able to come up with a generic workaround.

[Trenatos]

I'm using standard controls for the moment but haven't decided what to use for long term, if images would work or more likely I'd have to make custom controls (Which I've never made before) to support scaling, borders, various shapes, etc.

It needs to work for both Windows and Mac.

I don't know if this information is of use for the answer, but maybe;
I'm working on a wysiwyg editor, I'm able to drag-and-drop items from a menu and create them dynamically in the editor area, they're clickable and sets an activeItem variable, but I need some kind of visual indicator of what the currently active item is, so if there's a better way to do it then I'm all ears.

[molly]

Well, in case using standard LCL controls and a TForm like component to place them on then you could perhaps use something like this:

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

1. unit unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls;
9.  
10. type
11.  
12.   { TForm1 }
13.  
14.   TForm1 = class(TForm)
15.     Button1: TButton;  // click event assigned to ControlClick
16.     Edit1: TEdit; // click event assigned to ControlClick
17.     procedure ControlClick(Sender: TObject);
18.   private
19.     { private declarations }
20.   public
21.     { public declarations }
22.   end;
23.  
24. var
25.   Form1: TForm1;
26.  
27. implementation
28.  
29. {$R *.lfm}
30.  
31. { TForm1 }
32.  
33. procedure TForm1.ControlClick(Sender: TObject);
34. const
35.   FrameWidth = 2;
36. Var
37.   Rect : classes.TRect;
38. begin
39.   Self.Refresh;
40.   With Sender as TControl do
41.   begin
42.     Rect.Top    := Top    - FrameWidth;
43.     Rect.Left   := Left   - FrameWidth;
44.     Rect.Bottom := (Top + Height)  + FrameWidth;
45.     Rect.Right  := (Left + Width) + FrameWidth;
46.     Canvas.Frame3D(Rect, clRed, clPurple, FrameWidth);
47.     // or: Canvas.FrameRect(Rect);
48.   end;
49. end;
50.  
51. end.
52.  

afaik the above should work on every supported platform (e.g. i have ditched the Windows only solution)

In case you are writing your own custom controls, then things can become a completely different ballgame ;-)

[howardpc]

The following code shows another way to highlight focused controls. You may be able to adapt it for your needs.
Drop a TButton and a TEdit on a new form, double-click to make an OnCreate handler and complete it as follows:

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

1. unit mainBordered;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, Forms, Controls, Graphics, StdCtrls, types;
9.  
10. type
11.  
12.   { TBorder }
13.  
14.   TBorder = class(TGraphicControl)
15.   private
16.     FPenColor: TColor;
17.     FBorderColor: TColor;
18.   protected
19.     procedure Paint; override;
20.     procedure ControlEnter(Sender: TObject);
21.     procedure ControlExit(Sender: TObject);
22.   public
23.     constructor {%H-}Create(AOwner: TForm;
24.                        aWinControl: TWinControl;
25.                        aBorderWidth: integer=3;
26.                        aBorderColor: TColor=clBlue);
27.   end;
28.  
29.   { TForm1 }
30.  
31.   TForm1 = class(TForm)
32.     Button1: TButton;
33.     Edit1: TEdit;
34.     procedure FormCreate(Sender: TObject);
35.   end;
36.  
37.   Procedure AddFocusBorder(aWinControl: TWinControl;
38.                            aForm: TForm;
39.                            aBorderWidth: integer=3;
40.                            aColor: TColor=clBlue);
41.  
42. var
43.   Form1: TForm1;
44.  
45. implementation
46.  
47. procedure AddFocusBorder(aWinControl: TWinControl; aForm: TForm;
48.   aBorderWidth: integer; aColor: TColor);
49. begin
50.   TBorder.Create(aForm, aWinControl, aBorderWidth, aColor);
51. end;
52.  
53. {$R *.lfm}
54.  
55. { TForm1 }
56.  
57. procedure TForm1.FormCreate(Sender: TObject);
58. begin
59.   AddFocusBorder(Button1, Self, 5, clMoneyGreen);
60.   AddFocusBorder(Edit1, Self);
61. end;
62.  
63. { TBorder }
64.  
65. constructor TBorder.Create(AOwner: TForm; aWinControl: TWinControl;
66.   aBorderWidth: integer; aBorderColor: TColor);
67. var
68.   r: TRect;
69. begin
70.   Assert(aWinControl<>nil,'TBorder: non-existent control');
71.   inherited Create(AOwner);
72.   FBorderColor:=aBorderColor;
73.   Canvas.Pen.Width:=aBorderWidth;
74.   r:=aWinControl.BoundsRect;
75.   if InflateRect(r, aBorderWidth, aBorderWidth) then
76.     SetInitialBounds(r.Left, r.Top, r.Right-r.Left, r.Bottom-r.Top);
77.   aWinControl.OnEnter:=@ControlEnter;
78.   aWinControl.OnExit:=@ControlExit;
79.   Parent:=AOwner;
80. end;
81.  
82. procedure TBorder.ControlEnter(Sender: TObject);
83. begin
84.   FPenColor:=FBorderColor;
85.   Repaint;
86. end;
87.  
88. procedure TBorder.ControlExit(Sender: TObject);
89. begin
90.   FPenColor:=clBtnFace;
91.   Repaint;
92. end;
93.  
94. procedure TBorder.Paint;
95. begin
96.   Canvas.Pen.Color:=FPenColor;
97.   Canvas.Rectangle(ClientRect);
98. end;
99.  
100. end.
101.  

[Trenatos]

Thanks guys, you sparked an idea.

I ended up creating a tshape, and then just update the size, parent, location on click, super simple but works for now.