SplitContainer

WATCH & LEARN0:50 · Animated tutorial

7 scenesPlay, pause, or scrub at your own pace

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.

info

For a complete 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.

Collapsible Panels

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

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.

info

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.

When a docked child control has its own border, Wisej.NET removes the inner SplitterPanel border to avoid displaying two adjacent borders.

tip

Merging the borders works for any control with the BorderStyle property.

Icons and Tools

Panels can also show a custom icon and any number of tools. See Embedded Tools for details.

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.
Source code	https://github.com/iceteagroup/wisej-js