WPF TreeView 검색 기능 구현

🔍 WPF TreeView 노드 검색 기능 구현하기

이번 포스트에서는 WPF의 TreeView에서 노드 검색 기능을 MVVM 패턴으로 구현해봅니다.
사용자가 입력한 검색어에 따라 특정 노드만 표시하거나 강조하는 방식으로 UX를 개선할 수 있습니다.

목차

• 1. Category 모델 클래스
• 2. ViewModel 구성 및 검색 로직
• 3. XAML에서 검색 UI 및 바인딩
• 4. 필터링 및 강조 로직 설명
• 5. 마무리 및 다음 편 예고

1. Category 모델 클래스

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

    private bool _isVisible = true;
    public bool IsVisible
    {
        get => _isVisible;
        set { _isVisible = value; OnPropertyChanged(nameof(IsVisible)); }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

2. ViewModel 구성 및 검색 로직

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Category> Categories { get; set; }

    private string _searchText = string.Empty;
    public string SearchText
    {
        get => _searchText;
        set
        {
            _searchText = value;
            OnPropertyChanged(nameof(SearchText));
            ApplySearch();
        }
    }

    public MainViewModel()
    {
        Categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "프로그래밍",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "C#" },
                    new Category { Name = "Java" },
                    new Category { Name = "Python" }
                }
            },
            new Category
            {
                Name = "데이터베이스",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "Oracle" },
                    new Category { Name = "MySQL" },
                    new Category { Name = "PostgreSQL" }
                }
            }
        };
    }

    private void ApplySearch()
    {
        foreach (var category in Categories)
        {
            FilterCategory(category, SearchText);
        }
    }

    private bool FilterCategory(Category category, string search)
    {
        bool match = category.Name.Contains(search, StringComparison.OrdinalIgnoreCase);
        bool childMatch = false;

        foreach (var child in category.Children)
        {
            childMatch |= FilterCategory(child, search);
        }

        category.IsVisible = match || childMatch;
        return category.IsVisible;
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

3. XAML에서 검색 UI 및 바인딩

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

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

    <TreeView.ItemContainerStyle>
      <Style TargetType="TreeViewItem">
        <Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}" />
      </Style>
    </TreeView.ItemContainerStyle>
  </TreeView>
</StackPanel>

📌 BoolToVisibilityConverter 추가

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. 필터링 및 강조 로직 설명

• SearchText 프로퍼티 변경 시 필터링 동작
• 노드 이름이 검색어를 포함하거나 자식 중 포함된 노드가 있다면 IsVisible = true
• TreeViewItem의 Visibility 속성으로 필터링 적용

5. 마무리 및 다음 편 예고

TreeView의 검색 기능은 계층형 데이터를 빠르게 탐색할 수 있도록 도와줍니다.
MVVM 구조를 활용하면 유연하고 재사용 가능한 UI를 만들 수 있습니다.

• 검색 기능은 사용자 입력 즉시 반응
• 자식 노드 재귀 탐색으로 전체 트리에서 검색 가능
• 간단한 Visibility 컨트롤로 UX 개선

다음 편에서는 TreeView 노드 선택 상태 유지 및 복원 기능을 구현해보겠습니다! 😊
데이터 저장 및 다시 불러올 때 선택 상태를 유지하는 것도 사용자 편의성에 큰 도움이 됩니다.