연습: 디자이너를 사용하여 ListView 및 TreeView 컨트롤이 포함된 탐색기 스타일 인터페이스 만들기

Visual Studio의 장점 중 하나는 전문적인 Windows Forms 응용 프로그램을 신속하게 만들 수 있다는 것입니다. 일반적으로 Windows 운영 체제의 Windows 탐색기 기능과 유사한 ListView 및 TreeView 컨트롤로 UI(사용자 인터페이스)를 만듭니다. Windows 탐색기에는 사용자 컴퓨터의 파일 및 폴더 계층 구조가 표시됩니다.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

ListView 및 TreeView 컨트롤이 포함된 폼을 만들려면

1. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

2. 새 프로젝트 대화 상자에서 다음을 수행합니다.

   1. 범주에서 Visual Basic 또는 **Visual C#**을 선택합니다.

   2. 템플릿 목록에서 Windows Forms 응용 프로그램을 선택합니다.

3. 확인을 클릭합니다. 새 Windows Forms 프로젝트가 만들어집니다.

4. 폼에 SplitContainer 컨트롤을 추가하고 Dock 속성을 Fill로 설정합니다.

5. imageList1이라는 ImageList를 폼에 추가하고 속성 창을 사용하여 두 개의 이미지, 즉 폴더 이미지와 문서 이미지를 해당 순서로 추가합니다.

6. treeview1이라는 TreeView 컨트롤을 폼에 추가하고 SplitContainer 컨트롤의 왼쪽에 놓습니다. treeView1에 대한 속성 창에서 다음을 수행합니다.

   1. Dock 속성을 Fill으로 설정합니다.

   2. ImageList 속성을 imagelist1.로 설정합니다.

7. listView1이라는 ListView 컨트롤을 폼에 추가하고 SplitContainer 컨트롤의 오른쪽에 놓습니다. listview1에 대한 속성 창에서 다음을 수행합니다.

   1. Dock 속성을 Fill으로 설정합니다.

   2. View 속성을 Details으로 설정합니다.

   3. Columns 속성의 줄임표()를 클릭하여 ColumnHeader 컬렉션 편집기를 엽니다**.** 세 개의 열을 추가하고 해당 Text 속성을 Name, Type 및 Last Modified로 각각 설정합니다. 확인을 클릭하여 대화 상자를 닫습니다.

   4. SmallImageList 속성을 imageList1.로 설정합니다.

8. 노드와 하위 노드로 TreeView를 채우는 코드를 구현합니다. Form1 클래스에 이 코드를 추가합니다.

   Private Sub PopulateTreeView() 
       Dim rootNode As TreeNode
   
       Dim info As New DirectoryInfo("../..")
       If info.Exists Then
           rootNode = New TreeNode(info.Name)
           rootNode.Tag = info
           GetDirectories(info.GetDirectories(), rootNode)
           treeView1.Nodes.Add(rootNode)
       End If
   
   End Sub
   
   Private Sub GetDirectories(ByVal subDirs() As DirectoryInfo, _
       ByVal nodeToAddTo As TreeNode)
   
       Dim aNode As TreeNode
       Dim subSubDirs() As DirectoryInfo
       Dim subDir As DirectoryInfo
       For Each subDir In subDirs
           aNode = New TreeNode(subDir.Name, 0, 0)
           aNode.Tag = subDir
           aNode.ImageKey = "folder"
           subSubDirs = subDir.GetDirectories()
           If subSubDirs.Length <> 0 Then
               GetDirectories(subSubDirs, aNode)
           End If
           nodeToAddTo.Nodes.Add(aNode)
       Next subDir
   
   End Sub
   
   

           private void PopulateTreeView()
           {
               TreeNode rootNode;
   
               DirectoryInfo info = new DirectoryInfo(@"../..");
               if (info.Exists)
               {
                   rootNode = new TreeNode(info.Name);
                   rootNode.Tag = info;
                   GetDirectories(info.GetDirectories(), rootNode);
                   treeView1.Nodes.Add(rootNode);
               }
           }
   
           private void GetDirectories(DirectoryInfo[] subDirs, 
               TreeNode nodeToAddTo)
           {
               TreeNode aNode;
               DirectoryInfo[] subSubDirs;
               foreach (DirectoryInfo subDir in subDirs)
               {
                   aNode = new TreeNode(subDir.Name, 0, 0);
                   aNode.Tag = subDir;
                   aNode.ImageKey = "folder";
                   subSubDirs = subDir.GetDirectories();
                   if (subSubDirs.Length != 0)
                   {
                       GetDirectories(subSubDirs, aNode);
                   }
                   nodeToAddTo.Nodes.Add(aNode);
               }
           }
   

9. 위 코드에서는 System.IO 네임스페이스를 사용하므로 폼 맨 위에 적절한 using 또는 import 문을 추가해야 합니다.

   Imports System.IO
   

   using System.IO;
   

