WPF中TreeView的拖拽实现

已于 2023-09-19 10:18:52 修改
阅读量863 收藏 3
点赞数
分类专栏： C# WPF 文章标签： wpf
于 2023-08-23 14:20:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37080285/article/details/130527772
版权
C# 同时被 2 个专栏收录
33 篇文章 1 订阅
订阅专栏
WPF
28 篇文章 3 订阅
订阅专栏

本文代码基本参考WPF Drag and Drop Using Behavior

拖放

拖放操作通常涉及两个参与方：拖动对象所源自的拖动源和接收放置对象的拖放目标。 拖动源和放置目标可能是相同应用程序或不同应用程序中的 UI 元素。

Drag

Drag就是拖动源

public interface IDragable
{
    Type DataType { get; }
    object Data { get;}
}

Drag的Behavior

这里主要是在按住鼠标同时移动鼠标也就是拖动操作。这里最关键的就是拖动源通过调用静态 DragDrop.DoDragDrop 方法和向其传递传输的数据来启动拖放操作。

public class FrameworkElementDragBehavior : Behavior<FrameworkElement>
{
    private bool isMouseClicked = false;

    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
        this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        this.AssociatedObject.MouseLeave += new MouseEventHandler(AssociatedObject_MouseMove);
    }

    void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        isMouseClicked = true;
    }

    void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        isMouseClicked = false;
    }

    void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
    {
        if (isMouseClicked)
        {
            isMouseClicked = false;
            //set the item's DataContext as the data to be transferred
            IDragable dragObject = this.AssociatedObject.DataContext as IDragable;
            if (dragObject != null)
            {
                DataObject data = new DataObject();
                data.SetData(dragObject.DataType, dragObject.Data);
                System.Windows.DragDrop.DoDragDrop(this.AssociatedObject, data, DragDropEffects.All);
            }
        }
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
        this.AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        this.AssociatedObject.MouseLeave -= new MouseEventHandler(AssociatedObject_MouseMove);
    }
}

Drop

Drop就是拖入的目标，IDropable接口就是实现目标拖入到列表中的操作。

public interface IDropable
{
    /// <summary>
    /// 拖入的数据类型
    /// </summary>
    Type DataType { get; }

    /// <summary>
    /// 拖入到列表中
    /// </summary>
    /// <param name="data">被拖入的data</param>
    void Drop(object data);
    /// <summary>
    /// 拖入到列表中
    /// </summary>
    /// <param name="data">被拖入的data</param>
    void DropIn(object data, object above, object below);
    /// <summary>
    /// 是否允许拖入
    /// </summary>
    /// <param name="dataObject"></param>
    /// <returns></returns>
    bool CanDrop(object data);
}

Drop到子项的Behavior

public class FrameworkElementDropBehavior : Behavior<FrameworkElement>
{
    private Type dataType; //the type of the data that can be dropped into this control
    //private FrameworkElementAdorner adorner;

    protected override void OnAttached()
    {
        base.OnAttached();

        this.AssociatedObject.AllowDrop = true;
        this.AssociatedObject.DragEnter += new DragEventHandler(AssociatedObject_DragEnter);
        this.AssociatedObject.DragOver += new DragEventHandler(AssociatedObject_DragOver);
        this.AssociatedObject.DragLeave += new DragEventHandler(AssociatedObject_DragLeave);
        this.AssociatedObject.Drop += new DragEventHandler(AssociatedObject_Drop);
    }

    void AssociatedObject_Drop(object sender, DragEventArgs e)
    {
        if (dataType != null)
        {
            //drop the data
            if (CanDrop(e))
            {
                IDropable dropObject = this.AssociatedObject.DataContext as IDropable;
                dropObject.Drop(e.Data.GetData(dataType));
            }
        }
        //if (this.adorner != null)
        //    this.adorner.Remove();

        e.Handled = true;
        return;
    }

    void AssociatedObject_DragLeave(object sender, DragEventArgs e)
    {
        //if (this.adorner != null)
        //    this.adorner.Remove();
        e.Handled = true;
    }

    void AssociatedObject_DragOver(object sender, DragEventArgs e)
    {
        if (dataType != null)
        {
            if (CanDrop(e))
            {
                //draw the dots
                //if (this.adorner != null)
                //    this.adorner.Update();
            }
        }
        e.Handled = true;
    }

