Splitter

Introduction

The Splitter control can be used to control the size of two controls, usually in a StackPanel. The user can push+drag a Splitter to change control sizes.

Code Example: Changing ListBox Sizes with a Splitter

The following code creates two ListBoxes with a Splitter in between them. The Splitter can be used to adjust the ListBox sizes.

// Initialize
var stackPanel = new StackPanel();
stackPanel.Spacing = 1;
stackPanel.AddToRoot();

var listBox = new ListBox();
stackPanel.AddChild(listBox);
for(int i = 0; i < 10; i++)
{
    listBox.Items.Add("List Item " + i);
}

var splitter = new Splitter();
stackPanel.AddChild(splitter);
splitter.Dock(Dock.FillHorizontally);
splitter.Height = 5;

var listBox2 = new ListBox();
stackPanel.AddChild(listBox2);
for (int i = 0; i < 10; i++)
{
    listBox2.Items.Add("List Item " + i);
}

Try on XnaFiddle.NET

Code Example: Left/Right Split

The following code creates a horizontal StackPanel with two ListBoxes separated by a Splitter, creating a left/right split layout. The Splitter automatically uses column resizing when placed inside a horizontal StackPanel.

// Initialize
var stackPanel = new StackPanel();
stackPanel.Orientation = Orientation.Horizontal;
stackPanel.Width = 500;
stackPanel.Height = 300;
stackPanel.Spacing = 1;
stackPanel.AddToRoot();

var leftListBox = new ListBox();
leftListBox.Width = 200;
leftListBox.Dock(Dock.FillVertically);
stackPanel.AddChild(leftListBox);
for (int i = 0; i < 10; i++)
{
    leftListBox.Items.Add("Left Item " + i);
}

var splitter = new Splitter();
splitter.Dock(Dock.FillVertically);
splitter.Width = 5;
stackPanel.AddChild(splitter);

var rightListBox = new ListBox();
rightListBox.Dock(Dock.FillVertically);
stackPanel.AddChild(rightListBox);
for (int i = 0; i < 10; i++)
{
    rightListBox.Items.Add("Right Item " + i);
}

Try on XnaFiddle.NET