C# Windows Forms 강의 6편: TableLayoutPanel과 SplitContainer

1. 강의 개요

이번 강의에서는 Windows Forms의 TableLayoutPanel과 SplitContainer 컨트롤을 사용하여 정렬된 레이아웃을 구성하고, 화면을 분할하여 사용자 인터페이스를 설계하는 방법을 배웁니다.
이 두 컨트롤은 복잡한 UI를 구성할 때 유용하며, 레이아웃 관리를 더 체계적으로 할 수 있도록 도와줍니다.

---

2. 학습 목표

1. TableLayoutPanel을 사용해 정렬된 레이아웃 구성.
2. SplitContainer로 화면을 동적으로 분할.
3. 각 컨트롤의 주요 속성과 활용 방법 익히기.

---

3. TableLayoutPanel (테이블 레이아웃 패널)

TableLayoutPanel이란?

TableLayoutPanel은 행(Row)과 열(Column)을 기반으로 컨트롤을 정렬하여 배치할 수 있는 컨테이너입니다.

• 각 셀(Cell)에 컨트롤을 배치하여 일관된 레이아웃을 유지할 수 있습니다.
• 화면 크기가 변경되더라도 비율에 따라 레이아웃이 조정됩니다.

주요 속성

속성 설명 예제

RowCount	행(Row)의 개수를 설정	tableLayoutPanel1.RowCount = 3;
ColumnCount	열(Column)의 개수를 설정	tableLayoutPanel1.ColumnCount = 2;
Dock	TableLayoutPanel이 부모 컨트롤에 꽉 차도록 설정	tableLayoutPanel1.Dock = DockStyle.Fill;
GrowStyle	행 또는 열 추가 방식 설정 (AddRows, AddColumns)	tableLayoutPanel1.GrowStyle = TableLayoutPanelGrowStyle.AddRows;

사용 예제

tableLayoutPanel1.RowCount = 2;
tableLayoutPanel1.ColumnCount = 2;
tableLayoutPanel1.Controls.Add(new Label() { Text = "이름:" }, 0, 0);
tableLayoutPanel1.Controls.Add(new TextBox(), 1, 0);
tableLayoutPanel1.Controls.Add(new Label() { Text = "나이:" }, 0, 1);
tableLayoutPanel1.Controls.Add(new TextBox(), 1, 1);

---

4. SplitContainer (분할 컨테이너)

SplitContainer란?

SplitContainer는 두 개의 Panel로 화면을 나누고, 분리선을 드래그하여 Panel의 크기를 동적으로 조정할 수 있는 컨테이너입니다.

• Orientation 속성을 통해 가로 또는 세로로 화면 분할 가능.
• 두 Panel은 개별적으로 컨트롤을 포함할 수 있습니다.

주요 속성

속성 설명 예제

Orientation	분할 방향 설정 (Horizontal, Vertical)	splitContainer1.Orientation = Orientation.Vertical;
SplitterDistance	분리선의 초기 위치 설정	splitContainer1.SplitterDistance = 200;
Dock	SplitContainer가 부모 컨트롤에 꽉 차도록 설정	splitContainer1.Dock = DockStyle.Fill;

사용 예제

splitContainer1.Orientation = Orientation.Horizontal;
splitContainer1.Panel1.Controls.Add(new Label() { Text = "위쪽 패널" });
splitContainer1.Panel2.Controls.Add(new Button() { Text = "아래쪽 패널" });

---

5. 실습: TableLayoutPanel과 SplitContainer를 활용한 레이아웃 구성

요구사항

1. TableLayoutPanel에 Label과 TextBox를 사용해 사용자 정보를 입력받는 UI를 구성합니다.
2. SplitContainer를 사용해 화면을 위/아래로 분할하고, 각각의 Panel에 다른 컨트롤을 추가합니다.

---

폼 구성

컨트롤 타입 이름 텍스트 위치 (X, Y) 크기 (Width x Height)

TableLayoutPanel	tableLayoutPanel1	(없음)	(20, 20)	(400 x 100)
SplitContainer	splitContainer1	(없음)	(20, 140)	(400 x 200)
Label (TableLayoutPanel)	lblName	"이름:"	셀(0, 0)	자동 크기
TextBox (TableLayoutPanel)	txtName	(비어 있음)	셀(1, 0)	자동 크기
Label (TableLayoutPanel)	lblAge	"나이:"	셀(0, 1)	자동 크기
TextBox (TableLayoutPanel)	txtAge	(비어 있음)	셀(1, 1)	자동 크기
Label (SplitContainer Panel1)	lblPanel1	"위쪽 패널"	(10, 10)	자동 크기
Button (SplitContainer Panel2)	btnPanel2	"아래쪽 버튼"	(10, 10)	(150 x 30)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

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

        private void InitializeTableLayoutPanel()
        {
            // TableLayoutPanel 구성
            tableLayoutPanel1.RowCount = 2;
            tableLayoutPanel1.ColumnCount = 2;
            tableLayoutPanel1.Dock = DockStyle.Top;

            // Label과 TextBox 추가
            tableLayoutPanel1.Controls.Add(new Label() { Text = "이름:" }, 0, 0);
            tableLayoutPanel1.Controls.Add(new TextBox() { Name = "txtName" }, 1, 0);
            tableLayoutPanel1.Controls.Add(new Label() { Text = "나이:" }, 0, 1);
            tableLayoutPanel1.Controls.Add(new TextBox() { Name = "txtAge" }, 1, 1);
        }

        private void InitializeSplitContainer()
        {
            // SplitContainer 구성
            splitContainer1.Orientation = Orientation.Horizontal;
            splitContainer1.Dock = DockStyle.Fill;

            // Panel1에 Label 추가
            Label lblPanel1 = new Label()
            {
                Text = "위쪽 패널",
                AutoSize = true,
                Location = new System.Drawing.Point(10, 10)
            };
            splitContainer1.Panel1.Controls.Add(lblPanel1);

            // Panel2에 Button 추가
            Button btnPanel2 = new Button()
            {
                Text = "아래쪽 버튼",
                Location = new System.Drawing.Point(10, 10)
            };
            btnPanel2.Click += BtnPanel2_Click;
            splitContainer1.Panel2.Controls.Add(btnPanel2);
        }

        private void BtnPanel2_Click(object sender, EventArgs e)
        {
            MessageBox.Show("아래쪽 버튼이 클릭되었습니다!");
        }
    }
}

---

6. 실행 결과

1. TableLayoutPanel:
   • "이름"과 "나이" 입력 필드가 정렬된 레이아웃으로 표시됩니다.
2. SplitContainer:
   • 위쪽 Panel에는 "위쪽 패널" Label이 표시됩니다.
   • 아래쪽 Panel에는 "아래쪽 버튼" 버튼이 추가됩니다.
3. 버튼 클릭 시 메시지 출력:
4. 아래쪽 버튼이 클릭되었습니다!

---

7. 주요 개념 요약

1. TableLayoutPanel은 정렬된 행/열 기반 레이아웃을 제공합니다.
2. SplitContainer는 화면을 동적으로 분할하고 Panel 크기를 조정할 수 있습니다.

---