윈도우폼에서 트리뷰(Tree Views) 활용하기 - VB.Net

윈도우 탐색기에서 익숙한 형태이고 다양한 프로그램의 컨트롤로 활용하는 트리뷰를 윈도우폼에서 활용하는 방법을 다루고자 합니다.

트리뷰도 다른 컨트롤처럼 툴박스에서 끌어다놓기로 추가한 다음 위의 그림처럼 좌 또는 우측으로 붙여서 폼의 위치나 크기에 따라 자동으로 위치와 크기가 조정되도록 .Dock 속성을 적절하게 조정해 줍니다. 트리뷰는 계층적인 구조로 정보를 저장하는 컨트롤로 최상단에는 트리뷰(TreeView) 클래스가 있고 그 하위로 트리노드(TreeNode) 클래스가 위치합니다. 개별 트리노드는 그 하위로 또다른 트리노드들을 가지는 방식으로 컨트롤을 구성합니다. 트리뷰 및 트리노드 클래스는 .Nodes 라는 컬렉션 속성을 가지는데 이 속성을 통해서 하위 노드들을 접근할 수 있습니다. 예를 들어 TreeView1.Nodes(0).Nodes(0).Nodes(0).Text = "Good" 와 같은 구문을 통해서 3단계 아래의 특정 노드를 직접 접근할 수 있습니다. 각 노드에 접근할 수 있는 속성과 메소드는 다음과 같습니다.

• .Nodes : 하위 노드들에 접근할 수 있는 컬렉션 속성, .Nodes.count 와 .GetNodeCount(false)는 동일한 결과를 가져오지만 .GetNodeCount(true)는 하위 노드의 개수를 포함한 노드 개수를 리턴합니다. 
• .SelectedNode : 현재 선택된 노드를 돌려줌(트리뷰만 지원)
• .TopNode : 현재 보여지고 있는 노드들 중에 첫번째 노드를 돌려줌(트리뷰만 지원)
• .GetNodeAt(x, y) : 특정 위치에 있는 노드를 돌려줌(트리뷰만 지원, 마우스 위치에 따른 노드등등)
• .FirstNode, .LastNode : 하위 노드중 첫번째/마지막  노드 리턴(트리노드만 지원)
• .NextNode, .PrevNode : 동일레벨의 다음/이전 노드 리턴(트리노드만 지원)
• .NextVisibleNode, .PrevVisibleNode : 볼수 있는 다음/이전 노드 리턴(트리노드만 지원)
• .Parent : 부모 노드 리턴(트리노드만 지원)

화면 디자인 시점에 트리뷰를 구성하려면 위의 그림처럼 트리뷰 우측 상단의 화살표 버튼을 클릭하고 "노드 편집..."를 클릭하여 아래의 그림과 같이 트리뷰 및 트리노드에 해당하는 항목들을 추가 할 수 있습니다.

트리뷰에 등록되는 "루트" 항목은 [루트 추가] 버튼으로, 각 노드의 하위 항목은 해당 노드를 선택한 다음 [자식 추가] 버튼으로 노드를 추가할 수 있습니다. 트리에 표시되는 내용은 그림 우측에서 확인할 수 있는 .Text 속성으로 설정할 수 있습니다. .Index 값은 .Nodes 컬렉션 속성을 통해 해당 노드를 접근할 수 있는 인덱스를 의미합니다. 위의 예제에서 "노드4"는 루트0의 .Nodes(1)로 접근하고 "노드3"은 .Nodes(0)으로 접근합니다. 트리에는 텍스트 뿐만아니라 이미지도 간편하게 표시할 수 있는데 이미지를 표시하려면 이미지리스트 컨트롤을 추가하여(픽처박스와 이미지리스트 활용하기 참조) 표시할 이미지들을 등록하고 맨 위 그림에서 트리뷰 작업 창의 .ImageList 속성에 해당 이미지리스트를 등록해야 합니다. 이미지리스트 컨트롤을 등록했으면 트리뷰 및 트리노드의 .ImageIndex, .SelectedImageIndex 속성에 이미지리스트 내의 몇번째 이미지인지 그 인덱스를 설정할 수 있습니다. SelectedImageIndex 속성은 특정 노드가 선택되었을때 표시할 이미지를 지정합니다.

