C# Windows Forms 강의 33편: Panel과 ScrollBar를 활용한 스크롤 가능한 인터페이스 만들기

1. 강의 개요

이번 강의에서는 Panel과 ScrollBar를 활용하여 스크롤 가능한 인터페이스를 만드는 방법을 학습합니다.
스크롤 가능한 인터페이스는 콘텐츠가 화면 크기를 초과할 때 유용합니다. 이 강의에서는 Panel 내부에 동적으로 컨트롤을 추가하고, 이를 스크롤하여 탐색하는 방법을 다룹니다.

---

2. 학습 목표

1. Panel을 사용해 스크롤 가능한 영역 구성.
2. AutoScroll 속성을 활용해 스크롤 동작 구현.
3. 동적으로 컨트롤을 추가하고 스크롤 동작 테스트.

---

3. Panel이란?

Panel은 컨트롤을 그룹화하고 레이아웃을 관리하기 위한 Windows Forms 컨트롤입니다.

• AutoScroll 속성을 사용하면 패널 크기를 초과하는 콘텐츠에 스크롤을 추가할 수 있음.
• 주로 다수의 컨트롤을 그룹화하여 스크롤 가능한 콘텐츠 영역으로 구성할 때 사용.

---

Panel 주요 속성 및 메서드

속성/메서드 설명 예제

AutoScroll	콘텐츠가 패널 크기를 초과할 경우 스크롤 표시	panel1.AutoScroll = true;
Controls.Add()	패널 내부에 컨트롤 추가	panel1.Controls.Add(button);

---

4. 실습: Panel을 활용한 스크롤 가능한 인터페이스 구현

요구사항

1. Panel에 20개의 Label을 동적으로 추가.
2. Panel 크기를 초과하는 경우 스크롤 동작 활성화.
3. 스크롤 가능한 인터페이스 테스트.

---

폼 구성

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

Panel

panel1

(없음)

폼 중앙

(300 x 200)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

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

        private void InitializePanel()
        {
            // Panel 설정
            panel1.AutoScroll = true; // 스크롤 활성화
            panel1.BorderStyle = BorderStyle.FixedSingle;

            // 동적으로 Label 추가
            for (int i = 0; i < 20; i++)
            {
                Label label = new Label
                {
                    Text = $"Label {i + 1}",
                    Location = new System.Drawing.Point(10, i * 30), // 위아래로 배치
                    Size = new System.Drawing.Size(200, 20)
                };

                panel1.Controls.Add(label);
            }
        }
    }
}

---

Form1.Designer.cs

namespace WindowsFormsApp1
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;
        private Panel panel1;

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

        private void InitializeComponent()
        {
            this.panel1 = new Panel();
            this.SuspendLayout();

            // panel1
            this.panel1.Location = new System.Drawing.Point(20, 20);
            this.panel1.Name = "panel1";
            this.panel1.Size = new System.Drawing.Size(300, 200);
            this.panel1.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.panel1);
            this.Name = "Form1";
            this.Text = "Panel과 스크롤 예제";
            this.ResumeLayout(false);
        }
    }
}

---

5. 실행 결과

1. 초기 상태
   • Panel 내부에 Label이 20개 동적으로 추가됩니다.
   • Panel의 크기(300x200)를 초과하는 경우 스크롤이 활성화됩니다.
2. 스크롤 동작
   • 마우스 휠 또는 스크롤 바를 드래그하여 추가된 Label 탐색.

---

6. 주요 개념 요약

1. Panel의 AutoScroll 속성
   • 콘텐츠가 Panel 크기를 초과하면 스크롤 바가 자동으로 추가됩니다.
2. 동적 컨트롤 추가
   • Controls.Add()를 사용하여 Panel 내부에 컨트롤을 동적으로 추가 가능.
3. 레이아웃 관리
   • 컨트롤의 Location 속성을 조정하여 Panel 내부에서 정렬.