Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

SplitPane Class

A pane used in a XamDockManager that can display one or more panes stacked horizontally or vertically.
Syntax
'Declaration
 
Public Class SplitPane 
   Inherits System.Windows.FrameworkElement
public class SplitPane : System.Windows.FrameworkElement
Example
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>
Requirements

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

See Also