Advanced 12 min read Control #24

SplitContainer Control

SplitContainer divides the form into two resizable panels with a movable splitter. Perfect for side-by-side views.

What is a SplitContainer?

SplitContainer creates two panels (Panel1 and Panel2) separated by a splitter. Users can drag the splitter to resize the panels. It's perfect for explorer-style applications, editors, and dashboard layouts.

Code Example

// Configure SplitContainer
splitContainer1.Dock = DockStyle.Fill;
splitContainer1.Orientation = Orientation.Vertical;
splitContainer1.SplitterDistance = 200;
splitContainer1.Panel1MinSize = 100;
splitContainer1.Panel2MinSize = 100;

// Add controls to panels
// Panel1 - ListView (like file explorer)
ListView listView = new ListView();
listView.Dock = DockStyle.Fill;
splitContainer1.Panel1.Controls.Add(listView);

// Panel2 - DataGridView or other content
DataGridView dataGridView = new DataGridView();
dataGridView.Dock = DockStyle.Fill;
splitContainer1.Panel2.Controls.Add(dataGridView);

// Handle splitter movement
private void splitContainer1_SplitterMoved(object sender, 
    SplitterEventArgs e)
{
    // Update status bar or save splitter position
    lblStatus.Text = $"Splitter at: {splitContainer1.SplitterDistance}";
}

Exercise

Task: Create a file explorer with SplitContainer.

  1. Add a SplitContainer with Dock = Fill.
  2. Panel1: Add a TreeView for folder navigation.
  3. Panel2: Add a ListView for files.
  4. Make it show files from the selected folder.
  5. Add a vertical SplitContainer with a horizontal one inside.
  6. Save/restore the splitter position.
Key Takeaway

SplitContainer creates resizable panels. Use it for side-by-side views, explorers, and flexible layouts.

Previous: SaveFileDialog Next: TableLayoutPanel
Controls