Introduction to the Splitter Control

Introduction

A splitter is a bar that divides the body of a container into two sections. These sections are referred to as panes or frames:

The splitter bar is used to create independent sections holding various controls. The splitter can divide the sections horizontally or vertically, depending on how you create it. Among other things, the design and implementation allows displaying related data.

1. To create a new project, on the main menu, click File -> New -> VCL Forms Application - C++Builder
2. In the Object Inspector, click Caption and type Viewer

To support the splitter control, the VCL provides a class named TSplitter. The TSplitter class is derived from TGraphicControl:

To visually create a splitter bar, in the Additional section of the Tool Palette, click the TSplitter control and click the form.

Although you can add a splitter directly to a form or other container such as a frame, you should first add a panel. Set the panel Align property to one of the following values: alLeft, alTop, alRight or alBottom. Then add a splitter to the remaining section of the form (or frame). You can (should) then add another frame to finalize the sections of the splitting window.

As a descendant of the TControl class, a splitter has such characteristics as a background color, the cursor, and a width:

• By default, the (body of the) splitter displays in the color specified as the button face in Microsoft Windows. The Color property allows you to change that color
• To use a splitter, the user positions the mouse on it. At that time, the cursor appears with the default North-West pointing arrow. The user can click and hold the mouse on the splitter and start dragging. At this time, the crusor changes to display a short double-bar with two arrows whose directions depend on the orientation of the splitter (next section). These two default cursors are specifies by the Microsoft Windows standard. If you want, you can change what cursor displays while the user is dragging the splitter. To visually and easily do that, change the value of the Cursor field in the Object Inspector
• By default, a splitter appears as visible tiny bar that the user can grab and drag in the desired direction. If you want your splitter to appear, change the value or its Width property

As mentioned already, before creating a splitter, you should first add a panel and specify its alignment. The alignment you choose for that panel will serve as a pre-orientation for the splitter. In reality, the splitter is equipped with the Align property that it inherits from the TControl class. If you set the Align property of the panel to alLeft, alTop, alRight or alBottom, you should then add a splitter to the empty area of the form (or frame) and set the splitter's alignment to the same value:

• If you set the splitter's Align property to either alLeft or alRight, you will get a vertical splitter that creates two (vertical) sections
• If you set the splitter's Align property to either alTop or alBottom, you will get a horizontal splitter that creates two (horizontal) sections

After creating the splitter, in the remaining empty area of the form or frame, you should add another panel and set its alignment to alClient. In the same way, you can create as many sections as necessary and in any way.

1. On the Tool Palette, click Standard, click the TPanel object and click the form
2. In the Object Inspector, click Align and select alLeft
3. On the Tool Palette, click Additional, click the TSplitter control and click an unoccupied area of the form
4. On the Tool Palette, click Standard, click TPanel and click an unoccupied area of the form
5. In the Object Inspector, click Align and select alClient
    
   
6. Press F9 to see the result
7. Close the form and return to your programming environment
8. To create a new project, on the main menu, click File -> New -> VCL Forms Application - C++Builder
9. When asked whether you want to save, click No
10. In the Object Inspector, click Caption and type Viewer
11. In the Standard section of the Tool Palette, click the TPanel object and click the body of the form
12. In the Object Inspector, click Align and select alTop
13. On the Tool Palette, click Additional, click the TSplitter control and click an unoccupied area of the form
14. In the Object Inspector, click Align and select alTop
     
    
15. On the Tool Palette, click Standard, click TPanel and click an unoccupied area of the form
16. In the Object Inspector, click Align and select alLeft
17. On the Tool Palette, click Additional, click the TSplitter control and click an unoccupied area of the form. Make sure it gets the alLeft value for the Align property
18. On the Tool Palette, click Standard, click TPanel and click an unoccupied area of the form
19. In the Object Inspector, click Align and select alClient
     
    
20. On the Tool Palette, click Standard, click TPanel and click the body of the previously added panel (Panel3)
21. In the Object Inspector, click Align and select alBottom
22. On the Tool Palette, click Additional, click the TSplitter control and click an unoccupied area of the form
23. In the Object Inspector, click Align and select alBottom
     
    
24. On the Tool Palette, click Standard, click TPanel and click the remaining area of Panel3
25. In the Object Inspector, click Align and select alClient
     
    
26. Press F9 to test the application
27. Trying resizing the sections of the form
     
    
     
    
     
    
28. Close the form and return to your programming environment

To give a 3-D effect to a splitter, it has a Boolean property named Beveled:

__property bool Beveled = {read=FBeveled,write=SetBeveled};

This allows the splitter to appear with a raised edge. If this property is set to True:

• If the splitter is vertical, its left and right edges will appear raised
• If the splitter is horizontal, its top and bottom edges will appear raised

1. In the Structure window, click Splitter1
2. In the Object Inspector, click the check box of Beveled to set it to True
3. Press F9 to preview the application
4. Close the form and return to your programming environment

To use a splitter, the user holds the mouse on it and drag in the desired direction. This causes one section to narrow or shrink while the other section widens or grows. To let a user see the evolution of the dragging, the mouse is equipped with a cursor that may show a bar. To assist with this detail, the splitter has a property named ResizeStyle that is of type TResizeStyle:

__property Extctrls::TResizeStyle ResizeStyle = {read=FResizeStyle,write=FResizeStyle};

The TResizeStyle enumeration is defined as follows:

enum TResizeStyle{
	rsNone,
	rsLine,
	rsUpdate,
	rsPattern
};

To visually specify the resizing style, access the Object Inspector for the splitter and select the desired value from the ResizeStyle field:

• rsPattern: This is the default value. When dragged, the future position of the splitter appears with a bar but the actual splitter remains where it was, until the user releases the mouse. In which case the splitter is moved to where the mouse was released:
  

  

• rsLine: When dragged, the future position of the splitter appears as a dark line with the actual splitter still in its original position. If the user releases the mouse, the splitter moves to the new position:

  

• rsUpdate:When dragged, the splitter moves with the mouse; that is, the original position of the splitter disappears while the mouse is moving. If the user releases the mouse, the splitter gets to the new position:

  

• rsNone:When dragged, only the mouse cursor moves. The splitter remains in its position. Once the user releases the mouse, the splitter moves to where the cursor is:

  

As reviewed already, to use a splitter, the user can click and drag it to the desired direction. By default, the user can drag the splitter up to the extreme border of the container. This may get the splitter to reach the border and hide itself. If the user doesn't know how to restore the splitter, it would appear that the application doesn't have a splitter anymore. To solve this problem, you can set a minimum size for each of the sections that the splitter divides.

To let you specify a minimum size, you can use the MinSize property of the TSplitter class:

__property int MinSize = {read=FMinSize,write=FMinSize};

The default value of the TSplitter::MinSize property is 30. You can change it to a value of your choice.