SplitContainer

Represents a control consisting of a movable bar that divides a container's display area into two resizable panels.

You can add controls to the two resizable panels, and you can add other SplitContainer controls to existing SplitContainer panels to create many resizable display areas.

Use the SplitContainer control to divide the display area of a container (such as a Form) and allow the user to resize controls that are added to the SplitContainer panels. When the user passes the mouse pointer over the splitter, the cursor changes to indicate that the controls inside the SplitContainer control can be resized.

For a full list of properties, methods and events see the API documentation.

Features

Orientation

The splitter can be arranged horizontally or vertically by setting the Orientation property.

SplitContainer with Horizontal Splitter
SplitContainer with Vertical Splitter

Collapsible Panels

Each SplitterPanel in the SplitContainer can collapse programmatically or by using the collapse button in the panel's header.

Collapsible Panel Example

For each panel use the ShowHeader and ShowCloseButton properties to manage the header part of the SplitterPanel. When the user collapses the panel, it collapses to its side.

Collapsed Panel Example

Only one panel can be collapsed at a time.

Nested SplitContainers

A SplitContainer can contain other SplitContainer controls and "merge" the internal splitter bar to make it look and behave as one control. It's all about the borders of the inner SplitterPanel.

Nested SplitContainer Example

Wisej.NET detects whether the docked child control has borders, if it does it removes the border from the inner SplitterPanel.

Icons and Tools

Panels can also show a custom icon and any number of tools. See Embedded Tools for more details on this awesome feature.

Icons and Tools Example

Advanced

JavaScript Widget

Item
Description

Class name

"wisej.web.SplitContainer"

Theme appearance

"splitpane", see Themes.

Child components

"panel1" and "panel2" are the two panels. "splitter" is the splitter bar. See JavaScript.

Last updated

Was this helpful?