다음을 통해 공유

연습: 디자이너를 사용하여 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 속성의 줄임표(Visual Studio의 속성 창의 줄임표 버튼(...))를 클릭하여 ColumnHeader 컬렉션 편집기를 엽니다**.**3개의 열을 추가하고 해당 Text 속성을 Name, Type 및 Last Modified로 각각 설정합니다. 확인 을 클릭하여 대화 상자를 닫습니다.

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

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

    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);
    }
}

    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

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

    using System.IO;

    Imports System.IO

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

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. treeview1,에 대한 NodeMouseClick 이벤트를 처리하고 노드를 클릭할 때 노드의 콘텐츠로 listview1을(를) 채우는 코드를 구현합니다. 이 코드를 Form1 클래스에 추가합니다.

    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);
}

    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

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

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

애플리케이션 테스트

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

양식을 테스트하려면

  • F5 키를 눌러 애플리케이션을 실행합니다.

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

다음 단계

이 애플리케이션은 TreeView 및 ListView 컨트롤을 함께 사용하고 제어할 수 있는 방법의 예를 제공합니다. 이러한 컨트롤에 대한 자세한 내용은 다음 항목을 참조하세요.

참고 항목