Splitter

Introduction

The Splitter control is a layouting control that separates the screen into two areas, so called panes. It offers a built-in drag and drop functionality so that the user can easily resize the two areas by dragging the separator. You can decide to have the two areas separated horizontally or vertically by using the splitterOrientation attribute. There are properties available for separator positioning ( splitterPosition ) and for making settings on the minimum widths of the areas ( minSizeFirstPane , minSizeSecondPane ). To fill the two panes with controls, you can use the corresponding addFirstPaneContent and addSecondPaneContent methods.

Examples

Horizontal Splitter

Vertical Splitter


Keyboard Support

To navigate between the Splitter panes and their contents, press the Tab key. If a content pane is focused in a vertical Splitter, pressing Shift+Arrow left or Shift+Arrow right resizes that pane. For horizontal Splitters the key combination is Shift+Up and Shift+Down. To maximize the selected pane, press the End key, and to minimize it press the Home key. Furthermore clicking F6 steps only through the Splitter content panes without selecting the Splitter contents. Stepping backwards is performed by pressing Shift+F6.

API Documentation

See API documentation