WPF TreeView 검색 기능 구현

🔍 WPF TreeView 검색 기능 구현

TreeView가 커질수록 원하는 노드를 찾기 어려워집니다. 이번 포스트에서는 TreeView에 검색 기능을 추가하여 사용자가 텍스트를 입력하면 관련 노드만 표시되도록 만들어봅니다.

목차

• 1. 검색 입력 UI 만들기
• 2. ViewModel에서 필터링 처리
• 3. 검색 결과 자동 확장
• 4. 정리 및 확장 아이디어

1. 검색 입력 UI 만들기

<StackPanel>
  <TextBox Width="300" Margin="10"
           Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}"
           PlaceholderText="노드 검색..." />

  <TreeView ItemsSource="{Binding FilteredCategories}">
    <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding Name}" />
      </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
  </TreeView>
</StackPanel>

사용자의 입력을 ViewModel로 바인딩합니다.

2. ViewModel에서 필터링 처리

private ObservableCollection<Category> _allCategories;
public ObservableCollection<Category> FilteredCategories { get; set; } = new();

private string _searchText = "";
public string SearchText
{
    get => _searchText;
    set
    {
        _searchText = value;
        OnPropertyChanged();
        FilterTree();
    }
}

private void FilterTree()
{
    FilteredCategories.Clear();
    foreach (var cat in _allCategories)
    {
        var copy = FilterCategory(cat, _searchText);
        if (copy != null)
            FilteredCategories.Add(copy);
    }
}

private Category? FilterCategory(Category cat, string keyword)
{
    var matchedChildren = cat.Children
        .Select(child => FilterCategory(child, keyword))
        .Where(c => c != null)
        .ToList();

    bool isMatch = cat.Name.Contains(keyword, StringComparison.OrdinalIgnoreCase);
    if (isMatch || matchedChildren.Count > 0)
    {
        return new Category
        {
            Name = cat.Name,
            Children = new ObservableCollection<Category>(matchedChildren)
        };
    }
    return null;
}

트리를 재귀적으로 탐색하면서 키워드와 일치하거나 자식 중에 일치하는 노드를 복사하여 구성합니다.

3. 검색 결과 자동 확장

필터링된 트리 항목은 기본적으로 열려 있지 않기 때문에, 사용자 경험을 위해 노드가 자동으로 확장되도록 추가 작업이 필요합니다.

public class Category : INotifyPropertyChanged
{
    public string Name { get; set; }
    public ObservableCollection<Category> Children { get; set; } = new();

    private bool _isExpanded = false;
    public bool IsExpanded
    {
        get => _isExpanded;
        set { _isExpanded = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string? name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

검색 시 결과를 순회하면서 IsExpanded = true를 설정해주면 자동 확장이 가능합니다.

4. 정리 및 확장 아이디어

• TreeView에서 실시간 검색을 통해 UX를 크게 향상시킬 수 있습니다
• 검색어 하이라이트 기능 추가 가능 (TextBlock 스타일 변경)
• 검색 결과 선택 시 해당 노드를 강조하거나 자동 스크롤 기능도 구현 가능

다음 편에서는 TreeView에서 체크박스 노드를 구현하고, 상위/하위 노드가 자동으로 체크되도록 연결하는 기능을 구현해보겠습니다! ✅