C# Windows Forms 강의 34편: TableLayoutPanel을 활용한 유연한 레이아웃 관리

1. 강의 개요

이번 강의에서는 TableLayoutPanel을 사용하여 윈도우 폼에서 유연한 레이아웃을 관리하는 방법을 학습합니다.
TableLayoutPanel은 행(Row)과 열(Column)로 구성된 그리드 기반의 레이아웃 관리 도구로, 화면 크기에 따라 컨트롤의 크기나 위치를 동적으로 조정할 수 있습니다.

---

2. 학습 목표

1. TableLayoutPanel의 기본 사용법 익히기.
2. 행(Row)과 열(Column)을 동적으로 구성하고 컨트롤 배치.
3. 비율 기반 크기 설정으로 화면 크기 변화에 대응.

---

3. TableLayoutPanel이란?

TableLayoutPanel은 행과 열로 구성된 그리드 형태의 레이아웃 컨트롤입니다.

• 고정 크기, 비율 기반 크기, 자동 크기를 지원하여 화면 크기에 따라 유연하게 동작.
• 컨트롤 간 균등 배치가 가능하며, 동적 레이아웃 관리를 제공.

---

TableLayoutPanel 주요 속성

속성 설명 예제

RowCount	행의 개수를 설정	tableLayoutPanel1.RowCount = 2;
ColumnCount	열의 개수를 설정	tableLayoutPanel1.ColumnCount = 2;
Dock	TableLayoutPanel의 부모 컨트롤에 맞게 크기 조정	tableLayoutPanel1.Dock = DockStyle.Fill;
GrowStyle	행과 열 추가 방식 (AddRows, AddColumns)	tableLayoutPanel1.GrowStyle = TableLayoutPanelGrowStyle.AddRows;
CellBorderStyle	셀 테두리 스타일	tableLayoutPanel1.CellBorderStyle = TableLayoutPanelCellBorderStyle.Single;

---

4. 실습: TableLayoutPanel을 사용한 유연한 레이아웃 관리

요구사항

1. TableLayoutPanel을 2행 2열로 설정.
2. 각 셀에 Button을 배치.
3. 화면 크기가 변경될 때 버튼 크기가 동적으로 변경.

---

폼 구성

컨트롤 타입 이름 텍스트 위치 크기

TableLayoutPanel	tableLayoutPanel1	(없음)	폼 중앙	(부모 크기에 맞게 Dock)
Button	btn1, btn2, btn3, btn4	"버튼 1", "버튼 2", "버튼 3", "버튼 4"	TableLayoutPanel 셀 내부	(부모에 맞게 자동 크기)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeTableLayoutPanel();
        }

        private void InitializeTableLayoutPanel()
        {
            // TableLayoutPanel 설정
            tableLayoutPanel1.RowCount = 2;
            tableLayoutPanel1.ColumnCount = 2;
            tableLayoutPanel1.Dock = DockStyle.Fill;
            tableLayoutPanel1.CellBorderStyle = TableLayoutPanelCellBorderStyle.Single;

            // 각 행과 열의 크기를 비율로 설정
            for (int i = 0; i < 2; i++)
            {
                tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 50)); // 각 행의 높이 50%
                tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50)); // 각 열의 너비 50%
            }

            // 버튼 추가
            Button btn1 = new Button { Text = "버튼 1", Dock = DockStyle.Fill };
            Button btn2 = new Button { Text = "버튼 2", Dock = DockStyle.Fill };
            Button btn3 = new Button { Text = "버튼 3", Dock = DockStyle.Fill };
            Button btn4 = new Button { Text = "버튼 4", Dock = DockStyle.Fill };

            tableLayoutPanel1.Controls.Add(btn1, 0, 0); // 1행 1열
            tableLayoutPanel1.Controls.Add(btn2, 1, 0); // 1행 2열
            tableLayoutPanel1.Controls.Add(btn3, 0, 1); // 2행 1열
            tableLayoutPanel1.Controls.Add(btn4, 1, 1); // 2행 2열
        }
    }
}

---

Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private TableLayoutPanel tableLayoutPanel1;

        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        private void InitializeComponent()
        {
            this.tableLayoutPanel1 = new TableLayoutPanel();
            this.SuspendLayout();

            // tableLayoutPanel1
            this.tableLayoutPanel1.Location = new System.Drawing.Point(10, 10);
            this.tableLayoutPanel1.Name = "tableLayoutPanel1";
            this.tableLayoutPanel1.Size = new System.Drawing.Size(380, 280);
            this.tableLayoutPanel1.TabIndex = 0;

            // Form1
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(400, 300);
            this.Controls.Add(this.tableLayoutPanel1);
            this.Name = "Form1";
            this.Text = "TableLayoutPanel 예제";
            this.ResumeLayout(false);
        }
    }
}

---

5. 실행 결과

1. 초기 상태
   • TableLayoutPanel이 2행 2열로 나뉘고 각 셀에 버튼이 배치됩니다.
   • 각 버튼은 동일한 크기를 가지며 TableLayoutPanel을 꽉 채웁니다.
2. 화면 크기 조정
   • 폼 크기를 변경하면 버튼 크기와 배치가 동적으로 조정됩니다.

---

6. 주요 개념 요약

1. TableLayoutPanel의 RowCount와 ColumnCount
   • 행과 열의 개수를 설정하여 그리드 형태의 레이아웃 구성.
2. 비율 기반 크기 설정
   • RowStyle과 ColumnStyle의 SizeType.Percent를 사용해 화면 크기에 따라 동적으로 크기 조정.
3. Dock 속성
   • 컨트롤의 Dock 속성을 DockStyle.Fill로 설정하여 셀을 완전히 채우도록 설정.