How to reorder TreeViewItem by drag&drop in TreeView using interactivity.behavior class in WPF

Question

I have implemented the Drag&Drop from a ListBox to a TreeView, as displayed below.

Drag&Drop from ListBox to TreeView Now I want, for example, after dropping items to TreeView, I can drag ListBoxItem2 and drop it in the TreeViewItem1 and vice versa for other two items. I am using Behavior class from System.Windows.Interactivity library to realize such feature.

Here is the code

XAML:

ViewModel:

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace TreeviewExample
{
    public class MainViewModel
    {
        public ObservableCollection ListBoxSource { get; set; }
        public ObservableCollection TreeViewSource { get; set; }

        public MainViewModel()
        {
            ListBoxSource = new ObservableCollection();
            TreeViewSource = new ObservableCollection();

            ListBoxSource.Add(new ViewItem("ListBoxItem1"));
            ListBoxSource.Add(new ViewItem("ListBoxItem2"));

            ViewItem defalutView = new ViewItem("Root", 1);
            defalutView.ViewItems.Add(new ViewItem("TreeViewItem1"));
            defalutView.ViewItems.Add(new ViewItem("TreeViewItem2"));
            TreeViewSource.Add(defalutView);
        }
    }   
}

Model:

using System.Collections.ObjectModel;

namespace TreeviewExample
{
    public class ViewItem
    {
        public string ItemName { get; set; }
        public ObservableCollection ViewItems { get; } = new ObservableCollection();
        public int IsVisible { get; set; }

        public ViewItem()
        { }

        public ViewItem(string name, int IsVisible = 0)
        {
            this.ItemName = name;
            this.IsVisible = IsVisible;
        }
    }
}

ListBoxDrapDropBehavior:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace TreeviewExample
{
    public class ListBoxDragDropBehavior : Behavior
    {
        protected override void OnAttached()
        {
            AssociatedObject.PreviewMouseLeftButtonDown += PreviewMouseLeftButtonDown;
        }

        private void PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (sender is ListBox)
            {
                ListBox dragSource = (ListBox)sender;
                object data = GetDataFromSourceControl(dragSource, e.GetPosition(AssociatedObject));
                if (data != null) DragDrop.DoDragDrop(dragSource, data, DragDropEffects.Move);
            }
        }

        private static object GetDataFromSourceControl(ItemsControl source, Point point)
        {
            UIElement element = source.InputHitTest(point) as UIElement;
            if (element != null)
            {
                object data = DependencyProperty.UnsetValue;
                while (data == DependencyProperty.UnsetValue)
                {
                    data = source.ItemContainerGenerator.ItemFromContainer(element);
                    if (data == DependencyProperty.UnsetValue) element = VisualTreeHelper.GetParent(element) as UIElement;
                    if (element == source) return null;
                }
                if (data != DependencyProperty.UnsetValue) return data;
            }
            return null;
        }
    }

}

TreeViewDragDropBehavior:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace TreeviewExample
{
    public class TreeViewDragDropBehavior : Behavior
    {
        protected override void OnAttached()
        {
            AssociatedObject.PreviewMouseLeftButtonDown += PreviewMouseLeftButtonDown;
            AssociatedObject.Drop += Tv_Drop;
        }

        private void PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (sender is TreeView)
            {
                TreeView dragSource = (TreeView)sender;
                object data = GetDataFromSourceControl(dragSource, e.GetPosition(AssociatedObject));
                if (data != null) DragDrop.DoDragDrop(dragSource, data, DragDropEffects.Move);
            }
        }

        private static object GetDataFromSourceControl(ItemsControl source, Point point)
        {
            UIElement element = source.InputHitTest(point) as UIElement;
            if (element != null)
            {
                object data = DependencyProperty.UnsetValue;
                while (data == DependencyProperty.UnsetValue)
                {
                    data = source.ItemContainerGenerator.ItemFromContainer(element);
                    if (data == DependencyProperty.UnsetValue) element = VisualTreeHelper.GetParent(element) as UIElement;
                    if (element == source) return null;
                }
                if (data != DependencyProperty.UnsetValue) return data;
            }
            return null;
        }

        private void Tv_Drop(object sender, DragEventArgs e)
        {
            if (sender is TreeView)
            {
                TreeView treeView = (TreeView)sender;
                e.Effects = DragDropEffects.None;
                e.Handled = true;
                // Verify that this is a valid drop and then store the drop target
                ViewItem targetItem = (e.OriginalSource as TextBlock)?.DataContext as ViewItem;
                MainViewModel vm = (sender as TreeView).DataContext as MainViewModel;
                if (targetItem != null && vm != null)
                {
                    object data = e.Data.GetData(typeof(ViewItem));
                    ViewItem dragData = (ViewItem)data;
                    targetItem.ViewItems.Add(new ViewItem(dragData.ItemName));
                }
            }
        }
    }
}

Questions:

How to enable my desired feature that move items inside TreeView?
What is the difference of DragDropEffects? I also try to set e.Effects to DragDropEffects.Move, but the result looks the same to me.
What is the difference between MouseLeftButtonDown and PreviewMouseLeftButtonDown. I see lots of similar events that with or without Preview.

