Re: Drawing lines between buttons?

Posted by webmaster Guido on November 26, 2008

In Reply to Drawing lines between buttons? posted by Lee Hallin on November 24, 2008

: I have a series of buttons on the form. I want to, either at design or run time, draw lines between some of the buttons to indicate an association.
: The lines will not change once the program is running so if I can do it at design time, there would NOT be a need to do it at run time.

At design time, you can simulate a horizontal or a vertical line by using Delphi's TBevel component. Set the bevel's property Shape to bsTopLine or to bsLeftLine. For different effects, set the property Style to bsLowered or bsRaised.

Variations: for a double horizontal line, set property Shape to bsFrame, set a small value for the bevel's height (say 5 or 6 pixels), and moving the bevel's left and right lines "under" the two buttons that you connect.
Similarly, for a double vertical line, you reduce the width to a few pixels and hide the top and bottom lines under the buttons.

You can not customize the color of a Bevel, but you can use Delphi's TShape instead. To ensure that the Shape's background matches the form's color, set the Shape's property Brush.Color to clBtnFace and set its Brush.Style so bsSolid. Next, set the properties for Shape.Pen: set Pen.Color to anything you fancy and set Pen.Width to 1, or a larger value for a thicker line. Finally, set the Shape's Height to only a few pixels so that only a single horizontal line is shown, or set its Height to a small value for a vertical line.

Variations: experiment with slightly larger Height or Width, experiment with Pen.Style (instead of psSolid, try psDash, psDot, etc...)

Lines that are neither horizontal nor vertical have to be drawn at run time, during the OnPaint event of the form. Here's an example:

procedure TForm1.FormPaint(Sender: TObject);
begin
   Canvas.Pen.Style := psSolid; // or psDot, psDash,...
   Canvas.Pen.Color := clBlue;
   Canvas.Pen.Width := 1;  // or larger value
   // Set position of the pen to bottom-right corner of Button 1
   Canvas.MoveTo(Button1.Left + Button1.Width,
                 Button1.Top + Button1.Height);
   // Draw line to top-left corner of Button 2
   Canvas.LineTo(Button2.Left, Button2.Top);
end;

I hope that this sparks your imagination for more experimenting :)