C# Windows Forms 강의 98편: 멀티페이지 탭 애플리케이션 제작 - TabControl 활용

 

1. 강의 개요

이번 강의에서는 TabControl을 활용하여 멀티페이지 기능을 가진 애플리케이션을 제작합니다.
TabControl은 여러 탭(Tab)으로 화면을 나눠 기능별로 구성할 수 있는 컨트롤입니다.
이 강의에서는 각 탭마다 별도의 기능(예: 설정, 데이터 관리 등)을 구현하는 방법을 배웁니다.

---

2. 학습 목표

• TabControl을 사용해 탭 기반 UI 구성
• 각 탭에 컨트롤 배치 및 기능 구현
• 동적으로 탭을 추가하거나 제거하는 방법
• 사용자 친화적인 다중 작업 UI 구성

---

3. 기능 요구사항

필수 기능

1️⃣ 기본 TabControl 구성:

• 여러 개의 탭으로 화면을 나눠 구성

2️⃣ 탭별 독립적 UI 구성:

• 각 탭에서 별도의 기능 제공 (예: 데이터 입력, 설정 등)

3️⃣ 동적 탭 추가/삭제:

• 버튼 클릭으로 탭 추가 또는 제거

---

4. 실습: 멀티페이지 탭 애플리케이션 제작

1️⃣ 폼 구성

• 폼(Form) 이름: Form1
• 컨트롤 배치:

컨트롤 타입 이름 위치 크기

TabControl	tabControl	폼 상단 전체	(600 x 300)
Button	btnAddTab	폼 하단 왼쪽	(100 x 30)
Button	btnRemoveTab	폼 하단 오른쪽	(100 x 30)

📌 폼 디자인 예시:

--------------------------------------------------
|                [TabControl]                   |
|                                                |
|          [TabPage1]  [TabPage2]                |
|------------------------------------------------|
| [Add Tab 버튼]                      [Remove Tab 버튼] |
--------------------------------------------------

---

2️⃣ 코드 작성

(1) TabControl 기본 구성

using System;
using System.Windows.Forms;

namespace WindowsFormsApp_TabControl
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeTabs();
        }

        // 기본 TabControl 초기화
        private void InitializeTabs()
        {
            tabControl.TabPages.Clear();

            // 첫 번째 탭 추가
            var tabPage1 = new TabPage("Home");
            tabPage1.Controls.Add(new Label
            {
                Text = "홈 화면입니다.",
                Location = new System.Drawing.Point(20, 20),
                AutoSize = true
            });
            tabControl.TabPages.Add(tabPage1);

            // 두 번째 탭 추가
            var tabPage2 = new TabPage("Settings");
            tabPage2.Controls.Add(new Label
            {
                Text = "설정 화면입니다.",
                Location = new System.Drawing.Point(20, 20),
                AutoSize = true
            });
            tabControl.TabPages.Add(tabPage2);
        }
    }
}

---

(2) 동적 탭 추가/삭제

        // 동적 탭 추가
        private void btnAddTab_Click(object sender, EventArgs e)
        {
            int newTabIndex = tabControl.TabPages.Count + 1;
            var newTabPage = new TabPage($"Tab {newTabIndex}");

            newTabPage.Controls.Add(new Label
            {
                Text = $"이것은 Tab {newTabIndex} 입니다.",
                Location = new System.Drawing.Point(20, 20),
                AutoSize = true
            });

            tabControl.TabPages.Add(newTabPage);
        }

        // 동적 탭 삭제
        private void btnRemoveTab_Click(object sender, EventArgs e)
        {
            if (tabControl.TabPages.Count > 0)
            {
                tabControl.TabPages.RemoveAt(tabControl.TabPages.Count - 1);
            }
            else
            {
                MessageBox.Show("제거할 탭이 없습니다.", "알림", MessageBoxButtons.OK, MessageBoxIcon.Information);
            }
        }

---

(3) Designer 코드

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

            // TabControl 설정
            this.tabControl.Location = new System.Drawing.Point(10, 10);
            this.tabControl.Size = new System.Drawing.Size(600, 300);

            // Add Tab Button 설정
            this.btnAddTab.Location = new System.Drawing.Point(10, 320);
            this.btnAddTab.Size = new System.Drawing.Size(100, 30);
            this.btnAddTab.Text = "Add Tab";
            this.btnAddTab.Click += new EventHandler(this.btnAddTab_Click);

            // Remove Tab Button 설정
            this.btnRemoveTab.Location = new System.Drawing.Point(120, 320);
            this.btnRemoveTab.Size = new System.Drawing.Size(100, 30);
            this.btnRemoveTab.Text = "Remove Tab";
            this.btnRemoveTab.Click += new EventHandler(this.btnRemoveTab_Click);

            // Form 설정
            this.ClientSize = new System.Drawing.Size(640, 360);
            this.Controls.Add(this.tabControl);
            this.Controls.Add(this.btnAddTab);
            this.Controls.Add(this.btnRemoveTab);
            this.Text = "멀티페이지 탭 애플리케이션";
        }

---

3️⃣ 실행 결과

1️⃣ 탭 초기화

• "Home"과 "Settings" 탭이 기본으로 추가

2️⃣ 탭 추가

• "Add Tab" 버튼 클릭 → 새로운 탭 추가

3️⃣ 탭 제거

• "Remove Tab" 버튼 클릭 → 가장 마지막 탭 제거

---

5. 주요 개념 요약

• TabControl: 탭 기반 UI를 구성하는 컨트롤
• TabPage: TabControl에 포함되는 각 페이지
• Controls.Add(): TabPage에 컨트롤을 동적으로 추가

 

 

📌 #CSharp #WindowsForms #TabControl #멀티페이지 #동적UI