C# TableLayoutPanel Example

The C# TableLayoutPanel control is a powerful tool for creating flexible and structured layouts in your Windows Forms applications. If you’re familiar with HTML tables, the TableLayoutPanel works in a similar way, allowing you to arrange controls in rows and columns. This makes it ideal for scenarios like:

  • Grid-based data entry forms
  • Calendar or schedule displays
  • Custom dashboard-style layouts

Understanding the TableLayoutPanel

Let’s break down the key concepts:

  • Cells:  The basic building blocks of the TableLayoutPanel. Each cell can hold one control or another container panel.
  • Rows and Columns: Define the structure. Add and customize them to fit your layout needs.
  • AutoSize: Automatically resizes rows or columns based on the content within the cells.
  • RowSpan and ColumnSpan: Allow a control to occupy multiple cells within the grid.
  • GrowStyle: Specifies how the TableLayoutPanel should handle adding new controls once the existing grid is filled (AddRows, AddColumns, or FixedSize).

Building a Sample Application

To illustrate these concepts effectively, let’s build a simple hospital bed allocation system. Our example will have:

  • Three floors of beds, arranged in two rows per floor.
  • Scroll bars to accommodate more beds if needed.
  • Visual indicators for allotted, reserved, and available beds.
  • A simple reservation flow.

Step-by-Step Guide

  1. Project Setup:
    • Create a new Windows Forms Application project in Visual Studio.
    • Add a SplitContainer control to the main form, and position its splitter horizontally.
    • Add a TableLayoutPanel to the top panel of the SplitContainer (Panel1).
    • Set the TableLayoutPanel’s Dock property to Fill.
  2. Document Outline:
    • Use the “Document Outline” window to easily visualize the container hierarchy and rename elements for clarity.
  3. Adding Rows and Columns:
    • Add rows to the TableLayoutPanel. Set their SizeType to AutoSize.
    • Initially, add one column.
  4. Controls and Layout:
    • Place labels, buttons, textboxes, etc., in the bottom panel (Panel2) of the SplitContainer.
    • Set the AutoScroll property to True for both the TableLayoutPanel and Panel1.
  5. Floor Labels:
    • Add labels to the TableLayoutPanel representing floor numbers.
    • Utilize the RowSpan property to make each label span two rows of beds.
  6. Adding Beds (Checkboxes):
    • GrowStyle: Set the TableLayoutPanel’s GrowStyle to FixedSize.
      • Coding: In the form’s Load event handler, use nested loops to create checkboxes for each bed:Set each checkbox’s Dock property to Fill.
      • Hook the CheckStateChanged event to a common handler function.
  7. Event Handlers:
      • Implement a handler (e.g., AllotOrFreeBed) to:Determine the bed and floor based on the checkbox that fired the event.
      • Change the checkbox’s appearance to visually indicate its allocation status.
      • Update a status label.
    • Implement a handler for the Reserve button, using GetControlFromPosition to modify the selected bed’s properties.

Code Example (AllotOrFreeBed):

C#

private void AllotOrFreeBed(object sender, EventArgs e)

{

    Control c = (Control)sender;

    TableLayoutPanelCellPosition position = contTable.GetPositionFromControl(c);

    int floorNumber = (position.Row > 1 && position.Row < 4) ? 2 : (position.Row < 2) ? 3 : 1;

 

    CheckBox chk = (CheckBox)sender;

    if (chk.Checked) 

    {

        chk.BackColor = Color.Yellow; 

        lblDisplay.Text = $”Bed Number {chk.Text} allocated on Floor {floorNumber}”;

    }

   else 

   {

       // … (reset appearance and update status)

   }

}

 

Tips and Considerations

  • Planning: Sketch your desired layout before coding.
  • Naming: Use meaningful names for controls and variables to improve code readability.

Download Your FREE

Dev Stack Starter Guide

Build, automate, and launch faster—see the automation stack developers and agencies are switching to.

  • ✅ API Templates & Code Snippets
  • ✅ Done-for-You Automation Workflows
  • ✅ Step-by-Step Funnel & CRM Guide
  • ✅ Free for Developers, Freelancers, & SaaS Builders

We Respect Your Privacy