🔀 WPF TreeView 드래그 앤 드롭으로 노드 이동 구현

🔀 WPF TreeView 드래그 앤 드롭으로 노드 이동 구현

이번에는 TreeView 항목을 마우스로 드래그하여 이동하는 기능을 구현해보겠습니다. 계층 구조가 있는 UI에서 매우 유용한 기능입니다.

📌 목차

• 1. Drag & Drop 이벤트 연결
• 2. 노드 이동 처리
• 3. 동일 부모 내 이동 vs 계층 이동
• 4. 확장 팁

1. Drag & Drop 이벤트 연결

XAML에서 TreeView와 TreeViewItem에 이벤트 핸들러를 설정합니다.

<TreeView x:Name="MyTreeView"
          PreviewMouseLeftButtonDown="TreeView_PreviewMouseLeftButtonDown"
          Drop="TreeView_Drop"
          AllowDrop="True">
    ...
</TreeView>

2. Drag 시작과 Drop 처리

코드 비하인드에서 드래그 시작과 드롭 이벤트를 구현합니다.

private Category? _draggedItem;

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

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

    Category? target = (e.OriginalSource as FrameworkElement)?.DataContext as Category;
    if (target != null && target != _draggedItem && !IsChild(_draggedItem, target))
    {
        _draggedItem.Parent?.Children.Remove(_draggedItem);
        _draggedItem.Parent = target;
        target.Children.Add(_draggedItem);
    }
}

private bool IsChild(Category parent, Category child)
{
    if (parent.Children.Contains(child)) return true;
    return parent.Children.Any(c => IsChild(c, child));
}

3. 노드 구조 유지하면서 계층 이동

부모-자식 관계를 고려하여 자식 노드를 자신의 하위로 드래그하는 것을 방지해야 합니다.
또한, 동일한 부모 내에서의 위치 변경도 구현할 수 있습니다.

4. 확장 팁

• Drop 시 아이콘 효과 또는 하이라이팅 추가
• 노드 순서 변경 (Drag 위치에 따라 인덱스 변경)
• Undo/Redo 기능 연동

✅ 마무리

TreeView에 드래그 앤 드롭 기능을 추가하면 복잡한 트리 구조를 직관적으로 다룰 수 있습니다.
다음 편에서는 TreeView 항목을 파일/디렉터리 구조처럼 실제 파일과 연동하는 예제를 소개하겠습니다!