Pane Orientation

• Feb 02, 2023
• 2 minutes to read

A Splitter can display its panes stacked horizontally or vertically within their containers, which can be either a splitter control or a parent pane object.

Root Panes Orientation

Splitter exposes the SplitterSettings.Orientation property to give you control over the arrangement of root panes - the panes contained within the splitter’s SplitterSettings.Panes collection.

Depending upon the Orientation property’s setting, root panes can be arranged one after another, either horizontally (the default orientation) or vertically.

• The Orientation property is set to Orientation.Horizontal.

  

• The Orientation property is set to Orientation.Vertical.

  

Child Panes Orientation

Child panes, which belong to a MVCxSplitterPane.Panes collection of a parent pane, are automatically arranged in an orientation opposite to their immediate parent pane.

For instance, if root panes are arranged horizontally and one root pane is a parent pane (it has child panes), its child panes are arranged vertically within the pane (take a look at the second root pane in the picture below).

And vice versa, if root panes are arranged vertically, the immediate child panes of a root pane are stacked horizontally within their parent pane.

Example

C#

@Html.DevExpress().Splitter(
     settings => {
          settings.Name = "splFullScreenMode";
          settings.Orientation = Orientation.Vertical;
          settings.FullscreenMode = true;
          settings.Panes.Add(pane => {
               ...
     }).GetHtml()

For a full example, see Splitter - Fullscreen Mode demo.