10. 폼의 생성자나 Load 이벤트 처리 메서드의 이전 단계에서 설정 메서드를 호출합니다. 폼 생성자에 이 코드를 추가합니다.

    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub 'New
    
    

            public Form1()
            {
                InitializeComponent();
                PopulateTreeView();
            }
    

11. treeview1에 대한 NodeMouseClick 이벤트를 처리한 다음 노드를 클릭하는 경우 노드의 내용으로listview1을채우는 코드를구현합니다. Form1 클래스에 이 코드를 추가합니다.

    Private Sub treeView1_NodeMouseClick(ByVal sender As Object, _
        ByVal e As TreeNodeMouseClickEventArgs) _
            Handles treeView1.NodeMouseClick
    
        Dim newSelected As TreeNode = e.Node
        listView1.Items.Clear()
        Dim nodeDirInfo As DirectoryInfo = _
        CType(newSelected.Tag, DirectoryInfo)
        Dim subItems() As ListViewItem.ListViewSubItem
        Dim item As ListViewItem = Nothing
    
        Dim dir As DirectoryInfo
        For Each dir In nodeDirInfo.GetDirectories()
            item = New ListViewItem(dir.Name, 0)
            subItems = New ListViewItem.ListViewSubItem() _
                {New ListViewItem.ListViewSubItem(item, "Directory"), _
                New ListViewItem.ListViewSubItem(item, _
                dir.LastAccessTime.ToShortDateString())}
    
            item.SubItems.AddRange(subItems)
            listView1.Items.Add(item)
        Next dir
        Dim file As FileInfo
        For Each file In nodeDirInfo.GetFiles()
            item = New ListViewItem(file.Name, 1)
            subItems = New ListViewItem.ListViewSubItem() _
                {New ListViewItem.ListViewSubItem(item, "File"), _
                New ListViewItem.ListViewSubItem(item, _
                file.LastAccessTime.ToShortDateString())}
    
            item.SubItems.AddRange(subItems)
            listView1.Items.Add(item)
        Next file
    
        listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize)
    
    End Sub
    
    

            void treeView1_NodeMouseClick(object sender,
                TreeNodeMouseClickEventArgs e) 
            {
                TreeNode newSelected = e.Node;
                listView1.Items.Clear();
                DirectoryInfo nodeDirInfo = (DirectoryInfo)newSelected.Tag;
                ListViewItem.ListViewSubItem[] subItems;
                ListViewItem item = null;
    
                foreach (DirectoryInfo dir in nodeDirInfo.GetDirectories())
                {
                    item = new ListViewItem(dir.Name, 0);
                    subItems = new ListViewItem.ListViewSubItem[]
                        {new ListViewItem.ListViewSubItem(item, "Directory"), 
                         new ListViewItem.ListViewSubItem(item, 
                            dir.LastAccessTime.ToShortDateString())};
                    item.SubItems.AddRange(subItems);
                    listView1.Items.Add(item);
                }
                foreach (FileInfo file in nodeDirInfo.GetFiles())
                {
                    item = new ListViewItem(file.Name, 1);
                    subItems = new ListViewItem.ListViewSubItem[]
                        { new ListViewItem.ListViewSubItem(item, "File"), 
                         new ListViewItem.ListViewSubItem(item, 
                            file.LastAccessTime.ToShortDateString())};
    
                    item.SubItems.AddRange(subItems);
                    listView1.Items.Add(item);
                }
    
                listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
            }
    

    C#을 사용하는 경우 NodeMouseClick 이벤트에 이벤트 처리 메서드를 연결해야 합니다. 폼 생성자에 이 코드를 추가합니다.

                this.treeView1.NodeMouseClick += 
                    new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);
    

응용 프로그램 테스트

이제 폼을 테스트하여 예상한 대로 동작하는지 확인할 수 있습니다.

폼을 테스트하려면

• F5 키를 눌러 응용 프로그램을 실행합니다.

  왼쪽에 프로젝트 디렉터리가 표시되는 TreeView 컨트롤과 오른쪽에 세 개의 열을 포함하는 ListView 컨트롤이 있는 분할 폼이 표시됩니다. 디렉터리 노드를 선택하여 TreeView를 트래버스할 수 있으며ListView에는 선택한 디렉터리의 내용이 채워집니다.

다음 단계

이 응용 프로그램에서는 TreeView 컨트롤과 ListView 컨트롤을 함께 사용할 수 있는 방법에 대한 예를 보여 줍니다. 이러한 컨트롤에 대한 자세한 내용은 다음 항목을 참조하십시오.

• 방법: TreeView 또는 ListView 컨트롤에 사용자 지정 정보 추가(Windows Forms)

• 방법: ListView 컨트롤에 검색 기능 추가

• 방법: TreeView 노드에 바로 가기 메뉴 연결

참고 항목

작업

방법: Windows Forms TreeView 컨트롤을 사용하여 노드 추가 및 제거

방법: Windows Forms ListView 컨트롤을 사용하여 항목 추가 및 제거

방법: Windows Forms ListView 컨트롤에 열 추가

참조

ListView

TreeView

기타 리소스

ListView 컨트롤(Windows Forms)