Use a Panel control to place an empty panel on a form. Panels have properties for providing a beveled border around the control, as well as methods to help manage the placement of child controls embedded in the panel.
You can also use panels to group controls together, similar to the way you can use a group box, but with a beveled border (or no border) rather than the group box outline. Panels are typically used for groups of controls within a single form.
The Splitter control divides the client area of a form into resizable panes.
Add a splitter to a form between two aligned controls to allow users to resize the controls at runtime. The splitter sits between a control aligned to one edge of the form and the controls that fill up the rest of the client area. Give the splitter the same alignment as the control that is anchored to the edge of the form. When the user moves the splitter, it resizes the anchored control. This, in turn, changes the client area of the form, and the controls that fill up the rest of the client area resize accordingly.
Use each control on the form as a separate pane. After each pane is placed, place a splitter with the same alignment to allow that pane to be resized. The last pane to be placed on the form should be client-aligned, so that it resizes automatically to fill up the remaining space after all other panes are resized.
The splitter bar can be oriented either horizontally or vertically.
Step by Step Instructions:
| Goal: | To create four (4) splitting and resizable regions on one form |
Steps:
| 01. | Create a New Form |
| 02. | Place Panel |
Standard Components > Panel
Properties:
Align: Left
Caption: Panel A
Hint: Panel A
Click on [OK]
Stretch the horizontal size of Panel A to the middle of the form
| 03. | Place Splitter |
Additional Controls > Splitter
Properties:
Align: Left
Hint: Splitter A
Beveled: True (checked)
Click on [OK]
| 04. | Place Panel |
Standard Components > Panel
Properties:
Align: Client
Caption: Panel B
Hint: Panel B
Click on [OK]
05. Select (Click on ) Panel A
06. Place Panel
Standard Components > Panel
Properties:
Align: Top
Caption: Panel C
Hint: Panel C
Click on [OK]
Stretch the vertical size of Panel C to the middle of the form
07. Place Splitter
Additional Controls > Splitter
Properties:
Align: Top
Hint: Splitter B
Beveled: True (checked)
Click on [OK]
08. Place Panel
Standard Components > Panel
Properties:
Align: Client
Caption: Panel D
Hint: Panel D
Click on [OK]
09. Select (Click on ) Panel B
10. Place Panel
Standard Components > Panel
Properties:
Align: Top
Caption: Panel E
Hint: Panel E
Click on [OK]
Stretch the vertical size of Panel E to the middle of the form
11. Place Splitter
Additional Controls > Splitter
Properties:
Align: Top
Hint: Splitter C
Beveled: True (checked)
Click on [OK]
12. Place Panel
Standard Components > Panel
Properties:
Align: Client
Caption: Panel F
Hint: Panel F
Click on [OK]
13. Save the form
14. Run the form
You should be able to see the form with four (4) re-sizable panes and should be able to re-size any pane you wish.
| 15. | Now that you understand the concept, you can place any control(s), such as DB Grid with DB Navigator, DB Edit, DB Memo, Scrolling Regions, Tab Controls, etc., on each section to take advantage of Panel and Splitter controls in the R:BASE Form Designer! |
