WinForms Layouts in C#

TableLayoutPanel

The TableLayoutPanel is a powerful control that arranges its child controls in a table-like structure. You can define rows and columns, control their sizing (fixed, percent, auto-size), and even make cells span multiple rows or columns.

Key Features:

• Defines a grid of rows and columns.
• Supports cell spanning.
• Flexible column and row sizing options.
• Useful for organizing complex forms.

var tableLayoutPanel = new TableLayoutPanel();
tableLayoutPanel.ColumnCount = 2;
tableLayoutPanel.RowCount = 3;
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Absolute, 30F));
tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.AutoSize));
tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, 50F));

var button1 = new Button { Text = "Button 1" };
var label1 = new Label { Text = "Label 1" };
tableLayoutPanel.Controls.Add(button1, 0, 0);
tableLayoutPanel.Controls.Add(label1, 1, 0);
                

FlowLayoutPanel

The FlowLayoutPanel arranges its child controls in a horizontal or vertical flow. Controls are added one after another, wrapping to the next line or column when they run out of space. It's ideal for scenarios where the number of controls can vary or when you need a dynamic list of items.

Key Features:

• Arranges controls in a flow direction (LeftToRight, TopDown, etc.).
• Supports wrapping of controls.
• Automatic resizing of controls can be configured.
• Great for toolbars, button groups, or lists.

var flowLayoutPanel = new FlowLayoutPanel();
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight;
flowLayoutPanel.WrapContents = true;

for (int i = 0; i < 10; i++)
{
    var button = new Button { Text = $"Btn {i+1}", Size = new Size(80, 25) };
    flowLayoutPanel.Controls.Add(button);
}
                

SplitContainer

The SplitContainer divides a surface into two resizable panes, separated by a draggable splitter bar. This is commonly used for master-detail views, where one pane displays a list of items and the other displays details of the selected item.

Key Features:

• Two panels for displaying different content.
• A draggable splitter for resizing.
• Orientation can be horizontal or vertical.
• Ideal for file explorers or mail clients.

var splitContainer = new SplitContainer();
splitContainer.Orientation = Orientation.Horizontal;
splitContainer.Panel1.Controls.Add(new TreeView()); // Master pane
splitContainer.Panel2.Controls.Add(new TextBox()); // Detail pane
splitContainer.SplitterDistance = 150;
                

Docking and Anchoring

Beyond panel containers, individual controls can be configured to resize and reposition themselves relative to their parent container using the Dock and Anchor properties.

• Dock: Attaches a control to one side of its parent container (e.g., DockStyle.Fill, DockStyle.Top). The docked control resizes to fill the available space.
• Anchor: Connects a control's edges to the edges of its parent container. When the parent resizes, the control resizes or moves accordingly.

// Docking a control to fill its parent
myButton.Dock = DockStyle.Fill;

// Anchoring a control to stay bottom-right
myTextBox.Anchor = AnchorStyles.Bottom | AnchorStyles.Right;
                

Best Practices for Layouts

• Use Panels Wisely: Leverage TableLayoutPanel and FlowLayoutPanel for structured and dynamic arrangements.
• Consistent Sizing: Employ percentages or auto-sizing where appropriate for flexibility across different screen resolutions.
• Accessibility: Ensure logical tab order and clear visual grouping of related controls.
• Test Resizing: Always test your application's layout under various window sizes.
• Avoid Absolute Positioning: Relying solely on fixed pixel positions makes applications difficult to maintain and adapt.