The Splitter control allows a developer to divide the client area of a form into resizable panes. A splitter can be added 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 splitter 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.
Splitter properties include:
| Minimum Size |
Specifies the minimum size, in pixels, of the panes on either side of the splitter. Set Minimum Size to provide a minimum size the splitter must leave when resizing its neighboring control. For example, if the Align property is Left or Right, the splitter cannot resize the regions to its left or right any smaller than Minimum Size pixels. If the Align property is Top or Bottom, the splitter cannot resize the regions above or below it any smaller than Minimum Size pixels. The default value of Minimum Size is set to 30.
Note: Always set Minimum Size to a value less than half the client width of its parent. When Minimum Size is half the client width of the splitter's parent, the splitter cannot move because to do so would be to resize one of the panes less than Minimum Size pixels.
Align
Determines how the control aligns within its container (parent control). Use Align to align a control to the left, right, top or bottom of a form or panel and have it remain there even if the size of the form, panel, or component that contains the control changes. When the parent is resized, an aligned control also resizes so that it continues to span the left, right, top or bottom edge of the parent.
Hint
Contains the text string that can appear when the user moves the mouse over the control.
Color
Specifies the background color of the splitter control.
Resize Style
Specifies the effect of moving the splitter control. Use Resize Style to determine what happens when the user moves the splitter with the mouse. Resize Style options include:
None
Moving the splitter with the mouse has no effect.
Line
A line is drawn indicating the new position of the splitter that would result if the user released the mouse at the current position. The splitter does not actually move and no controls are resized.
Update
The control against which the splitter is aligned is resized based on the current mouse position, and the splitter is moved to that position.
Pattern
A pattern is drawn indicating the new position of the splitter that would result if the user released the mouse at the current position. The splitter does not actually move and no controls are resized. This is the default value for Resize Style.
Beveled
Determines whether the splitter looks beveled along the edge that moves. Set Beveled to False to remove the beveled edges from the splitter or set Beveled to True to give the edge a 3D beveled look.
The bevel on a splitter runs in a single direction only: along the edges the user moves to resize neighboring objects. Thus, if the Align property is Left or Right, the vertical edges of the splitter are beveled. If the Align property is Top or Bottom, the horizontal edges of the splitter are beveled. The default value of Beveled is False (un-checked).
