WPF 实现可拖拽调整顺序的ListView自定义控件

已于 2024-06-17 20:49:18 修改
阅读量1.1k 收藏 16
点赞数 28
分类专栏： WPF WPF自定义控件 文章标签： wpf windows microsoft .net c#
于 2024-06-14 11:26:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42399932/article/details/139676322
版权

前言

想实现一个可拖拽调整ListView中各项顺序的自定义控件，方便后面的功能的实现。

网上没有找到完整的自定义控件的实现思路，但是发现了GongSolutions.WPF.DragDrop，这个项目。发现这个项目基本实现了拖拽需要的功能，使用简单并且非常强大，但是我并不像只因为一点拖拽功能就装一个包。

于是尝试自己简单实现，满足我的基本需求即可的——可以拖拽ListView中每一项ListViewItem，以调整其内部顺序。

思路梳理

简单梳理以下思路，会发现，其主要实现以下几点：

  1. 拖拽开始时，获取被拖拽的ListViewItem
  2. 拖拽过程中，拖拽的样式实现
    1. 经过的ListViewItem显示样式，做出一点改动——就仿佛控件在提示用户，你现在拖拽到我这里了，你放手的话被拖拽的对象会插在我这里。
    2. 被拖拽的对象最好能跟随鼠标移动——让用户明确自己拖拽的哪个ListViewItem
  3. 拖拽完成后，将被拖拽的ListViewItem，顺序调整到鼠标所在ListViewItem所在的位置

难点

其中对于我这个WPF小白来讲的难点在于

  1. 如何获取经过的ListViewItem，即鼠标悬浮下对应的ListViewItem

    使用VisualTreeHelper。VisualTreeHelper提供了在可视树中执行常见的节点操作，比如

var hitTestResult = VisualTreeHelper.HitTest(this, position);
var targetItem = FindAncestor<ListViewItem>((DependencyObject)hitTestResult.VisualHit);
// 此处省略 FindAncestor
获取命中的节点对象，再通过查找父节点直到找到对应的ListViewItem,即可找到对应的ListViewItem。

  1. 如何让被拖拽的ListViewItem随着鼠标移动

    基本思路：使用Popup控件，将ListViewItem设置为其Child，并让它跟随鼠标移动

  2. 如何调整ListView的顺序，即如何调整ItemsSource的顺序

    这里参考了GongSolutions.WPF.DragDrop项目中的方法，通过反射使用ObservableCollection中提供的Move方法，所以这里就限制了ItemSource必须为ObservableCollection类型才支持。

开始实践吧！

经过梳理，我们需要实现两个两个控件

  1. DragListView继承自ListView，扩展其拖拽功能
  2. DragDropPreview继承自Popup，扩展其跟随鼠标移动功能

那么开始实践吧！

DragListView

1. 鼠标点击时，记录开始拖拽的索引、被拖拽的ListViewItem

private void OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    ResetDragDrop();

    var position = e.GetPosition(this);
    var hitTestResult = VisualTreeHelper.HitTest(this, position);
    if (hitTestResult == null) return;
    
    _draggedItem = FindAncestor<ListViewItem>((DependencyObject)hitTestResult.VisualHit);
    if (_draggedItem == null)
    {
        ResetDragDrop();
        return;
    }

    _oldPosition = GetInsertIndex(position);
}

private int GetInsertIndex(Point position)
{
    var hitTestResult = VisualTreeHelper.HitTest(this, position);
    if (hitTestResult == null) return -1;

    var targetItem = FindAncestor<ListViewItem>((DependencyObject)hitTestResult.VisualHit);
    if (targetItem == null) return -1;

    return Items.IndexOf(targetItem.DataContext);
}

private static T FindAncestor<T>(DependencyObject current) where T : DependencyObject
{
    do
    {
        if (current is T)
        {
            return (T)current;
        }
        current = VisualTreeHelper.GetParent(current);
    }
    while (current != null);
    return null;
}

2. 鼠标开始移动时，触发拖拽事件，创建DragDropPreview

 private void OnPreviewDragMove(object sender, MouseEventArgs e)
 {
     if (e.LeftButton == MouseButtonState.Pressed
         && _draggedItem != null && _draggedItemPreview == null)
     {
         CreatePopupWithControl(_draggedItem, _draggedItem.DataContext);
         DragDrop.DoDragDrop(_draggedItem, _draggedItem.DataContext, DragDropEffects.Move);
     }
 }
 
