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.