| Controls > Web Splitter > Getting Started |
Anatomy of a Web Splitter
Simple Container
A Web Splitter control contains one or more child panels that are split either horizontally or vertically. Splitter bars will be displayed between panels for users to drag and resize adjacent panels.
Below is a vertically split Web Splitter with 2 child panels.
Nested Containers
A Web Splitter can be nested within a child panel of another Web Splitter.
The construction of the above nested structure is described in the table below.
| Web Splitter control | Split orientation | Number of child panels | Child panel | Areas covered by child panel |
|---|---|---|---|---|
| Topmost | Horizontal | 2 | 0 | A |
| 1 (Parent panel of first-level nested Web Splitter) |
B+C+D+E | |||
| First-level nested | Vertical | 3 | 0 | B |
| 1 | C | |||
| 2 (Parent panel of second-level nested Web Splitter) |
D+E | |||
| Second-level nested | Horizontal | 2 | 0 | D |
| 1 | E |
Resize With Parent
A nested Web Splitter can fit into, and resize with its parent panel (or the browser window). This behavior is controlled with the FitParent property in Web Splitter.
| Value of FitParent property | Behavior |
|---|---|
| FitParentContainer (default) |
If a parent panel could be located, the Web Splitter will fit into and resize with the parent panel, otherwise, the Web Splitter behaves as a standalone container (see below). |
| FitWindow | The Web Splitter will fit into and resize with the browser window. Obviously, only one such container can exist on a page. |
| None | The Web Splitter is a standalone container, with its dimensions specified in the Width and Height properties. |