skills/syncfusion/winforms-ui-components-skills/syncfusion-winforms-splitcontainer

syncfusion-winforms-splitcontainer

SKILL.md

Implementing SplitContainerAdv in Windows Forms

SplitContainerAdv is a container control that enables developers to create resizable dual-panel layouts with a movable splitter bar. It's used when you need flexible panel division in forms.

When to Use This Skill

Use this skill when you need to:

  • Create a resizable split-panel layout in a Windows Forms application
  • Add controls to separate panels within a container
  • Allow users to resize panels by dragging the splitter
  • Configure horizontal or vertical panel orientation
  • Customize splitter appearance and behavior
  • Collapse or expand panels dynamically
  • Handle panel resize events

Component Overview

SplitContainerAdv provides:

  • Two resizable panels (Panel1 and Panel2) separated by a splitter
  • Support for horizontal and vertical orientation
  • Panel collapsing/expanding capabilities
  • Rich customization of splitter appearance
  • Event handling for splitter movements
  • Nested container support (SplitContainerAdv within SplitContainerAdv)
  • Visual styling options

Documentation and Navigation Guide

Getting Started

πŸ“„ Read: references/getting-started.md

  • Assembly dependencies and NuGet setup
  • Creating a new Windows Forms project
  • Adding SplitContainerAdv via designer
  • Adding SplitContainerAdv programmatically
  • Adding child controls to panels
  • Setting splitter orientation

Panel Configuration

πŸ“„ Read: references/panel-configuration.md

  • Panel orientation (horizontal vs vertical)
  • Fixed and resizable panels
  • Minimum panel size constraints
  • Collapsing and expanding panels at runtime
  • Panel-specific properties and behavior

Splitter Customization

πŸ“„ Read: references/splitter-customization.md

  • Splitter distance and positioning
  • Fixed splitter configuration
  • Splitter width and increment settings
  • Thumbnail arrow and grip appearance
  • Hover state customization
  • Runtime appearance changes

Appearance and Styling

πŸ“„ Read: references/appearance-styling.md

  • Background color configuration
  • Foreground properties (fonts, colors)
  • Border styling options
  • Panel-specific appearance overrides
  • Gradient and brush customization

Events and Interactions

πŸ“„ Read: references/events-handling.md

  • SplitterMoved event handling
  • SplitterMoving event handling
  • Common event patterns
  • Event args and data access
  • Preventing splitter movement

Quick Start Example

Basic implementation of SplitContainerAdv:

// Create and configure SplitContainerAdv
SplitContainerAdv splitContainer = new SplitContainerAdv();
splitContainer.Dock = DockStyle.Fill;
splitContainer.Orientation = Orientation.Horizontal;
splitContainer.SplitterDistance = 150;

// Add controls to panels
Label label1 = new Label { Text = "Panel 1", Dock = DockStyle.Fill };
Label label2 = new Label { Text = "Panel 2", Dock = DockStyle.Fill };

splitContainer.Panel1.Controls.Add(label1);
splitContainer.Panel2.Controls.Add(label2);

// Add to form
this.Controls.Add(splitContainer);
' Create and configure SplitContainerAdv
Dim splitContainer As New SplitContainerAdv()
splitContainer.Dock = DockStyle.Fill
splitContainer.Orientation = Orientation.Horizontal
splitContainer.SplitterDistance = 150

' Add controls to panels
Dim label1 As New Label With {.Text = "Panel 1", .Dock = DockStyle.Fill}
Dim label2 As New Label With {.Text = "Panel 2", .Dock = DockStyle.Fill}

splitContainer.Panel1.Controls.Add(label1)
splitContainer.Panel2.Controls.Add(label2)

' Add to form
Me.Controls.Add(splitContainer)

Common Patterns

Pattern 1: Fixed Left Panel, Resizable Right Panel

splitContainer.Orientation = Orientation.Vertical;
splitContainer.FixedPanel = FixedPanel.Panel1;
splitContainer.Panel1MinSize = 200;
splitContainer.SplitterDistance = 200;

Pattern 2: Collapsible Panels

splitContainer.PanelToBeCollapsed = CollapsedPanel.Panel2;
splitContainer.TogglePanelOn = TogglePanelOn.DoubleClick;

Pattern 3: Vertical Layout with Equal Sizing

splitContainer.Orientation = Orientation.Vertical;
splitContainer.SplitterDistance = splitContainer.Height / 2;
splitContainer.Panel1MinSize = 50;
splitContainer.Panel2MinSize = 50;

Key Properties

Property Type Purpose
Orientation Orientation Sets horizontal or vertical split (Default: Horizontal)
SplitterDistance int Distance from edge to splitter bar in pixels
FixedPanel FixedPanel Which panel remains fixed during resizing (Panel1, Panel2, or None)
Panel1Collapsed bool Whether Panel1 is hidden
Panel2Collapsed bool Whether Panel2 is hidden
IsSplitterFixed bool Whether splitter can be moved
SplitterWidth int Width of the splitter bar in pixels
Panel1MinSize int Minimum size for Panel1 (default: 25)
Panel2MinSize int Minimum size for Panel2 (default: 25)
ExpandFill BrushInfo Color of expand arrow fill
HotGripDark BrushInfo Grip color on hover

Quick Tips

  • Default Orientation: Use Orientation.Horizontal for left-right split, Orientation.Vertical for top-bottom
  • Minimum Sizing: Set Panel1MinSize and Panel2MinSize to prevent panels from collapsing too small
  • Fixed Panels: Use FixedPanel to prevent resizing one side, useful for toolbars or sidebars
  • Panel Collapse: Double-click the splitter to collapse when TogglePanelOn = TogglePanelOn.DoubleClick
  • Nested Containers: Add a SplitContainerAdv to a panel of another SplitContainerAdv for complex layouts
  • Docking: Use Dock = DockStyle.Fill to make the control fill its parent container
Weekly Installs
7
First Seen
1 day ago
Installed on
opencode7
gemini-cli7
deepagents7
antigravity7
claude-code7
github-copilot7