C# Windows Forms 강의 14편: SplitContainer와 TabControl로 동적 레이아웃 구성

Study/C#

C# Windows Forms 강의 14편: SplitContainer와 TabControl로 동적 레이아웃 구성

wawManager 2025. 2. 17. 12:00

728x90

1. 강의 개요

이번 강의에서는 SplitContainer와 TabControl을 결합하여 동적이고 유연한 레이아웃을 구현합니다.

SplitContainer: 화면을 두 개의 패널로 나누고 크기를 조정할 수 있는 컨테이너.
TabControl: 각 패널에서 데이터를 표시하거나 작업을 수행할 수 있도록 여러 탭을 구성.

2. 학습 목표

SplitContainer를 사용해 동적 레이아웃을 구성.
TabControl을 사용해 여러 페이지로 작업을 나누어 효율적으로 구성.
SplitContainer와 TabControl을 결합하여 탐색기와 같은 UI 구성.

3. SplitContainer (분할 컨테이너)

SplitContainer란?

SplitContainer는 두 개의 Panel로 화면을 분할하고, 사용자가 분리선을 드래그하여 크기를 동적으로 조정할 수 있도록 합니다.

주요 속성

속성 설명 예제

Orientation	분할 방향 (Horizontal, Vertical)	splitContainer1.Orientation = Orientation.Vertical;
SplitterDistance	분리선 위치 설정	splitContainer1.SplitterDistance = 200;
Dock	부모 컨트롤과의 Dock 스타일 설정	splitContainer1.Dock = DockStyle.Fill;

4. TabControl (탭 컨트롤)

TabControl이란?

TabControl은 여러 페이지(TabPage)를 탭으로 구성하여 콘텐츠를 구분할 수 있는 컨트롤입니다.

각 탭은 TabPage라는 컨테이너로 구성됩니다.

주요 속성

속성 설명 예제

TabPages	TabControl에 포함된 TabPage 컬렉션	tabControl1.TabPages.Add(tabPage1);
SelectedIndex	현재 선택된 탭의 인덱스	int index = tabControl1.SelectedIndex;

5. 실습: SplitContainer와 TabControl로 탐색기 구성하기

요구사항

SplitContainer로 화면을 좌우로 분할.
- 왼쪽 Panel: TreeView로 파일 구조 표시.
- 오른쪽 Panel: TabControl로 데이터를 표시.
TabControl에 "정보 보기", "설정" 탭 추가.
TreeView에서 선택한 항목에 따라 TabControl의 "정보 보기" 탭 내용 변경.

폼 구성

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

SplitContainer	splitContainer1	(없음)	폼 전체	부모 컨트롤에 Dock
TreeView	treeView1	(없음)	SplitContainer.Panel1	(자동 크기)
TabControl	tabControl1	(없음)	SplitContainer.Panel2	(자동 크기)
TabPage	tabPageInfo	"정보 보기"	TabControl 내부	(자동 크기)
TabPage	tabPageSettings	"설정"	TabControl 내부	(자동 크기)

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

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

        private void InitializeTreeView()
        {
            // TreeView 구성
            treeView1.Nodes.Add("문서");
            treeView1.Nodes[0].Nodes.Add("Word 파일");
            treeView1.Nodes[0].Nodes.Add("PDF 파일");

            treeView1.Nodes.Add("사진");
            treeView1.Nodes[1].Nodes.Add("JPEG 이미지");
            treeView1.Nodes[1].Nodes.Add("PNG 이미지");

            treeView1.AfterSelect += TreeView1_AfterSelect;
        }

        private void InitializeTabControl()
        {
            // TabControl 구성
            tabPageInfo.Text = "정보 보기";
            tabPageSettings.Text = "설정";

            Label lblInfo = new Label
            {
                Name = "lblInfo",
                Text = "정보가 여기에 표시됩니다.",
                Dock = DockStyle.Fill,
                TextAlign = System.Drawing.ContentAlignment.MiddleCenter
            };
            tabPageInfo.Controls.Add(lblInfo);
        }

        private void TreeView1_AfterSelect(object sender, TreeViewEventArgs e)
        {
            // TreeView 선택 항목에 따라 TabPage의 Label 내용 변경
            Label lblInfo = tabPageInfo.Controls["lblInfo"] as Label;
            if (lblInfo != null)
            {
                lblInfo.Text = $"선택한 항목: {e.Node.Text}";
            }
        }
    }
}

디자이너 코드: Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private SplitContainer splitContainer1;
        private TreeView treeView1;
        private TabControl tabControl1;
        private TabPage tabPageInfo;
        private TabPage tabPageSettings;

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

        private void InitializeComponent()
        {
            this.splitContainer1 = new SplitContainer();
            this.treeView1 = new TreeView();
            this.tabControl1 = new TabControl();
            this.tabPageInfo = new TabPage();
            this.tabPageSettings = new TabPage();

            ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).BeginInit();
            this.splitContainer1.Panel1.SuspendLayout();
            this.splitContainer1.Panel2.SuspendLayout();
            this.splitContainer1.SuspendLayout();
            this.tabControl1.SuspendLayout();
            this.SuspendLayout();

            // SplitContainer
            this.splitContainer1.Dock = DockStyle.Fill;
            this.splitContainer1.Orientation = Orientation.Vertical;

            // Panel1: TreeView
            this.splitContainer1.Panel1.Controls.Add(this.treeView1);

            // Panel2: TabControl
            this.splitContainer1.Panel2.Controls.Add(this.tabControl1);

            // TreeView
            this.treeView1.Dock = DockStyle.Fill;

            // TabControl
            this.tabControl1.Dock = DockStyle.Fill;
            this.tabControl1.Controls.Add(this.tabPageInfo);
            this.tabControl1.Controls.Add(this.tabPageSettings);

            // TabPageInfo
            this.tabPageInfo.Text = "정보 보기";

            // TabPageSettings
            this.tabPageSettings.Text = "설정";

            // Form1
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.splitContainer1);
            this.Name = "Form1";
            this.Text = "SplitContainer와 TabControl 예제";

            this.splitContainer1.Panel1.ResumeLayout(false);
            this.splitContainer1.Panel2.ResumeLayout(false);
            ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).EndInit();
            this.splitContainer1.ResumeLayout(false);
            this.tabControl1.ResumeLayout(false);
            this.ResumeLayout(false);
        }
    }
}

6. 실행 결과

SplitContainer
- 화면이 좌우로 분할됩니다.
- 왼쪽: TreeView로 "문서", "사진" 등 계층 구조 표시.
- 오른쪽: TabControl로 "정보 보기"와 "설정" 탭 구성.
TreeView와 TabControl 연동
- TreeView에서 항목을 선택하면 TabControl의 "정보 보기" 탭에 선택한 항목 정보 표시.

7. 주요 개념 요약

SplitContainer는 화면을 두 개의 영역으로 나누고, 크기를 동적으로 조정 가능.
TabControl은 콘텐츠를 탭 형태로 구성하여 사용자 경험을 개선.
SplitContainer와 TabControl을 결합하면 탐색기와 같은 동적 UI를 구현할 수 있음.

728x90