C# Windows Forms 강의 10편: TreeView와 ListView

1. 강의 개요

이번 강의에서는 Windows Forms의 TreeView와 ListView 컨트롤을 학습합니다.

• TreeView: 계층 구조로 데이터를 표시하는 컨트롤. (예: 폴더 탐색기)
• ListView: 리스트 형식으로 데이터를 표시하며, 여러 보기 모드를 지원하는 컨트롤.

---

2. 학습 목표

1. TreeView로 계층 구조 데이터를 구성하고 이벤트 처리 방법 학습.
2. ListView를 사용해 데이터를 다양한 형식으로 표시.
3. TreeView와 ListView를 연동하여 폴더 탐색기와 같은 UI 구성.

---

3. TreeView (트리뷰)

TreeView란?

TreeView는 계층 구조의 데이터를 노드(Node)로 구성하여 표시하는 컨트롤입니다.

• 노드는 TreeNode 객체로 구성되며, 부모 노드와 자식 노드를 계층적으로 포함합니다.

주요 속성

속성 설명 예제

Nodes	TreeView에 포함된 최상위 노드 컬렉션	treeView1.Nodes.Add("노드1");
SelectedNode	현재 선택된 노드	TreeNode selected = treeView1.SelectedNode;

주요 이벤트

이벤트 설명 예제

AfterSelect

노드 선택 후 발생하는 이벤트

treeView1.AfterSelect += TreeView1_AfterSelect;

---

4. ListView (리스트뷰)

ListView란?

ListView는 리스트 형식으로 데이터를 표시하며, 여러 보기 모드를 제공합니다.

• 데이터를 항목(Item)으로 구성하며, 각 항목은 ListViewItem 객체로 나타냅니다.

주요 속성

속성 설명 예제

View	ListView의 보기 모드 설정 (Details 등)	listView1.View = View.Details;
Columns	보기 모드가 Details일 때 열(Columns) 설정	listView1.Columns.Add("이름", 100);
Items	ListView에 포함된 항목 컬렉션	listView1.Items.Add(new ListViewItem("항목1"));

주요 보기 모드

보기 모드 설명

Details	데이터가 열과 행 형태로 나타나는 모드
List	단순 리스트 형태로 표시
Tile	타일 형태로 데이터 표시
SmallIcon	작은 아이콘으로 표시
LargeIcon	큰 아이콘으로 표시

---

5. 실습: TreeView와 ListView 연동하기

요구사항

1. TreeView에 "문서", "사진", "음악" 등의 최상위 노드를 추가.
   • 각 노드에는 하위 항목(예: "문서" → "Word", "PDF") 추가.
2. TreeView에서 노드를 클릭하면 ListView에 해당 항목의 세부 정보를 표시.
3. ListView는 Details 보기 모드를 사용.

---

폼 구성

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

TreeView	treeView1	(없음)	왼쪽 패널	(200 x 400)
ListView	listView1	(없음)	오른쪽 패널	(400 x 400)

---

코드 작성

Form1.cs

using System;
using System.Windows.Forms;

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

        private void InitializeTreeView()
        {
            // TreeView 노드 구성
            TreeNode docNode = new TreeNode("문서");
            docNode.Nodes.Add("Word");
            docNode.Nodes.Add("PDF");

            TreeNode photoNode = new TreeNode("사진");
            photoNode.Nodes.Add("JPEG");
            photoNode.Nodes.Add("PNG");

            TreeNode musicNode = new TreeNode("음악");
            musicNode.Nodes.Add("MP3");
            musicNode.Nodes.Add("WAV");

            // TreeView에 노드 추가
            treeView1.Nodes.AddRange(new[] { docNode, photoNode, musicNode });

            // 이벤트 연결
            treeView1.AfterSelect += TreeView1_AfterSelect;
        }

        private void InitializeListView()
        {
            // ListView 설정
            listView1.View = View.Details;
            listView1.Columns.Add("항목 이름", 200);
            listView1.Columns.Add("설명", 200);

            // 초기 데이터 설정
            listView1.Items.Add(new ListViewItem(new[] { "문서", "문서 폴더입니다." }));
        }

        private void TreeView1_AfterSelect(object sender, TreeViewEventArgs e)
        {
            // ListView에 TreeView에서 선택한 노드의 데이터를 표시
            listView1.Items.Clear();
            switch (e.Node.Text)
            {
                case "문서":
                    listView1.Items.Add(new ListViewItem(new[] { "Word", "Word 파일입니다." }));
                    listView1.Items.Add(new ListViewItem(new[] { "PDF", "PDF 파일입니다." }));
                    break;

                case "사진":
                    listView1.Items.Add(new ListViewItem(new[] { "JPEG", "JPEG 이미지 파일입니다." }));
                    listView1.Items.Add(new ListViewItem(new[] { "PNG", "PNG 이미지 파일입니다." }));
                    break;

                case "음악":
                    listView1.Items.Add(new ListViewItem(new[] { "MP3", "MP3 오디오 파일입니다." }));
                    listView1.Items.Add(new ListViewItem(new[] { "WAV", "WAV 오디오 파일입니다." }));
                    break;

                default:
                    if (e.Node.Parent != null)
                    {
                        listView1.Items.Add(new ListViewItem(new[] { e.Node.Text, "세부 정보가 없습니다." }));
                    }
                    break;
            }
        }
    }
}

---

6. 실행 결과

1. TreeView
   • "문서", "사진", "음악" 노드가 표시됩니다.
   • 각 노드에는 "Word", "JPEG", "MP3" 등의 하위 항목이 포함됩니다.
2. ListView
   • TreeView에서 선택한 노드의 항목과 설명이 표시됩니다.
   • 예: "문서" 선택 시:

     Word     Word 파일입니다.
     PDF      PDF 파일입니다.
     

---

7. 주요 개념 요약

1. TreeView는 계층 구조 데이터를 노드로 구성하며, AfterSelect 이벤트로 선택된 노드를 처리할 수 있습니다.
2. ListView는 데이터를 리스트 형태로 표시하며, Details 모드를 통해 열과 행 형태의 데이터를 관리할 수 있습니다.
3. TreeView와 ListView를 연동하면 탐색기와 같은 UI를 간단히 구현할 수 있습니다.