    void AssociatedObject_DragEnter(object sender, DragEventArgs e)
    {
        Debug.WriteLine($"{this.AssociatedObject.DataContext.GetType()}");
        //if the DataContext implements IDropable, record the data type that can be dropped
        if (dataType == null)
        {
            if (this.AssociatedObject.DataContext != null)
            {
                IDropable dropObject = this.AssociatedObject.DataContext as IDropable;
                if (dropObject != null)
                {
                    dataType = dropObject.DataType;
                }
            }
        }

        //this.adorner = new FrameworkElementAdorner(sender as UIElement);
        e.Handled = true;
    }

    private bool CanDrop(DragEventArgs e)
    {
        IDropable dropObject = this.AssociatedObject.DataContext as IDropable;
        if (dropObject.CanDrop(e.Data))
        {
            e.Effects = DragDropEffects.All;
            return true;
        }
        else
        {
            e.Effects = DragDropEffects.None;  //default to None
            return false;
        }
    }
    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.DragEnter -= new DragEventHandler(AssociatedObject_DragEnter);
        this.AssociatedObject.DragOver -= new DragEventHandler(AssociatedObject_DragOver);
        this.AssociatedObject.DragLeave -= new DragEventHandler(AssociatedObject_DragLeave);
        this.AssociatedObject.Drop -= new DragEventHandler(AssociatedObject_Drop);
    }
}

Drop到Treeview的Behavior

这里的话，我是根据插入的鼠标位置上下的元素的Y轴，找的上下两个TreeViewItem，然后在这两个中间插入一个新的TreeViewItem。具体的增加操作放在接口的DropIn方法内部实现。

public class TreeViewDropBehavior : Behavior<ItemsControl>
{
    private Type dataType; //the type of the data that can be dropped into this control
    private TreeViewAdornerManager insertAdornerManager;

    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.AllowDrop = true;
        this.AssociatedObject.DragEnter += new DragEventHandler(AssociatedObject_DragEnter);
        this.AssociatedObject.DragOver += new DragEventHandler(AssociatedObject_DragOver);
        this.AssociatedObject.DragLeave += new DragEventHandler(AssociatedObject_DragLeave);
        this.AssociatedObject.Drop += new DragEventHandler(AssociatedObject_Drop);
    }

    void AssociatedObject_Drop(object sender, DragEventArgs e)
    {
        //if the data type can be dropped 
        if (this.dataType != null)
        {
            if (e.Data.GetDataPresent(dataType))
            {
                //first find the UIElement that it was dropped over, then we determine if it's 
                //dropped above or under the UIElement, then insert at the correct index.
                ItemsControl dropContainer = sender as ItemsControl;
                //get the UIElement that was dropped over
                var point = e.GetPosition(dropContainer);
                // 根据鼠标位置找到上一个item跟下一个item
                TreeViewItem droppedOverItem1 = GetElementFromPoint<TreeViewItem>(dropContainer, new Point(point.X, point.Y - 10));
                TreeViewItem droppedOverItem2 = GetElementFromPoint<TreeViewItem>(dropContainer, new Point(point.X, point.Y + 10));

                //drop the data
                IDropable target = this.AssociatedObject.DataContext as IDropable;
                target.DropIn(e.Data.GetData(dataType), droppedOverItem1?.DataContext as IDropable, droppedOverItem2?.DataContext as IDropable);
            }
        }
        if (this.insertAdornerManager != null)
            this.insertAdornerManager.Clear();
        e.Handled = true;
        return;
    }

    void AssociatedObject_DragLeave(object sender, DragEventArgs e)
    {
        if (this.insertAdornerManager != null)
            this.insertAdornerManager.Clear();
        e.Handled = true;
    }

    void AssociatedObject_DragOver(object sender, DragEventArgs e)
    {
        if (this.dataType != null)
        {
            if (e.Data.GetDataPresent(dataType))
            {
                this.SetDragDropEffects(e);
                if (this.insertAdornerManager != null)
                {
                    ItemsControl dropContainer = sender as ItemsControl;
                    var point = e.GetPosition(dropContainer);
                    // 根据鼠标位置找到上一个item跟下一个item
                    TreeViewItem droppedOverItem1 = GetElementFromPoint<TreeViewItem>(dropContainer, new Point(point.X, point.Y - 10));
                    TreeViewItem droppedOverItem2 = GetElementFromPoint<TreeViewItem>(dropContainer, new Point(point.X, point.Y + 10));

                    if (droppedOverItem2 != null)
                        this.insertAdornerManager.Update(droppedOverItem2, true);
                    else if(droppedOverItem2 == null && droppedOverItem1 != null)
                        this.insertAdornerManager.Update(droppedOverItem1, false);
                    else if (droppedOverItem2 == null && droppedOverItem1 == null)
                        this.insertAdornerManager.Update(dropContainer, false);
                }
            }
            e.Handled = true;
        }
    }

    void AssociatedObject_DragEnter(object sender, DragEventArgs e)
    {
        if (this.dataType == null)
        {
            //if the DataContext implements IDropable, record the data type that can be dropped
            if (this.AssociatedObject.DataContext != null)
            {
                if (this.AssociatedObject.DataContext as IDropable != null)
                {
                    this.dataType = ((IDropable)this.AssociatedObject.DataContext).DataType;
                }
            }
        }
        //initialize adorner manager with the adorner layer of the itemsControl
        if (this.insertAdornerManager == null)
            this.insertAdornerManager = new TreeViewAdornerManager(AdornerLayer.GetAdornerLayer(sender as ItemsControl));

        e.Handled = true;
    }

    /// <summary>
    /// Provides feedback on if the data can be dropped
    /// </summary>
    /// <param name="e"></param>
    void SetDragDropEffects(DragEventArgs e)
    {
        e.Effects = DragDropEffects.None;  //default to None

        //if the data type can be dropped 
        if (e.Data.GetDataPresent(dataType))
        {
            e.Effects = DragDropEffects.Move;
        }
    }
    T GetElementFromPoint<T>(ItemsControl itemsControl, Point point) where T : class
    {
        UIElement element = itemsControl.InputHitTest(point) as UIElement;
        while (element != null)
        {
            if (element == itemsControl)
                return default(T);
            //object item = itemsControl.ItemContainerGenerator.ItemFromContainer(element);
            //if (!item.Equals(DependencyProperty.UnsetValue))
            //    return item as T;
            if (element is T)
            {
                return element as T;
            }
            element = (UIElement)VisualTreeHelper.GetParent(element);
        }
        return default(T);
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.DragEnter -= new DragEventHandler(AssociatedObject_DragEnter);
        this.AssociatedObject.DragOver -= new DragEventHandler(AssociatedObject_DragOver);
        this.AssociatedObject.DragLeave -= new DragEventHandler(AssociatedObject_DragLeave);
        this.AssociatedObject.Drop -= new DragEventHandler(AssociatedObject_Drop);
    }
}