private void CreatePopupWithControl(UIElement control, object data)
{
    var newListItem = new ListViewItem();
    newListItem.Content = data;
    newListItem.Style = this.ItemContainerStyle;
    newListItem.ContentTemplate = this.ItemTemplate;
    
    _draggedItemPreview = new DragDropPreview();
    _draggedItemPreview.PlacementTarget = this;
    _draggedItemPreview.Child = newListItem;
}

3. 拖拽时，让DragDropPreview跟随鼠标位置移动

 private void OnDragOver(object sender, DragEventArgs e)
 {
     if (_draggedItemPreview != null && !_draggedItemPreview.IsOpen)
         _draggedItemPreview.IsOpen = true;

     _draggedItemPreview.Move(e.GetPosition(this));
     
     DoDragDropPreviewStyle(e);

 }

4. 拖拽完成后，调整ItemsSource顺序，关闭popup

 private void OnDrop(object sender, DragEventArgs e)
 {
     if (_draggedItem == null) { ResetDragDrop(); return; }
     Move(ItemsSource, _oldPosition, GetInsertIndex(e.GetPosition(this)));

     _draggedItem = null;
     ClosePopup();
 }

DragDropPreview

这里比较简单，我直接参考了`GongSolutions.WPF.DragDrop`项目中的类，做了简化。只提供一个Move方法，支持移动位置即可。

 internal class DragDropPreview : Popup
 {
     public DragDropPreview()
     {
         this.AllowsTransparency = true;
         this.AllowDrop = false;
         this.IsHitTestVisible = false;
         this.Focusable = false;
         this.Placement = PlacementMode.Relative;
         this.StaysOpen = true;
         this.HorizontalAlignment = HorizontalAlignment.Left;
         this.VerticalAlignment = VerticalAlignment.Top;
     }
     public Point Translation { get; }

     public Point AnchorPoint { get; }

     public void Move(Point point)
     {
         var translation = this.Translation;
         var translationX = point.X + translation.X;
         var translationY = point.Y + translation.Y;

         if (this.Child is not null)
         {
             var renderSize = this.Child.RenderSize;

             var renderSizeWidth = renderSize.Width;
             var renderSizeHeight = renderSize.Height;


             if (renderSizeWidth > 0 && renderSizeHeight > 0)
             {
                 var offsetX = renderSizeWidth * -this.AnchorPoint.X;
                 var offsetY = renderSizeHeight * -this.AnchorPoint.Y;

                 translationX += offsetX;
                 translationY += offsetY;
             }
         }

         this.SetCurrentValue(HorizontalOffsetProperty, translationX);
         this.SetCurrentValue(VerticalOffsetProperty, translationY);
     }

 }

扩展

1. 鼠标经过时要ListViewItem时，要增加样式设置

private ListViewItem _previousDashedItem; 
private void DoDragDropPreviewStyle(DragEventArgs e)
{
    // 获取当前鼠标下的ListViewItem
    var position = e.GetPosition(this);
    var hitTestResult = VisualTreeHelper.HitTest(this, position);
    if (hitTestResult == null) return;

    var targetItem = FindAncestor<ListViewItem>((DependencyObject)hitTestResult.VisualHit);

    // 如果鼠标不在任何ListViewItem上或者移动到了新的ListViewItem
    if (targetItem == null || targetItem != _previousDashedItem)
    {
        // 重置上一个ListViewItem的样式
        ResetDragDropPreviewStyle(_previousDashedItem);
        _previousDashedItem = null;
    }

    if (targetItem != null && targetItem != _previousDashedItem)
    {
        // 为新的目标ListViewItem添加样式
        ApplyDragDropPreviewStyle(targetItem, e);
        _previousDashedItem = targetItem;
    }
}
private void ApplyDragDropPreviewStyle(ListViewItem item, DragEventArgs e)
{
    if (item == null) return;
     item.Style = DragDropPreviewStyle;
}

private void ResetDragDropPreviewStyle(ListViewItem item)
{
    if (item == null) return;
    item.Style = null;
}

2. 鼠标上下移动所经过的ListViewItem的样式应当有所不同，比如向上移动时，所经过的ListViewItem应当展示上边框，提示用户，此时防止会插入到改ListViewItem上方，同理，向下移动应当展示下边框。

    实现思路：

    1. 根据鼠标位置移动，判断移动方向

public class MouseTracker
{
    private Point _previousPosition;
    private DateTime _previousTimestamp;

