WPF TreeView Drag & Drop 구현

🖱️ WPF TreeView에서 Drag & Drop으로 노드 이동하기

이번 포스트에서는 WPF TreeView에서 노드를 드래그 앤 드롭(Drag & Drop)으로 이동하는 방법을 소개합니다.
단순히 UI 이벤트만 처리하는 것이 아니라 MVVM 구조 안에서 처리하는 팁도 함께 알려드립니다.

목차

• 1. Category 모델 클래스
• 2. ViewModel 구성
• 3. XAML에서 Drag & Drop 구현
• 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 MainViewModel()
    {
        Categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "백엔드",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "ASP.NET" },
                    new Category { Name = "Node.js" }
                }
            },
            new Category
            {
                Name = "프론트엔드",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "React" },
                    new Category { Name = "Vue" }
                }
            }
        };
    }
}

3. XAML에서 Drag & Drop 구현

<TreeView ItemsSource="{Binding Categories}" AllowDrop="True"
          PreviewMouseLeftButtonDown="TreeView_PreviewMouseLeftButtonDown"
          DragOver="TreeView_DragOver"
          Drop="TreeView_Drop" Margin="10">

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

📌 Code-behind 이벤트 처리

private Category? _draggedItem;

private void TreeView_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    TreeViewItem item = FindAncestor<TreeViewItem>((DependencyObject)e.OriginalSource);
    if (item?.DataContext is Category category)
    {
        _draggedItem = category;
        DragDrop.DoDragDrop(item, category, DragDropEffects.Move);
    }
}

private void TreeView_DragOver(object sender, DragEventArgs e)
{
    e.Effects = DragDropEffects.Move;
    e.Handled = true;
}

private void TreeView_Drop(object sender, DragEventArgs e)
{
    if (_draggedItem == null)
        return;

    TreeViewItem item = FindAncestor<TreeViewItem>((DependencyObject)e.OriginalSource);
    if (item?.DataContext is Category targetCategory && targetCategory != _draggedItem)
    {
        // 부모 노드에서 제거
        RemoveFromParent(DataContext as MainViewModel, _draggedItem);
        // 대상 노드의 자식으로 추가
        targetCategory.Children.Add(_draggedItem);
    }
    _draggedItem = null;
}

private void RemoveFromParent(MainViewModel vm, Category child)
{
    foreach (var parent in vm.Categories.SelectMany(GetAllCategories))
    {
        if (parent.Children.Contains(child))
        {
            parent.Children.Remove(child);
            return;
        }
    }
}

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

// Visual Tree Helper
private static T? FindAncestor<T>(DependencyObject current) where T : DependencyObject
{
    while (current != null)
    {
        if (current is T desired)
            return desired;
        current = VisualTreeHelper.GetParent(current);
    }
    return null;
}

4. 드래그 앤 드롭 동작 설명

• 노드를 클릭 후 드래그하면 DragDrop 시작
• 드롭 대상 노드의 자식으로 이동
• 기존 부모에서 해당 노드를 찾아 제거 후 이동
• MVVM 구조에 맞춰 ViewModel 데이터를 수정

완전한 MVVM 구조로 하려면 Behavior 또는 Attached Property를 사용하는 방식도 있습니다.
하지만 기본 구조에서는 code-behind도 충분히 안전하게 사용할 수 있습니다.

5. 마무리 및 다음 편 예고

TreeView에서 드래그 앤 드롭은 사용자 경험을 크게 향상시킬 수 있습니다.
이번 글에서는 가장 기본적인 형태의 노드 이동을 구현해봤습니다.

• ViewModel의 구조를 유지하면서도 DragDrop 구현
• TreeViewItem 찾기 및 VisualTree 탐색
• 자식 이동 및 제거 로직 캡슐화

다음 시리즈에서는 TreeView의 체크박스(Checkbox) 노드 처리에 대해 다뤄볼 예정입니다.
감사합니다! 😄 더 다뤄보고 싶은 TreeView 기능이 있다면 댓글로 알려주세요!