WPF TreeView ContextMenu 노드 추가/삭제

🌳 WPF TreeView에서 ContextMenu로 노드 추가 및 삭제 구현하기

TreeView를 사용하면서 노드를 동적으로 추가하거나 삭제할 수 있다면 더욱 유연한 UI를 만들 수 있습니다.
이번 글에서는 MVVM 패턴을 유지하면서 ContextMenu(우클릭 메뉴)를 활용하여 노드를 추가/삭제하는 방법을 알아봅니다.

목차

• 1. Category 모델 클래스 구성
• 2. ViewModel에서 명령 정의
• 3. TreeView와 ContextMenu XAML 구성
• 4. 노드 추가/삭제 동작 확인
• 5. 마무리 및 다음 편 예고

1. Category 모델 클래스 구성

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

2. ViewModel에서 명령 정의

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

    public MainViewModel()
    {
        Categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "프로그래밍 언어",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "C#" },
                    new Category { Name = "Python" }
                }
            }
        };

        AddCommand = new RelayCommand(AddNode);
        RemoveCommand = new RelayCommand(RemoveNode);
    }

    private void AddNode(object? parameter)
    {
        if (parameter is Category category)
        {
            category.Children.Add(new Category { Name = "새 하위 항목" });
        }
    }

    private void RemoveNode(object? parameter)
    {
        if (parameter is Category category)
        {
            foreach (var parent in Categories.SelectMany(GetAllCategories))
            {
                if (parent.Children.Contains(category))
                {
                    parent.Children.Remove(category);
                    return;
                }
            }
        }
    }

    private IEnumerable<Category> GetAllCategories(Category category)
    {
        yield return category;
        foreach (var child in category.Children.SelectMany(GetAllCategories))
            yield return child;
    }
}

3. TreeView와 ContextMenu XAML 구성

<TreeView ItemsSource="{Binding Categories}" Margin="10">
  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Children}">
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}" />
        <StackPanel.ContextMenu>
          <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
            <MenuItem Header="하위 항목 추가"
                      Command="{Binding DataContext.AddCommand, RelativeSource={RelativeSource AncestorType=Window}}"
                      CommandParameter="{Binding}" />
            <MenuItem Header="이 항목 삭제"
                      Command="{Binding DataContext.RemoveCommand, RelativeSource={RelativeSource AncestorType=Window}}"
                      CommandParameter="{Binding}" />
          </ContextMenu>
        </StackPanel.ContextMenu>
      </StackPanel>
    </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

위 코드에서 DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}"는
메뉴가 노드 자체를 바인딩할 수 있도록 설정해줍니다.

4. 노드 추가/삭제 동작 확인

• 노드를 우클릭하면 하위 항목 추가 / 항목 삭제 메뉴가 표시됩니다.
• 하위 항목 추가 시 해당 노드의 자식으로 새로운 항목이 추가됩니다.
• 삭제 시 상위 컬렉션에서 해당 노드를 제거합니다.
• 모든 로직은 MVVM 구조 안에서 Command + ViewModel 처리로 동작합니다.

5. 마무리 및 다음 편 예고

이번 글에서는 WPF TreeView에서 우클릭 메뉴(ContextMenu)를 활용하여 노드를 동적으로 추가하거나 삭제하는 기능을 MVVM 방식으로 구현했습니다.

• ContextMenu에서도 CommandParameter를 통해 바인딩이 가능하다!
• 삭제 시에는 재귀적으로 부모를 찾아서 제거
• 모든 코드가 ViewModel에 있고 View는 Command에만 연결!

다음 시리즈에서는 TreeView 노드의 드래그 앤 드롭 기능(DnD)을 다룰 예정입니다.
더 풍성한 TreeView UI를 만들 준비되셨나요? 😉