    public MouseTracker(Point point)
    {
        _previousPosition = point;
        _previousTimestamp = DateTime.Now;
    }

    public Orientation GetMouseOrientation(Point currentPosition)
    {
        var deltaX = currentPosition.X - _previousPosition.X;
        var deltaY = currentPosition.Y - _previousPosition.Y;
        var deltaTime = (DateTime.Now - _previousTimestamp).TotalMilliseconds;

        var speedX = deltaX / deltaTime;
        var speedY = deltaY / deltaTime;

        if (RightDragDropPreviewStyleProperty != null && RightDragDropPreviewStyleProperty != null
            && Math.Abs(speedX) > Math.Abs(speedY))
        {
            return speedX > 0 ? Orientation.Right : Orientation.Left;
        }
        else if (UpDragDropPreviewStyleProperty != null && UpDragDropPreviewStyleProperty != null)
        {
            return speedY > 0 ? Orientation.Down : Orientation.Up;
        }
        return Orientation.None;
    }
}

    public enum Orientation
    {
        None,
        Up,
        Down,
        Left,
        Right
    }

    所以只需要在OnPreviewDragMove时，初始化一下`MouseTracker`，在DragOver时就可以获取到鼠标移动方向

 private void OnPreviewDragMove(object sender, MouseEventArgs e)
 {
     if (e.LeftButton == MouseButtonState.Pressed
         && _draggedItem != null && _draggedItemPreview == null)
     {
         _mouseTracker = new MouseTracker(e.GetPosition(this));
         CreatePopupWithControl(_draggedItem, _draggedItem.DataContext);
         DragDrop.DoDragDrop(_draggedItem, _draggedItem.DataContext, DragDropEffects.Move);
     }
 }
 
