🌳 WPF ContentTemplate과 HierarchicalDataTemplate으로 트리 구조 UI 구성하기

WPF에서 트리 구조의 데이터를 표현할 때 가장 많이 사용하는 컨트롤이 TreeView입니다.
이 글에서는 TreeView를 꾸밀 때 사용하는 ContentTemplate과 HierarchicalDataTemplate의 차이와 활용법을 완전 정리합니다.

1. TreeView의 구조 이해

TreeView는 계층형 데이터를 시각적으로 표현하기 위한 컨트롤입니다.
부모-자식 구조를 갖는 데이터를 UI로 보여줄 수 있어 파일 탐색기 등에서 자주 쓰입니다.

2. 데이터 모델 계층 만들기


public class Category
{
    public string Name { get; set; }
    public ObservableCollection<Category> SubCategories { get; set; }

    public Category()
    {
        SubCategories = new ObservableCollection<Category>();
    }
}

위 클래스는 자기 자신을 자식으로 가질 수 있어 트리 구조를 만들 수 있습니다.

3. HierarchicalDataTemplate이란?

HierarchicalDataTemplate은 TreeView처럼 계층형 데이터를 표현할 때 사용하는 특수한 템플릿입니다.
하위 항목을 자동으로 연결할 수 있는 ItemsSource 속성을 지원합니다.


<TreeView ItemsSource="{Binding Categories}">
  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
      <TextBlock Text="{Binding Name}" FontWeight="Bold" />
    </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

이렇게 하면 재귀적으로 하위 항목까지 자동 렌더링됩니다.

4. ContentTemplate이란?

ContentTemplate은 계층적이지 않은 단일 항목의 표현 방식만 지정합니다. 예: Button, Label, ListBoxItem 등.
TreeView에서는 보통 상위 항목만 표현하고, 하위 항목이 없다면 ContentTemplate을 쓸 수 있습니다.

예시 - 단일 표현만 필요할 때


<TreeView.ItemTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding Name}" Foreground="Gray" />
  </DataTemplate>
</TreeView.ItemTemplate>

5. 트리뷰 실전 예제

이제 실제 트리뷰를 구성해보겠습니다.

🔹 ViewModel에 계층형 데이터 바인딩


Categories = new ObservableCollection<Category>
{
    new Category
    {
        Name = "프론트엔드",
        SubCategories = new ObservableCollection<Category>
        {
            new Category { Name = "HTML" },
            new Category { Name = "CSS" },
            new Category { Name = "JavaScript" }
        }
    },
    new Category
    {
        Name = "백엔드",
        SubCategories = new ObservableCollection<Category>
        {
            new Category { Name = "C#" },
            new Category { Name = "Java" }
        }
    }
};

🔹 TreeView 바인딩


<TreeView ItemsSource="{Binding Categories}" Margin="10">
  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="📁 " />
        <TextBlock Text="{Binding Name}" FontWeight="SemiBold" />
      </StackPanel>
    </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

📁 아이콘을 넣거나 색상으로 계층을 구분할 수도 있습니다.

6. 요약 및 다음 주제 예고

HierarchicalDataTemplate은 계층 구조를 표현할 때 필수입니다.
ContentTemplate은 단일 표현에 유용하지만, 트리 구조에는 비적합합니다.
트리뷰는 데이터 구조와 UI를 동시에 설계해야 합니다.

다음 편에서는 WPF Command 바인딩과 MVVM에서 TreeView 클릭 처리를 실습해볼 예정입니다.

읽어주셔서 감사합니다! 🙌 질문은 댓글로 남겨주세요.

WPF TreeView와 HierarchicalDataTemplate 완전 정복