接口实现

上面都是前端的东西，具体的接口实现就是业务逻辑了。这边先举个例子，比如我有一个歌曲Song可以被拖到专辑Album中,专辑Album可以被拖到Album的列表中。

IDragable接口实现

这个比较简单，需要拖动的东西的DataContext继承IDragable就行了。

public class Song:IDragable
{
    #region IDragable
    public Type DataType => typeof(Song);
    public object Data => this;
    #endregion
}

public class Album:IDragable
{
    #region IDragable
    public Type DataType => typeof(Album);
    public object Data => this;
    #endregion
}
IDropable接口实现

注意，因为我有往Treeview拖动的行为TreeViewDropBehavior，因此，Treeview的DataContext也需要继承IDropable接口。而正常的拖动行为FrameworkElementDropBehavior，在Treeview中是往TreeviewItem上放，因此TreeviewItem的DataContext也需要继承IDropable接口。

Treeview的DataContext
public class AlbumViewModel : IDropable
{
	public List<Album> AlbumList = new List<Album>();
	
    public Type DataType
    {
        get { return typeof(Album); }
    }
    public void Drop(object data)
    {
        // TODO
        if (data is Album)
        {
            var album = (Album)data;
            AlbumList.Add(album);
        }
    }
    public void DropIn(object data, object above, object below)
    {
        //如果上下都没，添加到最下面
        if (above == null && below == null)
            Drop(data);
        // 如果上面有，下面没有
        // 这个其实跟↑很像，但是稍微有点区别，就把新来的放到上面同级
        if (above != null && below == null) 
        {
            // 先暂时跟↑一样
            Drop(data);
        }
        // 如果上面没有，下面有，这个就不允许他插入了
        //if (above == null && below != null)
        //{
        //    return;
        //}

        // 如果上下都有，就要判断上下的类型了
        if (above != null && below != null)
        {
            if (above is Album && below is Song)
            {
                // 插入到主程序下面的第一个
                (above as Album).DropIn(data, above, below);
            }
            if (above is Song && below is Song)
            {
                (above as Song).DropIn(data, above, below);
            }
        }
    }
    public bool CanDrop(object data)
    {
        if (data is Album)
            return true;
        return false;
    }
}
TreeviewItem的DataContext
public class Album : IDropable
{
	public List<Song> SongList = new List<Song>();
	public Type DataType
    {
        get { return typeof(Song); }
    }
    public void Drop(object data)
    {
        if(data is Song)
        {
            var song = (Song)data;
            SongList.Add(song);
        }
    }
    public void DropIn(object data, object above, object below)
    {
        // 插入到列表下面的第一个
        if (data is ActionBase)
        {
            var song = (Song)data;
            SongList.Insert(0, song);
        }
    }
    public bool CanDrop(object data)
    {
        return true;
    }
}
迷惘小书童
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF一个完整的TreeView使用实例：（二）拖拽改变父子节点层级
dnazhd的博客
05-06 2528
本节主要在上节的基础上实现拖拽改变父子节点层级的功能，效果如下： 1、添加全局变量 private Point lastMouseDownPoint;//上一次鼠标左键点击位置 private TreeViewNode targetNode;//目标节点 2、在TreeView控件中加入MouseLeftButtonDown事件 /// <summary&gt...
WPF中的TreeView选中指定节点
s411430960的博客
11-20 6005
WPF中的TreeView选中指定节点 TreeView节点一般包装了一个自定义的对象，这个对象包含ID、DisplayName等各类属性。我的一个项目里有TreeView加载后默认选中根节点，或者运行中后台指定选中某个节点，比如对节点进行上移下移操作后，选中被操作的节点以优化视觉效果。 public void SelectNodeById(int i)//根据ID选中节点 { //tv是TreeView对象的名称 TreeViewItem tvi = tv.ItemContainerGener
WPF跨TreeView拖拽节点
qq_41968515的博客
07-27 2040
老规矩，先说一下我的思路。。。鉴于个人语文水平，这次就用图来说明了 大概的思路就是这个样子，下面就是具体的实现方法（关于数状图的数据绑定可以参考我之前的动态绑定菜单，原理是一样的）： XAML: <TreeView Name="allFunctions" HorizontalAlignment="Left" Height="250" Margin="501,75,0,0" Ve...
WPF TreeView拖动排序拖拽排列
baoolong的博客
12-14 3371
最近工作中要用Treeview进行拖动排序，但是呢，网上几乎没有相关的Demo示例等，只能自己手撸，在这过程中，也学到了一些知识，我在此记录下，防止下次用到，或者需要的小伙伴用到。 本文代码实现简单，扩展性强，Demo示例总共也就267行，代码还包含了数据初始化，View控件初始化等非逻辑代码，代码简单以维护。
【WPF】 实现Treeview 的拖拽
只会C#的程序猿
02-19 1760
实现方式有两种。 方式一：通过重载事件来进行的 参考项目源码：http://files.cnblogs.com/ruicky/Wpf-TreeView-%E5%85%A8%E8%83%BD%E5%AE%9E%E7%8E%B0%E6%8B%96%E6%8B%BD.zip 优点：调用到自己的项目中方式简单。随意拖动 缺点：难以添加限制对于一些节点不能拖动的设置性...
WPF控件之TreeView扩展应用（四）
weixin_45650894的博客
08-07 1475
Treeview系列终结篇
WPF Treeview拖拽
12-28
在Windows Presentation Foundation (WPF) 中，`TreeView`控件是一种常见的用于展示层次结构数据的UI元素。在许多应用场景中，我们可能需要实现`TreeView`的拖放(Drag & Drop)功能，使得用户可以自由地调整节点的...
扩展WPF的TreeView，完成数据绑定和拖拽功能
04-11
扩展WPF的TreeView，完成数据绑定和拖拽功能。 WPF看了很长时间了，但一直没怎么动手实践，正好任务需要，扩展了WPF的标准TreeView控件，并作为基础控件，支持下面的功能： 数据绑定 拖拽
Wpf Treeview拖拽至Textbox中显示
08-06
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现一个功能，即从TreeView控件中拖拽选中的项并将其显示在TextBox中。这个功能在用户界面设计中非常有用，能够提高交互性和用户体验...
WPF TreeView拖拽节点变换位置
11-14
下面是一个简化的C#代码示例，展示了如何在`TreeView`中实现拖放功能： ```csharp private void TreeViewItem_MouseDown(object sender, MouseButtonEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed...
WPF自定义最大化最小化关闭按钮
热门推荐
小书童的博客
10-26 1万+
WPF自定义最大化最小化关闭按钮 当觉得界面自带的最大化最小化关闭按钮不好看，或者想换个位置的时候，你需要自定义最大化最小化关闭按钮 最大化按钮 最大化按钮有两种状态：最大化，跟还原状态两种显示方式。做法：定义command为SystemCommands.XXXCommand。本次使用了DataTemplateSelector，根据当前window的WindowState状态来判断当前窗体状态（如...
WPF多个按钮点击切换样式
小书童的博客
10-25 7632
WPF多个按钮点击切换样式 本文主要讲述WPF中多个按钮，点击状态为一个样式，未点击状态为一个样式，两种样式通过点击这个动作会发生改变，点击另一个按钮，当前已点击的按钮样式也改变的情况。 不复杂样式的多个按钮 主要做法就是将按钮使用radiobutton来代替，然后各个radiobutton的GroupName取名为同一个，如本例中就是取名为“button1”。 &amp;lt;RadioButton ...
海康相机丢包问题
小书童的博客
03-30 6044
如果是网口相机，发现丢包问题肯定要先看防火墙是不是关了，以及网络设置是否设置正确，这两个解决方法可以通过查看相机厂商提供的网络问题排查手册解决，如果海康相机在上面的排查手段都做了之后还存在丢包现象，提供一个我个人的解决方法，仅供参考。然后这个解决方法是c#语言的，当然了，对于其他语言也是存在一定意义的。
c#调用C++的dll报错“外部组件发生异常”
小书童的博客
03-07 5052
发生原因 C++那里 void setfile(char** filename) dll函数中有个参数接收char**，内容是文件名的集合，于是我就用了string[] 然而传的路径是中文时就会报“外部组件发生异常”错误 解决方法 原先 [DllImport(@"DripDetection", CallingConvention = CallingConvention.Cdecl)] public unsafe static extern void setfile(string[] filepath);
Your project is not referencing the ".NETFramework,Version=4.5" framework.
小书童的博客
05-14 3826
我遇到了 Your project is not referencing the “.NETFramework,Version=4.5” framework. Add a reference to “.NETFramework,Version=4.5” in the “frameworks” section of your project.json, and then re-run NuGet r...
byte[]、string、char[]互相转换
小书童的博客
04-20 3093
string转byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes ( str ); byte[]转string： string str = System.Text.Encoding.Default.GetString ( byteArray ); string转char[]： char[] ch= str....
WPF同时拥有点击事件与Command
小书童的博客
11-06 2978
StackPanel同时有点击事件与Command：MouseBinding用了LeftClick之后只能用PreviewMouseLeftButtonDown，不加preview都会有一个不运行 &lt;StackPanel Orientation="Horizontal" PreviewMouseLeftButtonDown="Button_Click" Cursor="Hand"&gt; ...
wpf里面treeview怎么实现浏览文件夹
最新发布
07-10
在WPF中，可以使用TreeView控件来实现浏览文件夹的功能。下面是一种简单的方法来实现这个功能： 1. 首先，在XAML中创建一个TreeView控件，用于显示文件夹和文件的层次结构。例如： ```xaml <TreeView Name="folderTreeView" /> ``` 2. 在代码中，可以使用以下步骤来动态加载文件夹的层次结构： （1）获取根文件夹的路径。 （2）创建一个TreeViewItem节点，并设置其Header文本为根文件夹的名称。 （3）获取根文件夹下的所有子文件夹和文件的路径。 （4）递归地为每个子文件夹创建TreeViewItem节点，并将其添加到父节点的Items集合中。 （5）在每个文件夹节点下添加叶子节点，用于显示文件。 下面是一个简化的例子： ```csharp private void AddFolderToTreeView(string folderPath, TreeViewItem parentNode) { // 获取文件夹的名称 string folderName = Path.GetFileName(folderPath); // 创建一个TreeViewItem节点并设置Header属性 TreeViewItem folderNode = new TreeViewItem(); folderNode.Header = folderName; // 添加节点到父节点的Items集合中 parentNode.Items.Add(folderNode); try { // 获取文件夹下的所有子文件夹和文件 string[] subDirectories = Directory.GetDirectories(folderPath); string[] files = Directory.GetFiles(folderPath); // 递归添加子文件夹节点 foreach (string subDirectory in subDirectories) { AddFolderToTreeView(subDirectory, folderNode); } // 添加文件节点 foreach (string file in files) { TreeViewItem fileNode = new TreeViewItem(); fileNode.Header = Path.GetFileName(file); folderNode.Items.Add(fileNode); } } catch (UnauthorizedAccessException) { // 处理无权限访问的异常情况 } } ``` 3. 最后，在适当的地方调用这个函数，将根文件夹的路径和TreeView的根节点传递给它。例如： ```csharp string rootFolderPath = @"C:\"; AddFolderToTreeView(rootFolderPath, folderTreeView.Items); ``` 这样，TreeView就会显示根文件夹及其子文件夹和文件的层次结构，用户可以通过展开节点来浏览文件夹。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值