Could someone help me with the issue?

What I have tried:

In the PreviewMouseLeftButtonDown function, I add another case for TreeView. But I fail to get the drag data. The return value of e.Data.GetData(typeof(ViewItem)) in the Tv_Drop function is the root in the TreeView.

What I expect:

I want to drag and drop TreeViewItem inside TreeView to reorder the items.

Accepted Answer

HI,
if you want use additional click event (button click) you must change your code.

MainWindow:

MainViewModel:

using System;
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace TreeviewExample
{
	public class MainViewModel
	{
		public ObservableCollection ListBoxSource { get; set; } = new ObservableCollection();
		public ObservableCollection TreeViewSource { get; set; } = new ObservableCollection();

		// in ctor load demo data
		public MainViewModel()
		{
			for (int i = 1; i < 20; i++) ListBoxSource.Add(new ViewItem($"ListBoxItem {i}") { Parent = ListBoxSource });

			ViewItem defaultView = new ViewItem("Root", 1) { Parent = TreeViewSource };
			TreeViewSource.Add(defaultView);
			for (int i = 1; i < 10; i++) defaultView.ViewItems.Add(new ViewItem($"TreeViewItem {i}") { Parent = defaultView.ViewItems });
		}

		// property for commands
		public ICommand Cmd { get => new RelayCommand(CmdExec); }

		private void CmdExec(object obj)
		{
			var item = obj as ViewItem;
			if (item == null) return;
			item.Parent.Remove(item);
		}
	}

#pragma warning disable CS8612 // Nullability of reference types in type doesn't match implicitly implemented member.
#pragma warning disable CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider declaring as nullable.
#pragma warning disable CS8767 // Nullability of reference types in type of parameter doesn't match implicitly implemented member (possibly because of nullability attributes).
	public class RelayCommand : ICommand
	{
		private readonly Predicate

Answer

Hi,
you can change your code:

MainViewModel (include reference to parent collection):

using System.Collections.ObjectModel;

namespace TreeviewExample
{
	public class MainViewModel
	{
		public ObservableCollection ListBoxSource { get; set; } = new ObservableCollection();
		public ObservableCollection TreeViewSource { get; set; } = new ObservableCollection();

		public MainViewModel()
		{
			for (int i = 1; i < 20; i++) ListBoxSource.Add(new ViewItem($"ListBoxItem {i}") { Parent= ListBoxSource });

			ViewItem defaultView = new ViewItem("Root", 1) { Parent = TreeViewSource };
			TreeViewSource.Add(defaultView);
			for (int i = 1; i < 10; i++) defaultView.ViewItems.Add(new ViewItem($"TreeViewItem {i}") { Parent= defaultView.ViewItems });
		}
	}
}

ViewItem (include property for parent collection)

using System.Collections.ObjectModel;

namespace TreeviewExample
{
#pragma warning disable CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider declaring as nullable.
	public class ViewItem
	{
		public string ItemName { get; set; }
		public ObservableCollection ViewItems { get; } = new ObservableCollection();
		public int IsVisible { get; set; }

		public ViewItem() { }

		public ViewItem(string name, int IsVisible = 0)
		{
			this.ItemName = name;
			this.IsVisible = IsVisible;
		}

		public ObservableCollection Parent { get; set; }
	}
}

TreeViewDropBehavior:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace TreeviewExample
{
#pragma warning disable CS8600 // Converting null literal or possible null value to non-nullable type.
#pragma warning disable CS8602 // Dereference of a possibly null reference.
#pragma warning disable CS8603 // Possible null reference return.

	public class TreeViewDragDropBehavior : Behavior
	{
		protected override void OnAttached()
		{
			AssociatedObject.PreviewMouseLeftButtonDown += tv_PreviewMouseLeftButtonDown;
			AssociatedObject.Drop += Tv_Drop;
		}

		private void tv_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
		{
			// Get the dragged TreeViewItem
			TreeViewItem tvItem = FindAnchestor((DependencyObject)e.OriginalSource);

			// Find the data behind the TreeViewItem
			ViewItem dragData = tvItem.DataContext as ViewItem;

			// Initialize the drag & drop operation
			DragDrop.DoDragDrop(tvItem, dragData, DragDropEffects.Move);
		}

		private void Tv_Drop(object sender, DragEventArgs e)
		{
			// check for data
			if (!e.Data.GetDataPresent(typeof(ViewItem))) return;
			// store the drop target
			ViewItem targetItem = (e.OriginalSource as TextBlock)?.DataContext as ViewItem;
            if (targetItem == null) return;
			ViewItem data = (ViewItem)e.Data.GetData(typeof(ViewItem));
			targetItem.ViewItems.Add(data);
			// change parent collection
			data.Parent.Remove(data);
			data.Parent= targetItem.ViewItems; 
		}

		// Helper to search up the VisualTree
		private static T FindAnchestor(DependencyObject current) where T : DependencyObject
		{
			do
			{
				if (current is T) return (T)current;
				current = VisualTreeHelper.GetParent(current);
			} while (current != null);
			return null;
		}
	}
}

Share via

How to reorder TreeViewItem by drag&drop in TreeView using interactivity.behavior class in WPF

1 additional answer

Your answer