C# Windows Forms 강의 36편: TabControl을 활용한 다중 페이지 인터페이스 구성

1. 강의 개요

이번 강의에서는 TabControl을 사용하여 다중 페이지 인터페이스를 구성하는 방법을 학습합니다.
TabControl은 탭을 클릭하여 각기 다른 페이지를 표시할 수 있는 컨트롤로, 사용자 친화적인 UI를 제공하는 데 매우 유용합니다.

---

2. 학습 목표

1. TabControl을 사용해 다중 페이지 UI 구성.
2. 탭(Page)마다 컨트롤을 추가하고 독립적인 동작 구현.
3. 동적으로 탭 추가 및 삭제 기능 구현.

---

3. TabControl이란?

TabControl은 여러 개의 탭(Tab)과 해당 탭에 표시되는 컨텐츠를 관리하는 컨트롤입니다.

• 각 탭은 독립적인 TabPage를 포함하며, 페이지마다 별도의 UI를 구성 가능.
• 탭을 클릭하여 다양한 콘텐츠를 쉽게 탐색할 수 있음.

---

TabControl 주요 속성 및 메서드

속성/메서드 설명 예제

TabPages	TabPage 객체의 컬렉션	tabControl1.TabPages.Add(new TabPage("Tab 1"));
SelectedIndex	현재 선택된 탭의 인덱스	int index = tabControl1.SelectedIndex;
SelectedTab	현재 선택된 TabPage 객체	TabPage current = tabControl1.SelectedTab;

TabControl 주요 이벤트

이벤트 설명 예제

SelectedIndexChanged

선택된 탭이 변경되었을 때 발생

tabControl1.SelectedIndexChanged += ...;

---

4. 실습: TabControl을 활용한 다중 페이지 인터페이스 구현

요구사항

1. TabControl에 "홈", "설정" 두 개의 탭을 추가.
2. "설정" 탭에서 TextBox를 사용해 설정 값을 입력받고 저장.
3. "홈" 탭에서 Label에 설정 값을 표시.
4. 버튼으로 탭을 동적으로 추가 및 삭제.

---

폼 구성

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

TabControl	tabControl1	(없음)	폼 중앙	(400 x 250)
Button	btnAddTab	"탭 추가"	폼 하단 왼쪽	(100 x 30)
Button	btnRemoveTab	"탭 삭제"	폼 하단 오른쪽	(100 x 30)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        private string savedSetting = string.Empty; // 저장된 설정 값

        public Form1()
        {
            InitializeComponent();
            InitializeTabControl();
        }

        private void InitializeTabControl()
        {
            // TabControl 기본 설정
            tabControl1.Dock = DockStyle.Top;

            // "홈" 탭 추가
            TabPage homeTab = new TabPage("홈");
            Label lblHome = new Label
            {
                Text = "저장된 설정: (없음)",
                AutoSize = true,
                Location = new System.Drawing.Point(20, 20),
                Name = "lblHome"
            };
            homeTab.Controls.Add(lblHome);
            tabControl1.TabPages.Add(homeTab);

            // "설정" 탭 추가
            TabPage settingsTab = new TabPage("설정");
            TextBox txtSetting = new TextBox
            {
                Location = new System.Drawing.Point(20, 20),
                Width = 200,
                Name = "txtSetting"
            };
            Button btnSaveSetting = new Button
            {
                Text = "저장",
                Location = new System.Drawing.Point(240, 18),
                Name = "btnSaveSetting"
            };
            btnSaveSetting.Click += (sender, e) =>
            {
                savedSetting = txtSetting.Text;
                lblHome.Text = $"저장된 설정: {savedSetting}";
                MessageBox.Show("설정이 저장되었습니다!", "알림");
            };

            settingsTab.Controls.Add(txtSetting);
            settingsTab.Controls.Add(btnSaveSetting);
            tabControl1.TabPages.Add(settingsTab);

            // 탭 추가 및 삭제 버튼 이벤트
            btnAddTab.Click += BtnAddTab_Click;
            btnRemoveTab.Click += BtnRemoveTab_Click;
        }

        // "탭 추가" 버튼 클릭 이벤트
        private void BtnAddTab_Click(object sender, EventArgs e)
        {
            TabPage newTab = new TabPage($"새 탭 {tabControl1.TabPages.Count + 1}");
            Label lblNewTab = new Label
            {
                Text = "이 탭은 동적으로 추가되었습니다.",
                AutoSize = true,
                Location = new System.Drawing.Point(20, 20)
            };
            newTab.Controls.Add(lblNewTab);
            tabControl1.TabPages.Add(newTab);
        }

        // "탭 삭제" 버튼 클릭 이벤트
        private void BtnRemoveTab_Click(object sender, EventArgs e)
        {
            if (tabControl1.TabPages.Count > 0)
            {
                tabControl1.TabPages.RemoveAt(tabControl1.SelectedIndex);
            }
            else
            {
                MessageBox.Show("삭제할 탭이 없습니다.", "알림");
            }
        }
    }
}

