C# Windows Forms 강의 35편: SplitContainer로 가변 레이아웃 구성

1. 강의 개요

이번 강의에서는 SplitContainer 컨트롤을 사용하여 가변적인 레이아웃을 구성하는 방법을 학습합니다.
SplitContainer는 두 개의 패널을 분리하는 막대(Splitter)를 제공하며, 사용자가 패널 크기를 드래그하여 조정할 수 있습니다.

---

2. 학습 목표

1. SplitContainer를 사용해 가변적인 레이아웃 구현.
2. Orientation 속성을 활용해 수평 또는 수직 분할 구성.
3. Splitter를 드래그해 패널 크기를 조정하는 기능 테스트.

---

3. SplitContainer란?

SplitContainer는 두 개의 패널을 포함한 컨트롤로, 패널 사이에 Splitter(분리 막대)를 제공하여 크기를 동적으로 조정할 수 있도록 합니다.

• 패널 1: 왼쪽(또는 상단) 패널.
• 패널 2: 오른쪽(또는 하단) 패널.
• Splitter를 드래그하여 두 패널의 크기를 조정할 수 있음.

---

SplitContainer 주요 속성

속성 설명 예제

Orientation	패널 분할 방향 (수직/수평)	splitContainer1.Orientation = Orientation.Horizontal;
SplitterDistance	Splitter의 초기 위치	splitContainer1.SplitterDistance = 150;
FixedPanel	크기를 고정할 패널	splitContainer1.FixedPanel = FixedPanel.Panel1;
IsSplitterFixed	Splitter 고정 여부	splitContainer1.IsSplitterFixed = true;

---

4. 실습: SplitContainer를 사용한 가변 레이아웃 구성

요구사항

1. SplitContainer를 수평 방향으로 설정하여 두 패널로 나눔.
2. 각 패널에 Label과 TextBox 추가.
3. Splitter를 드래그하여 패널 크기를 조정.

---

폼 구성

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

SplitContainer	splitContainer1	(없음)	폼 중앙	(400 x 300)
Label (Panel1)	lblPanel1	"상단 패널"	Panel1 내부	(10, 10)
TextBox (Panel2)	txtPanel2	(없음)	Panel2 내부	(10, 10)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

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

        private void InitializeSplitContainer()
        {
            // SplitContainer 설정
            splitContainer1.Orientation = Orientation.Horizontal; // 수평 분할
            splitContainer1.Dock = DockStyle.Fill;
            splitContainer1.SplitterDistance = 150; // 초기 분할 위치

            // Panel1 구성
            Label lblPanel1 = new Label
            {
                Text = "상단 패널",
                Location = new System.Drawing.Point(10, 10),
                AutoSize = true
            };
            splitContainer1.Panel1.Controls.Add(lblPanel1);

            // Panel2 구성
            TextBox txtPanel2 = new TextBox
            {
                Location = new System.Drawing.Point(10, 10),
                Width = splitContainer1.Panel2.ClientSize.Width - 20,
                Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right // 패널 크기 변화에 따라 크기 조정
            };
            splitContainer1.Panel2.Controls.Add(txtPanel2);
        }
    }
}

---

Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private SplitContainer splitContainer1;

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

        private void InitializeComponent()
        {
            this.splitContainer1 = new SplitContainer();
            ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).BeginInit();
            this.splitContainer1.SuspendLayout();
            this.SuspendLayout();

            // splitContainer1
            this.splitContainer1.Dock = DockStyle.Fill;
            this.splitContainer1.Location = new System.Drawing.Point(0, 0);
            this.splitContainer1.Name = "splitContainer1";
            this.splitContainer1.Size = new System.Drawing.Size(400, 300);
            this.splitContainer1.SplitterDistance = 150;
            this.splitContainer1.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.splitContainer1);
            this.Name = "Form1";
            this.Text = "SplitContainer 예제";
            ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).EndInit();
            this.splitContainer1.ResumeLayout(false);
            this.ResumeLayout(false);
        }
    }
}

---

5. 실행 결과

1. 초기 상태
   • SplitContainer가 수평 방향으로 분리되어 Panel1(상단)과 Panel2(하단)이 구성됩니다.
   • Panel1에는 "상단 패널" Label이 표시되고, Panel2에는 TextBox가 추가됩니다.
2. Splitter 동작
   • Splitter를 드래그하여 Panel1과 Panel2의 크기를 동적으로 조정할 수 있습니다.
3. TextBox 크기 조정
   • Panel2의 크기가 변화하면 TextBox 크기도 자동으로 조정됩니다(Anchor 속성 설정).

---

6. 주요 개념 요약

1. SplitContainer
   • 패널을 두 개로 나누고, Splitter로 크기를 조정할 수 있는 컨트롤.
2. Orientation
   • 패널 분할 방향을 수평(Orientation.Horizontal) 또는 수직(Orientation.Vertical)으로 설정.
3. Dock 및 Anchor
   • SplitContainer의 Dock 속성을 통해 부모 컨테이너에 맞게 크기를 조정.
   • 내부 컨트롤(TextBox 등)의 Anchor 속성을 설정하여 패널 크기 변화에 대응.