SplitContainer

A SplitContainer is an advanced container control that divides an area of the screen into two separate panels (Panel1 and Panel2) with a movable splitter between them.
The operator can drag this splitter with the mouse to adjust the layout—typically used to control the relative size of a menu area and a content area.

Common Use Cases

• Master–Detail Views

The most common usage.
Place a TreeView or ListBox in Panel1, and place detail information for the selected item (Labels, TextBoxes, etc.) in Panel2.

• Navigation Menu + Content

Use Panel1 for main menu buttons, and Panel2 for the currently active screen or content panels.

• Horizontal Split Layout

Set Orientation = Horizontal to split the screen into a top (Panel1) and bottom (Panel2) area.
Example: Place the main interface on the top panel and an Alarm List or Log Viewer (DataGridView) on the bottom panel.

Basic Configuration and Behavior

Select Orientation (Advanced Panel)

Choose the desired orientation via the Orientation property:

• Vertical – left/right panels with a vertical splitter (most common)
• Horizontal – top/bottom panels with a horizontal splitter

Designing the Layout

Drag and drop other controls (TreeView, Panels, etc.) directly onto Panel1 or Panel2.
In the project tree, these objects will appear as children of Panel1 or Panel2.

Advanced Panel – Key Properties

This component’s structure is defined primarily in the Advanced panel.

Orientation
Specifies whether the splitter divides the container vertically (left/right) or horizontally (top/bottom).
SplitterDistance
Sets the initial pixel position of the splitter at design time.
IsSplitterFixed
When set to True, prevents the operator from resizing the panels by dragging the splitter.
FixedPanel
Determines which panel remains fixed when the SplitContainer is resized (e.g., when the window is maximized):

• Panel1 → Panel1 stays fixed; Panel2 expands/shrinks
• Panel2 → Panel2 stays fixed; Panel1 expands/shrinks
• None (Default) → Both panels resize proportionally

Panel1Collapsed / Panel2Collapsed

When set to True, completely hides the corresponding panel and pushes the splitter to that edge.
Note: Panel1 and Panel2 have their own properties such as BackColor, BorderStyle, etc.

Usage Example

Example: Classic Master–Detail (Menu + Content)

1. Add a SplitContainer to the screen.
2. In the Advanced panel, keep Orientation = Vertical (default).
3. Set SplitterDistance = 250 to allocate 250px width for the left menu.
4. Drag a TreeView into Panel1 and set its Dock = Fill.
5. Drag a Panel into Panel2 and set its Dock = Fill.
6. Bind a script to the TreeView’s Index Change event to update the content panel based on the selected node.

Result:
The operator selects an item from the left menu, and the right panel updates accordingly.
The operator can also resize the menu area by dragging the splitter.