Skip to main content

Using the TcxSplitter

  • 2 minutes to read

This topic covers the basics of using the TcxSplitter control. It allows you to create forms containing easily resizable areas. The example in this topic shows how to create the following form structure.

Follow the steps below to create this form structure:

  • Create a new VCL Forms application.

  • Place a panel (TPanel) on the form and name this panel ‘pnlSkyBlue’. Assign an empty string and clSkyBlue to the panel’s Caption and Color properties, respectively. Set the Align property to alLeft so that the panel is docked to the left edge of the form.

  • Place a splitter control (TcxSplitter) on the form. With default AlignSplitter and Control property settings, the splitter automatically binds to the previously left-aligned panel, so that you do not have to modify the Control property value. Set the splitter’s HotZone property to MediaPlayer8.

  • Place another panel (Panel1) on the form and set its Align property to alClient. The panel will occupy the remaining client area of the form.

At this point, you may run the application to see how the splitter works. Drag it with the mouse to resize both the created panels.

  • Select Panel1 and add a new panel control to it. Name the new panel ‘pnlMoneyGreen’. Set its Caption and Color properties to an empty string and ‘clMoneyGreen’, respectively. Align the panel with the bottom edge of Panel1 by assigning alBottom to the Align property.

  • Select Panel1 and add a splitter control to it. Set the splitter’s HotZone property to MediaPlayer9 and align the splitter with the pnlMoneyGreen panel using the Control property. Note that the splitter’s AlignSplitter property is automatically set to salBottom to match the pnlMoneyGreen panel’s alignment.

  • Select Panel1 and add one more panel (Panel2) to it. Set the new panel’s Caption and Color properties to an empty string and clSilver, respectively. Then, set the Align property of Panel2 to alClient, so it occupies the remaining client area within Panel1.

Now run the application and test the behavior of splitters.

See Also