WPF TreeView 체크박스 노드 구현

☑️ WPF TreeView에서 체크박스 노드 구현하기

WPF의 TreeView에 체크박스를 붙이면 계층형 구조에서 다중 선택이 가능해집니다.
특히 자식 노드나 부모 노드의 상태와 연계되면 더 강력한 UI가 완성됩니다.

목차

• 1. Category 모델 클래스
• 2. ViewModel 구성 및 초기 데이터
• 3. XAML에서 체크박스 UI 구현
• 4. 체크 상태 동기화 구현
• 5. 마무리 및 다음 편 예고

1. Category 모델 클래스

public class Category : INotifyPropertyChanged
{
    public string Name { get; set; }

    private bool _isChecked;
    public bool IsChecked
    {
        get => _isChecked;
        set
        {
            if (_isChecked != value)
            {
                _isChecked = value;
                OnPropertyChanged(nameof(IsChecked));
                foreach (var child in Children)
                {
                    child.IsChecked = value;
                }
            }
        }
    }

    public ObservableCollection<Category> Children { get; set; } = new();

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

2. ViewModel 구성 및 초기 데이터

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

    public MainViewModel()
    {
        Categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "프로그래밍",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "C#" },
                    new Category { Name = "Java" },
                    new Category
                    {
                        Name = "웹 개발",
                        Children = new ObservableCollection<Category>
                        {
                            new Category { Name = "HTML" },
                            new Category { Name = "CSS" },
                            new Category { Name = "JavaScript" }
                        }
                    }
                }
            }
        };
    }
}

3. XAML에서 체크박스 UI 구현

<TreeView ItemsSource="{Binding Categories}" Margin="10">
  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
      <StackPanel Orientation="Horizontal">
        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
        <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
      </StackPanel>
    </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

각 노드에 <CheckBox />를 추가하여 TreeViewItem 마다 체크 기능을 부여했습니다.
Mode=TwoWay는 View와 ViewModel 간 양방향 바인딩을 의미합니다.

4. 체크 상태 동기화 구현

• 부모 노드가 체크되면 모든 자식 노드가 자동 체크됩니다.
• 자식 노드만 체크하는 기능도 구현 가능 (부모 상태 변경 무시)
• 추가적으로 모든 자식이 체크되어야 부모를 자동 체크하는 방식도 구현 가능

📌 부모-자식 상태 동기화 (양방향) 팁

양방향 체크 상태 동기화까지 구현하고 싶다면 아래 로직을 추가하세요:

public bool IsChecked
{
    get => _isChecked;
    set
    {
        if (_isChecked != value)
        {
            _isChecked = value;
            OnPropertyChanged(nameof(IsChecked));

            foreach (var child in Children)
            {
                child.IsChecked = value;
            }

            // 상위 노드에 반영하는 로직은 재귀나 이벤트 통해 구현 가능
        }
    }
}

5. 마무리 및 다음 편 예고

TreeView에서 체크박스를 추가하면 항목을 선택하는 UI가 훨씬 유연해집니다.
특히 계층적으로 데이터를 선택할 때 사용자 편의성을 극대화할 수 있습니다.

• 체크박스 노드 구성은 MVVM 패턴에서도 매우 잘 작동
• ObservableCollection 및 PropertyChanged를 통해 동기화 처리
• 양방향 부모-자식 체크 상태 구현도 가능

다음 편에서는 TreeView 노드 검색(Search) 기능을 MVVM 구조로 구현해보겠습니다! 🔍 더 궁금한 TreeView 주제가 있다면 댓글로 남겨주세요 🙌