A pane used in a
XamDockManager that can display one or more panes stacked horizontally or vertically.
This sample demonstrates how to create a SplitPane in the various supported pane locations (e.g. docked left) and use the SplitPane properties to control the orientation of the splitter bar between the SplitPane's children and the distribution of the size available.
Imports Infragistics.Windows.DockManager
Private Sub InitializeDmSplitPanes(ByVal dockManager As XamDockManager)
Dim splitHorz As New SplitPane()
' The SplitterOrientation determine the orientation
' of the splitter bar used to separate the children
splitHorz.SplitterOrientation = Orientation.Horizontal
' since this will be a root split pane, we will initialize
' the default location such that it is docked on the left
' edge of the dockmanager
XamDockManager.SetInitialLocation(splitHorz, InitialPaneLocation.DockedLeft)
' The RelativeSize is an attached property that is used
' to determine the percentage of the available space that
' should be assigned to the pane. In this example, since
' the splitter orientation is horizontal only the height
' will affect the size. The top pane will be given 2/3
' of the available height since it has a relative size
' of 200/300 whereas the bottom pane has a relative size
' of 100/300.
Dim cpTop As New ContentPane()
cpTop.Header = "Top"
cpTop.Content = "Top"
SplitPane.SetRelativeSize(cpTop, New Size(100, 200))
Dim cpBottom As New ContentPane()
cpBottom.Header = "Bottom"
cpBottom.Content = "Bottom"
SplitPane.SetRelativeSize(cpTop, New Size(100, 100))
' note, the order in which the panes are added
' has an impact on their position. the first visible
' item is positioned on the left/top depending on
' the splitter orientation with the next pane following
' to the right/bottom respectively
splitHorz.Panes.Add(cpTop)
splitHorz.Panes.Add(cpBottom)
' create a second root split pane with a vertical splitter between
' the items
Dim splitVert As New SplitPane()
splitVert.SplitterOrientation = Orientation.Vertical
XamDockManager.SetInitialLocation(splitVert, InitialPaneLocation.DockedBottom)
' Here the RelativeSize is not set so each gets an
' equal percentage and the available width will be
' evenly distributed between the panes
Dim cpLeft As New ContentPane()
cpLeft.Content = "Left"
cpLeft.Header = "Left"
splitVert.Panes.Add(cpLeft)
Dim tgMiddle As New TabGroupPane()
Dim cpTab1 As New ContentPane()
cpTab1.Header = "Tab 1"
cpTab1.Content = "1"
tgMiddle.Items.Add(cpTab1)
Dim cpTab2 As New ContentPane()
cpTab2.Header = "Tab 2"
cpTab2.Content = "2"
tgMiddle.Items.Add(cpTab2)
splitVert.Panes.Add(tgMiddle)
Dim cpRight As New ContentPane()
cpRight.Header = "Right"
cpRight.Content = "Right"
splitVert.Panes.Add(cpRight)
dockManager.Panes.Add(splitHorz)
dockManager.Panes.Add(splitVert)
End Sub
using Infragistics.Windows.DockManager;
private void InitializeDmSplitPanes(XamDockManager dockManager)
{
SplitPane splitHorz = new SplitPane();
// The SplitterOrientation determine the orientation
// of the splitter bar used to separate the children
splitHorz.SplitterOrientation = Orientation.Horizontal;
// since this will be a root split pane, we will initialize
// the default location such that it is docked on the left
// edge of the dockmanager
XamDockManager.SetInitialLocation(splitHorz, InitialPaneLocation.DockedLeft);
// The RelativeSize is an attached property that is used
// to determine the percentage of the available space that
// should be assigned to the pane. In this example, since
// the splitter orientation is horizontal only the height
// will affect the size. The top pane will be given 2/3
// of the available height since it has a relative size
// of 200/300 whereas the bottom pane has a relative size
// of 100/300.
ContentPane cpTop = new ContentPane();
cpTop.Header = "Top";
cpTop.Content = "Top";
SplitPane.SetRelativeSize(cpTop, new Size(100, 200));
ContentPane cpBottom = new ContentPane();
cpBottom.Header = "Bottom";
cpBottom.Content = "Bottom";
SplitPane.SetRelativeSize(cpTop, new Size(100, 100));
// note, the order in which the panes are added
// has an impact on their position. the first visible
// item is positioned on the left/top depending on
// the splitter orientation with the next pane following
// to the right/bottom respectively
splitHorz.Panes.Add(cpTop);
splitHorz.Panes.Add(cpBottom);
// create a second root split pane with a vertical splitter between
// the items
SplitPane splitVert = new SplitPane();
splitVert.SplitterOrientation = Orientation.Vertical;
XamDockManager.SetInitialLocation(splitVert, InitialPaneLocation.DockedBottom);
// Here the RelativeSize is not set so each gets an
// equal percentage and the available width will be
// evenly distributed between the panes
ContentPane cpLeft = new ContentPane();
cpLeft.Content = "Left";
cpLeft.Header = "Left";
splitVert.Panes.Add(cpLeft);
TabGroupPane tgMiddle = new TabGroupPane();
ContentPane cpTab1 = new ContentPane();
cpTab1.Header = "Tab 1";
cpTab1.Content = "1";
tgMiddle.Items.Add(cpTab1);
ContentPane cpTab2 = new ContentPane();
cpTab2.Header = "Tab 2";
cpTab2.Content = "2";
tgMiddle.Items.Add(cpTab2);
splitVert.Panes.Add(tgMiddle);
ContentPane cpRight = new ContentPane();
cpRight.Header = "Right";
cpRight.Content = "Right";
splitVert.Panes.Add(cpRight);
dockManager.Panes.Add(splitHorz);
dockManager.Panes.Add(splitVert);
}
<igDock:XamDockManager>
<igDock:XamDockManager.Panes>
<!-- The SplitterOrientation determine the orientation
of the splitter bar used to separate the children
-->
<igDock:SplitPane SplitterOrientation="Horizontal"
igDock:XamDockManager.InitialLocation="DockedLeft">
<!-- The RelativeSize is an attached property that is used
to determine the percentage of the available space that
should be assigned to the pane. In this example, since
the splitter orientation is horizontal only the height
will affect the size. The top pane will be given 2/3
of the available height since it has a relative size
of 200/300 whereas the bottom pane has a relative size
of 100/300.
-->
<igDock:ContentPane Header="Top" Content="Top"
igDock:SplitPane.RelativeSize="100, 200" />
<!-- note, the order in which the panes are added
has an impact on their position. the first visible
item is positioned on the left/top depending on
the splitter orientation with the next pane following
to the right/bottom respectively
-->
<igDock:ContentPane Header="Bottom" Content="Bottom"
igDock:SplitPane.RelativeSize="100, 100" />
</igDock:SplitPane>
<!-- create a second root split pane with a vertical splitter
between the items. the "content" property of the split
pane is its panes collection so the children elements
you add will be the children of the pane -->
<igDock:SplitPane SplitterOrientation="Vertical"
igDock:XamDockManager.InitialLocation="DockedBottom">
<!-- Here the RelativeSize is not set so each gets an
equal percentage and the available width will be
evenly distributed between the panes -->
<igDock:ContentPane Header="Left" Content="Left" />
<igDock:TabGroupPane>
<igDock:ContentPane Header="Tab 1" Content="1" />
<igDock:ContentPane Header="Tab 2" Content="2" />
</igDock:TabGroupPane>
<igDock:ContentPane Header="Right" Content="Right" />
</igDock:SplitPane>
</igDock:XamDockManager.Panes>
</igDock:XamDockManager>
Target Platforms: Windows 10, Windows 8.1, Windows 8, Windows 7, Windows Server 2012, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2