var orientation = _mouseTracker.GetMouseOrientation(e.GetPosition(this));

    2. 提供上下左右四个Style属性，用户根据需要自定义。


        #region Properties
        public Style UpDragDropPreviewStyle
        {
            get { return (Style)GetValue(UpDragDropPreviewStyleProperty); }
            set { SetValue(UpDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty UpDragDropPreviewStyleProperty =
            DependencyProperty.Register("UpDragDropPreviewStyle", typeof(Style), typeof(DragListView), new PropertyMetadata());
        public Style DownDragDropPreviewStyle
        {
            get { return (Style)GetValue(DownDragDropPreviewStyleProperty); }
            set { SetValue(DownDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty DownDragDropPreviewStyleProperty =
            DependencyProperty.Register("DownDragDropPreviewStyle", typeof(Style), typeof(DragListView), new PropertyMetadata());
        public Style RightDragDropPreviewStyle
        {
            get { return (Style)GetValue(RightDragDropPreviewStyleProperty); }
            set { SetValue(RightDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty RightDragDropPreviewStyleProperty =
            DependencyProperty.Register("RightDragDropPreviewStyle", typeof(Style), typeof(DragListView), new PropertyMetadata());
        public Style LeftDragDropPreviewStyle
        {
            get { return (Style)GetValue(LeftDragDropPreviewStyleProperty); }
            set { SetValue(LeftDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty LeftDragDropPreviewStyleProperty =
            DependencyProperty.Register("LeftDragDropPreviewStyle", typeof(Style), typeof(DragListView), new PropertyMetadata());
        #endregion

    3. 根据移动方向，灵活设置所经过ListViewItem的样式


        private void DoDragDropPreviewStyle(DragEventArgs e)
        {
            // 获取当前鼠标下的ListViewItem
            var position = e.GetPosition(this);
            var hitTestResult = VisualTreeHelper.HitTest(this, position);
            if (hitTestResult == null) return;

            var targetItem = FindAncestor<ListViewItem>((DependencyObject)hitTestResult.VisualHit);

            // 如果鼠标不在任何ListViewItem上或者移动到了新的ListViewItem
            if (targetItem == null || targetItem != _previousDashedItem)
            {
                // 重置上一个ListViewItem的样式
                ResetDragDropPreviewStyle(_previousDashedItem);
                _previousDashedItem = null;
            }

            if (targetItem != null && targetItem != _previousDashedItem)
            {
                // 为新的目标ListViewItem添加样式
                ApplyDragDropPreviewStyle(targetItem, e);
                _previousDashedItem = targetItem;
            }
        }
        private void ApplyDragDropPreviewStyle(ListViewItem item, DragEventArgs e)
        {
            if (item == null) return;
            if (_mouseTracker != null)
            {
                var orientation = _mouseTracker.GetMouseOrientation(e.GetPosition(this));
                if (orientation == Orientation.Down)
                {
                    item.Style = DownDragDropPreviewStyle;
                    return;
                }
                else if (orientation == Orientation.Up)
                {
                    item.Style = UpDragDropPreviewStyle;
                    return;
                }
                else if (orientation == Orientation.Left)
                {
                    item.Style = LeftDragDropPreviewStyle;
                    return;
                }
                else if (orientation == Orientation.Right)
                {
                    item.Style = RightDragDropPreviewStyle;
                    return;
                }
            }
            item.Style = null;
        }

        private void ResetDragDropPreviewStyle(ListViewItem item)
        {
            if (item == null) return;
            item.Style = null;
        }

 使用Demo

<Window
    x:Class="BaseUIDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="http://Nita/BaseUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:BaseUIDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <Style
            x:Key="UpDragDropPreviewStyle"
            TargetType="ListViewItem">
            <Setter Property="BorderThickness" Value="0,2,0,0" />
            <Setter Property="BorderBrush" Value="#31b0cd" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>

        <Style
            x:Key="DownDragDropPreviewStyle"
            TargetType="ListViewItem">
            <Setter Property="BorderThickness" Value="0,0,0,2" />
            <Setter Property="BorderBrush" Value="#31b0cd" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>
    </Window.Resources>
    <Grid>
        <base:DragListView
            AllowDrop="True"
            DownDragDropPreviewStyle="{StaticResource DownDragDropPreviewStyle}"
            ItemsSource="{Binding Items.Items,
                                  RelativeSource={RelativeSource FindAncestor,
                                                                 AncestorType={x:Type local:MainWindow}}}"
            UpDragDropPreviewStyle="{StaticResource UpDragDropPreviewStyle}">
            <base:DragListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock
                            FontSize="13"
                            Text="{Binding Symbol}" />
                        <TextBlock
                            FontSize="13"
                            Text="{Binding Timestamp}" />
                    </StackPanel>
                </DataTemplate>
            </base:DragListView.ItemTemplate>
        </base:DragListView>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace BaseUIDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();


            var dragDropPreviewStyle = new Style(typeof(ListViewItem));
            dragDropPreviewStyle.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(0, 1, 0, 0)));
            dragDropPreviewStyle.Setters.Add(new Setter(Border.BorderBrushProperty, Brushes.Black));
            dragDropPreviewStyle.Setters.Add(new Setter(Border.SnapsToDevicePixelsProperty, true));
            UpDragDropPreviewStyle = dragDropPreviewStyle;


            var downdragDropPreviewStyle = new Style(typeof(ListViewItem));
            downdragDropPreviewStyle.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(0, 0, 0, 1)));
            downdragDropPreviewStyle.Setters.Add(new Setter(Border.BorderBrushProperty, Brushes.Black));
            downdragDropPreviewStyle.Setters.Add(new Setter(Border.SnapsToDevicePixelsProperty, true));
            DownDragDropPreviewStyle = downdragDropPreviewStyle;
        }

        public Style UpDragDropPreviewStyle
        {
            get { return (Style)GetValue(UpDragDropPreviewStyleProperty); }
            set { SetValue(UpDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty UpDragDropPreviewStyleProperty =
            DependencyProperty.Register("UpDragDropPreviewStyle",
                typeof(Style),
                typeof(MainWindow),
                new PropertyMetadata(null));

        public Style DownDragDropPreviewStyle
        {
            get { return (Style)GetValue(DownDragDropPreviewStyleProperty); }
            set { SetValue(DownDragDropPreviewStyleProperty, value); }
        }

        public static readonly DependencyProperty DownDragDropPreviewStyleProperty =
            DependencyProperty.Register("DownDragDropPreviewStyle",
                typeof(Style),
                typeof(MainWindow),
                new PropertyMetadata(null));



        public MainViewModel Items
        {
            get { return (MainViewModel)GetValue(ItemsProperty); }
            set { SetValue(ItemsProperty, value); }
        }

        public static readonly DependencyProperty ItemsProperty =
            DependencyProperty.Register("Items",
                typeof(MainViewModel),
                typeof(MainWindow),
                new PropertyMetadata(new MainViewModel()));



    }
}

效果： 

Nita.
关注
  • 28
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wpf ListBox拖动排序实现
CSDN
12-30 8441
XAML:   &lt;Window x:Class="WpfApplication6.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF listview的拖拽实现
06-09
主要实现了listview的推拽功能并且带有推拽虚影
WPF 实现鼠标拖动来控制 控件排序（ListView 做示例）
最新发布
猪猪的博客
06-19 1126
本文使用到了 gong-wpf-dragdrop扩展包
WPF中LISTITEM的拖拽
我的英文站点：https://iorilan.medium.com/
12-13 2227
WPF实现两个列表中元素的拖拽
listview拖放排序
03-28
实现对listview 下的项目（图片）进行拖扯排序
WPF 通过拖拽改变Item的顺序 ItemsControl
sinat_30224769的博客
04-21 2678
拖拽每个元素 移动位置 和点击前后移动位置 要求低一点就点击前后移动位置就够了 之前发过一篇WPF，strackpanel 拖拽控件 改名，实际上是差不多的，随着对此深入理解可以更加的封装 https://blog.csdn.net/sinat_30224769/article/details/111668459?spm=1001.2014.3001.5501 git链接 https://github.com/442040292/ItemsControlDragSortDemo ...
WPF LISTVIEW 排序
ZetaChow
06-01 2965
网上很多方法，但是内容包含太全面，代码看上去很复杂，其实其中有很多是控制UI的在WPF中ListView的排序最基本的原理很简单就一句话ListViewControl.Items.SortDescriptions.Add(new SortDescription("name",ListSortDirection.Descending));就是这句，主要就是设置ListView的Items的SortDescriptions属性，这个属性是个集合，不同于我们熟悉的SQL或DataView的排序属性设置，SortD
WPF 拖拽的实现（以listview为例）
12-21
本教程将详细解释如何在ListView控件中实现拖放功能。 首先，我们需要了解WPF中的拖放机制。在WPF中，拖放操作涉及到几个关键事件，包括`DragEnter`, `DragOver`, `DragLeave`, `Drop` 和 `GiveFeedback`。这些事件...
WPF_ListView边框_每条颜色_数据绑定_多选择_字段可拖拽
12-06
在本文中，我们将深入探讨基于WPF（Windows Presentation Foundation）技术的ListView控件，特别是针对标题和描述中提及的关键特性，包括边框设置、每条记录的颜色定制、数据绑定、多选择以及字段拖拽功能。...
wpf列表listview自动排序排列
08-19
wpf列表listview自动排序排列，初学专用
ListBox实现拖拽排序功能
10-10
ListBox实现拖拽排序功能,ListBox拖拽实现原理，排序功能
WPF listbox之间拖动 drag&drop
10-22
WPF 实现了两个listbox之间拖动，drag&drop，并且有上下按钮控制listbox里面元素的移动，还有拖动时边框变色，1分，你值得拥有。
WPF中ListView拖拽效果
03-06
WPF中ListView拖拽效果的实现。
C# WPF DataGrid行拖拽顺序交换
12-02
C# WPF DataGrid行拖拽顺序交换，通过按下rowheader，移动到目标行rowheader松开，实现列表顺序交换
自定义ListView实现拖拽ListItem项交换位置(附源码)
09-05
为了增加用户体验，我们可以实现ListView的拖放功能，让用户能直接通过手势调整列表项的顺序。本文将详细介绍如何自定义一个ListView，使其支持拖放ListItem并交换位置，同时提供相关源码。 首先，我们需要创建一个...
WPF TreeView拖动排序拖拽排列
baoolong的博客
12-14 3417
最近工作中要用Treeview进行拖动排序，但是呢，网上几乎没有相关的Demo示例等，只能自己手撸，在这过程中，也学到了一些知识，我在此记录下，防止下次用到，或者需要的小伙伴用到。 本文代码实现简单，扩展性强，Demo示例总共也就267行，代码还包含了数据初始化，View控件初始化等非逻辑代码，代码简单以维护。
自定义控件——可拖拽排序的ListView
热门推荐
Ralap Zhong的专栏
05-12 1万+
前言最经研究了一下拖拽排序的ListView，跟酷狗里的播放列表排序一样，但因为要添加自己特有的功能，所以研究了好长时间。一开始接触的是GitHub的开源项目——DragSortListView，实现的效果和流畅度都很棒。想根据他的代码自己写一个，但代码太多了，实现的好复杂，看别人的代码你懂的了，就去尝试寻找其他办法。最后还是找到了更简单的实现方法，虽然跟开源项目比要差一点，但对我来说可以了，最重要
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值