---

Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private TabControl tabControl1;
        private Button btnAddTab;
        private Button btnRemoveTab;

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

        private void InitializeComponent()
        {
            this.tabControl1 = new TabControl();
            this.btnAddTab = new Button();
            this.btnRemoveTab = new Button();
            this.SuspendLayout();

            // tabControl1
            this.tabControl1.Location = new System.Drawing.Point(10, 10);
            this.tabControl1.Name = "tabControl1";
            this.tabControl1.Size = new System.Drawing.Size(400, 250);
            this.tabControl1.TabIndex = 0;

            // btnAddTab
            this.btnAddTab.Location = new System.Drawing.Point(10, 270);
            this.btnAddTab.Name = "btnAddTab";
            this.btnAddTab.Size = new System.Drawing.Size(100, 30);
            this.btnAddTab.TabIndex = 1;
            this.btnAddTab.Text = "탭 추가";
            this.btnAddTab.UseVisualStyleBackColor = true;

            // btnRemoveTab
            this.btnRemoveTab.Location = new System.Drawing.Point(120, 270);
            this.btnRemoveTab.Name = "btnRemoveTab";
            this.btnRemoveTab.Size = new System.Drawing.Size(100, 30);
            this.btnRemoveTab.TabIndex = 2;
            this.btnRemoveTab.Text = "탭 삭제";
            this.btnRemoveTab.UseVisualStyleBackColor = true;

            // Form1
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(420, 320);
            this.Controls.Add(this.btnRemoveTab);
            this.Controls.Add(this.btnAddTab);
            this.Controls.Add(this.tabControl1);
            this.Name = "Form1";
            this.Text = "TabControl 예제";
            this.ResumeLayout(false);
        }
    }
}

---

5. 실행 결과

1. 초기 상태
   • "홈"과 "설정" 두 개의 탭이 생성됩니다.
   • "홈" 탭에는 저장된 설정 값을 표시하는 Label이, "설정" 탭에는 TextBox와 "저장" 버튼이 있습니다.
2. 설정 저장
   • "설정" 탭에서 값을 입력하고 "저장" 버튼 클릭 → "홈" 탭에 설정 값이 표시됩니다.
3. 탭 추가
   • "탭 추가" 버튼 클릭 → 새로운 탭이 추가되며, 기본 메시지가 표시됩니다.
4. 탭 삭제
   • "탭 삭제" 버튼 클릭 → 현재 선택된 탭이 삭제됩니다.

---

6. 주요 개념 요약

1. TabControl과 TabPage
   • TabControl.TabPages 컬렉션을 통해 TabPage 추가 및 제거 가능.
2. 탭 동작 관리
   • SelectedIndex와 SelectedTab 속성을 활용하여 현재 선택된 탭의 동작 관리.
3. 탭 동적 추가 및 삭제
   • TabPages.Add()와 TabPages.RemoveAt() 메서드로 동적으로 탭 추가 및 삭제 구현.