![[WinForm] TreeView 사용하기](https://3001ssw.com/wp-content/uploads/2024/12/blog_main_banner3.png)
이번 글에서는 TreeView 사용 방법에 대해 알아보겠습니다. WinForm에서 TreeView는 폴더 탐색기에서 폴더와 파일의 관계를 표현하는 것과 같이 계층 구조의 데이터를 시각적으로 표현하는데 자주 사용되는 컨트롤입니다. TreeView 컨트롤은 노드로 이루어지는데 이 노드는 TreeNode 클래스로 되어있습니다.
속성 및 함수
TreeView와 TreeNode에서 자주 사용되는 속성 및 함수는 아래와 같습니다.
- Nodes : 노드의 TreeNode 컬렉션
- SelectedNode : 현재 선택된 TreeNode 컬렉션
- ImageList : 노드에 사용되는 이미지 리스트
- Add : 노드 추가
- Remove : 노드 삭제
- Clear : 자식 노드만 삭제
- Parent : 노드의 부모 노드
- Expand, ExpandAll : 노드 확장, 노드 전체 확장
- Collapse, CollapseAll : 노드 축소, 노드 전체 축소
- AfterSelect : 트리 노드 선택 이벤트 함수
샘플 프로그램을 만들어 보겠습니다. 우선 아래와 같이 컨트롤들을 배치해주시기 바랍니다.
이제 각 버튼들의 Click 이벤트 함수에 노드 추가, 삭제, 확장, 축소 함수를 추가해보겠습니다.
노드 추가
노드를 추가하기 위해서는 Add 함수를 사용하면 됩니다. ‘Root에 노드 추가‘ 버튼을 더블 클릭하여 Click 이벤트 함수를 만들어주세요. 기본적으로 string을 트리 노드에 추가하는 방법은 아래와 같습니다.
private void btnAddRoot_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(tbText.Text))
return;
treeView.Nodes.Add(tbText.Text); // 텍스트 추가
}
이렇게 하지 않고 TreeNode 객체를 생성하여 추가하는 방법도 있습니다.
private void btnAddRoot_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(tbText.Text))
return;
// TreeNode 객체 생성 후 추가
TreeNode nd = new TreeNode();
nd.Text = tbText.Text; // text
treeView.Nodes.Add(nd);
}
상황에 맞게 사용하시면 되지만 이후에 트리 노드에 이미지 표시를 하기 위해 저는 TreeNode 객체를 생성 하여 추가하는 방법을 사용하겠습니다. 실행 하면 아래와 같이 root에 추가하는 모습을 볼 수 있습니다.
그 다음 선택한 TreeNode에 노드를 추가하는 방법을 알아보겠습니다. ‘선택 노드에 추가‘ 버튼을 더블 클릭 하여 Click 이벤트 함수를 만들어 줍니다. 그 다음 SelectedNode 속성을 사용하여 선택한 노드를 가져온 뒤 아래와 같이 추가해줍니다.
private void btnAddSelectNode_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(tbText.Text))
return;
TreeNode ndSelect = treeView.SelectedNode; // 선택한 노드 가져오기
if (ndSelect != null)
{
TreeNode nd = new TreeNode();
nd.Text = tbText.Text; // text
ndSelect.Nodes.Add(nd); // 선택한 노드에 추가
}
}
실행 하면 아래와 같이 선택한 노드 하위에 노드가 추가된 것을 볼 수 있습니다.
노드 삭제
삭제는 Remove 함수를 사용하면 됩니다. ‘선택 노드 삭제’ 버튼의 Click 이벤트 함수를 만들어 줍니다. 그 다음 아래와 같이 선택 노드의 부모 노드에서 선택 노드를 삭제해줍니다.
private void btnRemoveSelectNode_Click(object sender, EventArgs e)
{
TreeNode ndSelect = treeView.SelectedNode;
if (ndSelect != null)
{
TreeNode ndParnet = ndSelect.Parent; // 선택한 노드의 부모
ndParnet.Nodes.Remove(ndSelect); // 부모에서 선택한 노드 삭제
}
}
Remove 함수 말고 Clear 함수를 사용하면 선택한 노드의 하위 항목만 삭제됩니다.
private void btnClearSelectedNode_Click(object sender, EventArgs e)
{
TreeNode ndSelect = treeView.SelectedNode;
if (ndSelect != null)
{
ndSelect.Nodes.Clear(); // 선택한 노드 하위 삭제
}
}
노드 확장/축소
확장, 축소 함수는 Expand, Collapse 함수를 사용하면 됩니다. ‘선택 노드 확장’ 버튼과 ‘선택 노드 축소’ 버튼의 Click 이벤트 함수를 만들어 줍니다.
private void btnExpandSelectNode_Click(object sender, EventArgs e)
{
TreeNode ndSelect = treeView.SelectedNode;
if (ndSelect != null)
ndSelect.Expand(); // 확장
}
private void btnCollapseSelectNode_Click(object sender, EventArgs e)
{
TreeNode ndSelect = treeView.SelectedNode;
if (ndSelect != null)
ndSelect.Collapse(); // 축소
}
선택 이벤트 – AfterSelect
트리 노드를 선택했을 때 사용되는 함수는 AfterSelect 이벤트 함수입니다. 선택 항목이 변경된 후에 발생됩니다.
트리 뷰 선택 후 속성에서 AfterSelect을 추가해줍니다.
private void treeView_AfterSelect(object sender, TreeViewEventArgs e)
{
TreeNode? ndSelect = e.Node;
if (ndSelect != null)
{
tbText.Text = ndSelect.Text; // 선택한 항목의 텍스트를 TextBox 컨트롤에 표시
}
}
실행시켜 확인해봅니다.
이미지 추가
이미지가 없이 텍스트만 있으니 트리 뷰에 이미지를 추가하여 사용자에게 보여주는 방법도 있습니다.
디자인에서 ImageList를 드래그하여 WinForm에 드랍해줍니다.
그 다음 이미지리스트 속성에서 이미지 선택을 클릭하여 이미지를 추가해줍니다.
그러면 아래와 같이 이미지 컬렉션 편집기가 추가 됩니다. 여기에 아래 파일 두 개를 다운받아서 추가해줍니다.
0번에 normal.png, 1번에 select.png가 추가되었는데 이것은 ImageList내에서 인덱스에 매칭됩니다.
이제 디자인에서 폼을 더블 클릭 하여 Load 이벤트 함수를 추가합니다.
private void Form1_Load(object sender, EventArgs e)
{
treeView.ImageList = imageList1; // 이미지리스트 추가
}
그리고 Node를 추가할 때 TreeNode 객체에 ImageIndex에는 기본 상태일 때 표시할 이미지 인덱스, SelectedImageIndex에는 선택 됐을 때 표시할 이미지의 인덱스 값을 입력합니다.
private void btnAddSelectNode_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(tbText.Text))
return;
TreeNode ndSelect = treeView.SelectedNode; // 선택한 노드 가져오기
if (ndSelect != null)
{
TreeNode nd = new TreeNode();
nd.Text = tbText.Text; // text
nd.ImageIndex = 0; // 기본 상태일 때 표시할 이미지 인덱스
nd.SelectedImageIndex = 1; // 선택 되었을 때 표시할 이미지 인덱스
ndSelect.Nodes.Add(nd); // 선택한 노드에 추가
}
}
실행 하면 선택된 노드는 이미지 표시가 다르게 됩니다.
아래 링크에서 전체 코드를 볼 수 있습니다.
github : https://github.com/3001ssw/c_sharp/tree/main/WinForm/TreeView