How to implement a divider between two TPanel?

[tu]

Hello everyone,

This is the first time I use Lazarus. I want to make a divider/separator between two TPanel but I can't find a "divider" control.
So what is the best way to implement a "divider" as attachment?

Thank you so much 

[TRon]

I am aware of at least two component that can do that for you: TSplitter and TPairSplitter.

PS: sorry, I forgot. Hello and welcome 

[Handoko]

Some demo codes can be found here:
https://forum.lazarus.freepascal.org/index.php/topic,51662

[tu]

I am aware of at least two component that can do that for you: TSplitter and TPairSplitter.

PS: sorry, I forgot. Hello and welcome 

Some demo codes can be found here:
https://forum.lazarus.freepascal.org/index.php/topic,51662

Thank you so much 

But if I want 3 or more "columns", how can I do that with TPairSplitter? 

[wp]

It's a bit easier with a TSplitter (rather than a TPairSplitter):
Assuming that you want three panels and two splitters. The left splitter should work on the left panel, the right splitter on the right panel, and both splitters always make sure that the center panel adjusts its width so that the entire form width is filled:

• Drop three panels on the form.
• Click the first panel, and make sure that it has Align = alLeft.
• Drop a splitter and set its Align to alLeft as well. Therefore, the splitter should be at the right side of the panel. If not, drag it to that position.
• Click on the third panel, and set its Align to alRight
• Drop the second splitter on the form. Align it to alRight. The splitter should be at the left side of the right panel - if not, drag it to that position.
• Finally click on the third panel and set its Align to alClient
• Done

When you now increase the form width the center panel will change its width. If you drag the left splitter the left panel will change its width, and the width of the center panel will compensate that. And if you drag the right splitter the right panel will change, and the center panel will adjust.

In the same way you can add more "columns". But note that there can only one panel with Align=alClient. So, you must decide which panels will be at the left or right side.

Of course, you can have the alClient panel at the right side of the form; in this case, don't use alRight for the other panel(s) and splitter(s). Or vice versa for the alClient panel at the left.

[tu]

It's a bit easier with a TSplitter (rather than a TPairSplitter):
Assuming that you want three panels and two splitters. The left splitter should work on the left panel, the right splitter on the right panel, and both splitters always make sure that the center panel adjusts its width so that the entire form width is filled:

• Drop three panels on the form.
• Click the first panel, and make sure that it has Align = alLeft.
• Drop a splitter and set its Align to alLeft as well. Therefore, the splitter should be at the right side of the panel. If not, drag it to that position.
• Click on the third panel, and set its Align to alRight
• Drop the second splitter on the form. Align it to alRight. The splitter should be at the left side of the right panel - if not, drag it to that position.
• Finally click on the third panel and set its Align to alClient
• Done

When you now increase the form width the center panel will change its width. If you drag the left splitter the left panel will change its width, and the width of the center panel will compensate that. And if you drag the right splitter the right panel will change, and the center panel will adjust.

In the same way you can add more "columns". But note that there can only one panel with Align=alClient. So, you must decide which panels will be at the left or right side.

Of course, you can have the alClient panel at the right side of the form; in this case, don't use alRight for the other panel(s) and splitter(s). Or vice versa for the alClient panel at the left.

Thank you so much, I have implemented successfully 

And last question, if I want to implement a "static" divider/separator. Just for separate some UI parts and don't want to be resizable. What is the best way to do that? I found someone use TShape or TBevel 

[wp]

And last question, if I want to implement a "static" divider/separator. Just for separate some UI parts and don't want to be resizable. What is the best way to do that? I found someone use TShape or TBevel 

A panel has BevelInner and BevelOuter properties which allow to draw various borders around the panel. Or use a TGroupbox the separate controls; it has a border as well, or a different background color in some widgetsets, plus a Caption. Even if you don't want to change the size of these containers, it may still be useful to apply the Align properties. In this case you may want to adjust the BorderSpacing subproperties to automatically provide some spacing between the containers, e.g. Panel.BorderSpacing.Around := 6.

Bevels are also good candiates for separating controls. I usually apply the "Line" variants of TBevel.Shape (e.g. bsBottomLine), or sometimes even the bsSpacer (which I attach to the center of its container by means of the Anchor Editor so that other controls can align symmetrically to the form center).

Moreover, there is also a TDividerBevel on the LazControls palette. It is a horizontal bevel line and contains a bold caption. In the Lazarus Tools > Options you can find some of them (e.g. Help > Help Options).

[silvercoder70]

the TBevelDivider can also be vertical (orientation property) and there are different styles you can use also

[tu]

And last question, if I want to implement a "static" divider/separator. Just for separate some UI parts and don't want to be resizable. What is the best way to do that? I found someone use TShape or TBevel 

A panel has BevelInner and BevelOuter properties which allow to draw various borders around the panel. Or use a TGroupbox the separate controls; it has a border as well, or a different background color in some widgetsets, plus a Caption. Even if you don't want to change the size of these containers, it may still be useful to apply the Align properties. In this case you may want to adjust the BorderSpacing subproperties to automatically provide some spacing between the containers, e.g. Panel.BorderSpacing.Around := 6.

Bevels are also good candiates for separating controls. I usually apply the "Line" variants of TBevel.Shape (e.g. bsBottomLine), or sometimes even the bsSpacer (which I attach to the center of its container by means of the Anchor Editor so that other controls can align symmetrically to the form center).

Moreover, there is also a TDividerBevel on the LazControls palette. It is a horizontal bevel line and contains a bold caption. In the Lazarus Tools > Options you can find some of them (e.g. Help > Help Options).

the TBevelDivider can also be vertical (orientation property) and there are different styles you can use also

Thank you so much