위의 그림은 트리에 이미지리스트 컨트롤을 반영한 예제로 트리를 표시하기 위한 라인이나 플러스/마이너스 아이콘등이 없습니다. 이런 모양은 .ShowLines, .ShowPlusMinus, .ShowRootLines 속성에 True/False를 설정하여 지정할 수 있습니다. 이외에도 모양 및 내용에 영향을 미칠 수 있는 속성과 메소드는 아래와 같습니다.

• .Indent : 상위/하위 노드간 들여쓰기 간격
• .Scrollable : 스크롤바 표시 여부
• .Sorted : 각 노드들의 정렬 수행 여부
• .CheckBoxes : 체크박스 표시 여부, 체크박스를 표시한 상태에서 각 노드의 체크 여부는 .Checked 속성으로 확인하거나 설정할 수 있습니다.
• .LabelEdit : 트리 각 노드의 텍스트를 트리 상에서 수정할 수 있는지 여부

트리를 접고 펴는 동작은 루트인 트리뷰에 대해서는 CollapseAll(), ExpandAll() 메소드로 전체 트리를 펴거나 접을 수 있습니다. 개별 노드에 대해서는 Collapse(), Expand() 메소드로 접거나 펴는 동작을 지시할 수 있습니다. 각 노드가 접힌 상태인지, 펴진 상태인지는 .IsExpanded 속성으로 확인할 수 있습니다. 트리를 접거나, 펴거나, 선택, 체크등 다양한 액션에 대한 처리는 AfterCheck, AfterCollapse, AfterExpand, AfterLabelEdit, AfterSelect, BeforeCheck,BeforeCollapse, BeforeExpand, BeforeLabelEdit, BeforeSelect이벤트를 통해 처리할 수 있으며 각 이벤트는 아래의 코드 예제 처럼 e.Node 객체를 통해서 해당 노드 정보를 확인할 수 있습니다.

    Private Sub TreeView1_AfterSelect(sender As System.Object, e As System.Windows.Forms.TreeViewEventArgs) _
                     Handles TreeView1.AfterSelect
        Label1.Text = e.Node.Text
    End Sub

위의 예제처럼 화면 디자인 시점에 트리를 구성하는 경우 *.Designer.vb를 보면 아래의 코드처럼 TreeView 및 TreeNode 클래스의 인스턴스를 계층적으로 생성하는 방식을 사용합니다.

        Dim TreeNode6 As System.Windows.Forms.TreeNode = New System.Windows.Forms.TreeNode("노드3")
        Dim TreeNode7 As System.Windows.Forms.TreeNode = New System.Windows.Forms.TreeNode("노드4")
        Dim TreeNode8 As System.Windows.Forms.TreeNode = New System.Windows.Forms.TreeNode("루트 0", _
                                   New System.Windows.Forms.TreeNode() {TreeNode6, TreeNode7})
        Dim TreeNode9 As System.Windows.Forms.TreeNode = New System.Windows.Forms.TreeNode("노드2")
        Dim TreeNode10 As System.Windows.Forms.TreeNode = New System.Windows.Forms.TreeNode("루트1", _
                                   New System.Windows.Forms.TreeNode() {TreeNode9})
        Me.TreeView1 = New System.Windows.Forms.TreeView()
        Me.TreeView1.Nodes.AddRange(New System.Windows.Forms.TreeNode() {TreeNode8, TreeNode10})

실행중에 트리를 구성하는 경우에도 *.Designer.vb를 따라하기 해도 좋습니다. 추가적으로 사용할 수 있는 방식은 컬렉션 속성인 Nodes의 다양한 메소드를 활용하는 것으로 다음과 같은 메소드를 활용할 수 있습니다.

• Nodes.Add(New TreeNode("텍스트")) : 노드 추가
• Nodes.Clear() : 하위 노드 모두 삭제
• Nodes.AddRange(New TreeNode() { 노드 배열 }) : 노드 배열 일괄 추가
• Nodes(0).Remove() : 특정 노드 삭제