ToB企服应用市场:ToB评测及商务社交产业平台

标题: [WPF]原生TabControl控件实现拖拽排序功能 [打印本页]
作者: 梦见你的名字    时间: 2023-11-19 21:38
标题: [WPF]原生TabControl控件实现拖拽排序功能
在UI交互中，拖拽操作是一种非常简单友好的交互。尤其是在ListBox，TabControl，ListView这类列表控件中更为常见。通常要实现拖拽排序功能的做法是自定义控件。本文将分享一种在原生控件上设置附加属性的方式实现拖拽排序功能。
该方法的使用非常简单，仅需增加一个附加属性就行。
  1. [/code]实现效果如下：
  2. [img]https://img2023.cnblogs.com/blog/3056716/202310/3056716-20231024112156944-2100979378.gif[/img]
  3. [size=4]主要思路[/size]
  5. WPF中核心基类UIElement包含了DragEnter，DragLeave，DragEnter，Drop等拖拽相关的事件，因此只需对这几个事件进行监听并做相应的处理就可以实现WPF中的UI元素拖拽操作。
  6. 另外，WPF的一大特点是支持数据驱动，即由数据模型来推动UI的呈现。因此，可以通过通过拖拽事件处理拖拽的源位置以及目标位置，并获取到对应位置渲染的数据，然后操作数据集中数据的位置，从而实现数据和UI界面上的顺序更新。
  7. 首先定义一个附加属性类SelectorDragDropAttach,通过附加属性IsItemsDragDropEnabled控制是否允许拖拽排序。
  8. [code]public static class SelectorDragDropAttach
  9. {
  10.     public static bool GetIsItemsDragDropEnabled(Selector scrollViewer)
  11.     {
  12.         return (bool)scrollViewer.GetValue(IsItemsDragDropEnabledProperty);
  13.     }
  15.     public static void SetIsItemsDragDropEnabled(Selector scrollViewer, bool value)
  16.     {
  17.         scrollViewer.SetValue(IsItemsDragDropEnabledProperty, value);
  18.     }
  20.     public static readonly DependencyProperty IsItemsDragDropEnabledProperty =
  21.         DependencyProperty.RegisterAttached("IsItemsDragDropEnabled", typeof(bool), typeof(SelectorDragDropAttach), new PropertyMetadata(false, OnIsItemsDragDropEnabledChanged));
  23.     private static readonly DependencyProperty SelectorDragDropProperty =
  24.         DependencyProperty.RegisterAttached("SelectorDragDrop", typeof(SelectorDragDrop), typeof(SelectorDragDropAttach), new PropertyMetadata(null));
  26.     private static void OnIsItemsDragDropEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  27.     {
  28.         bool b = (bool)e.NewValue;
  29.         Selector selector = d as Selector;
  30.         var selectorDragDrop = selector?.GetValue(SelectorDragDropProperty) as SelectorDragDrop;
  31.         if (selectorDragDrop != null)
  32.             selectorDragDrop.Selector = null;
  33.         if (b == false)
  34.         {
  35.             selector?.SetValue(SelectorDragDropProperty, null);
  36.             return;
  37.         }
  38.         selector?.SetValue(SelectorDragDropProperty, new SelectorDragDrop(selector));
  40.     }
  42. }
复制代码
其中SelectorDragDrop就是处理拖拽排序的对象，接下来看下几个主要事件的处理逻辑。
通过PreviewMouseLeftButtonDown确定选中的需要拖拽操作的元素的索引
  1. void selector_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  2. {
  3.     if (this.IsMouseOverScrollbar)
  4.     {
  5.         //Set the flag to false when cursor is over scrollbar.
  6.         this.canInitiateDrag = false;
  7.         return;
  8.     }
  10.     int index = this.IndexUnderDragCursor;
  11.     this.canInitiateDrag = index > -1;
  13.     if (this.canInitiateDrag)
  14.     {
  15.         // Remember the location and index of the SelectorItem the user clicked on for later.
  16.         this.ptMouseDown = GetMousePosition(this.selector);
  17.         this.indexToSelect = index;
  18.     }
  19.     else
  20.     {
  21.         this.ptMouseDown = new Point(-10000, -10000);
  22.         this.indexToSelect = -1;
  23.     }
  24. }
复制代码
在PreviewMouseMove事件中根据需要拖拽操作的元素创建一个AdornerLayer，实现鼠标拖着元素移动的效果。其实拖拽移动的只是这个AdornerLayer，真实的元素并未移动。
  1. void selector_PreviewMouseMove(object sender, MouseEventArgs e)
  2. {
  3.     if (!this.CanStartDragOperation)
  4.         return;
  6.     // Select the item the user clicked on.
  7.     if (this.selector.SelectedIndex != this.indexToSelect)
  8.         this.selector.SelectedIndex = this.indexToSelect;
  10.     // If the item at the selected index is null, there's nothing
  11.     // we can do, so just return;
  12.     if (this.selector.SelectedItem == null)
  13.         return;
  15.     UIElement itemToDrag = this.GetSelectorItem(this.selector.SelectedIndex);
  16.     if (itemToDrag == null)
  17.         return;
  19.     AdornerLayer adornerLayer = this.ShowDragAdornerResolved ? this.InitializeAdornerLayer(itemToDrag) : null;
  21.     this.InitializeDragOperation(itemToDrag);
  22.     this.PerformDragOperation();
  23.     this.FinishDragOperation(itemToDrag, adornerLayer);
  24. }
复制代码
DragEnter，DragLeave，DragEnter事件中处理AdornerLayer的位置以及是否显示。
Drop事件中确定了拖拽操作目标位置以及渲染的数据元素，然后移动元数据，通过数据顺序的变化更新界面的排序。从代码中可以看到列表控件的ItemsSource不能为空，否则拖拽无效。这也是后边将提到的一个缺点。
  1. void selector_Drop(object sender, DragEventArgs e)
  2. {
  3.     if (this.ItemUnderDragCursor != null)
  4.         this.ItemUnderDragCursor = null;
  6.     e.Effects = DragDropEffects.None;
  8.     var itemsSource = this.selector.ItemsSource;
  9.     if (itemsSource == null) return;
  11.     int itemsCount = 0;
  12.     Type type = null;
  13.     foreach (object obj in itemsSource)
  14.     {
  15.         type = obj.GetType();
  16.         itemsCount++;
  17.     }
  19.     if (itemsCount < 1) return;
  20.     if (!e.Data.GetDataPresent(type))
  21.         return;
  23.     object data = e.Data.GetData(type);
  24.     if (data == null)
  25.         return;
  27.     int oldIndex = -1;
  28.     int index = 0;
  29.     foreach (object obj in itemsSource)
  30.     {
  31.         if (obj == data)
  32.         {
  33.             oldIndex = index;
  34.             break;
  35.         }
  36.         index++;
  37.     }
  38.     int newIndex = this.IndexUnderDragCursor;
  40.     if (newIndex < 0)
  41.     {
  42.         if (itemsCount == 0)
  43.             newIndex = 0;
  44.         else if (oldIndex < 0)
  45.             newIndex = itemsCount;
  46.         else
  47.             return;
  48.     }
  49.     if (oldIndex == newIndex)
  50.         return;
  52.     if (this.ProcessDrop != null)
  53.     {
  54.         // Let the client code process the drop.
  55.         ProcessDropEventArgs args = new ProcessDropEventArgs(itemsSource, data, oldIndex, newIndex, e.AllowedEffects);
  56.         this.ProcessDrop(this, args);
  57.         e.Effects = args.Effects;
  58.     }
  59.     else
  60.     {
  61.         dynamic dItemsSource = itemsSource;
  62.         if (oldIndex > -1)
  63.             dItemsSource.Move(oldIndex, newIndex);
  64.         else
  65.             dItemsSource.Insert(newIndex, data);
  66.         e.Effects = DragDropEffects.Move;
  67.     }
  68. }
复制代码
优点与缺点

优点：
缺点：
小结

本文介绍列表拖拽操作的解决方案不算完美，功能简单但轻量，并且很好的体现了WPF的数据驱动的思想。个人非常喜欢这种方式，它能让我们轻松的实现列表数据的增删以及排序操作，而不是耗费时间和精力去自定义可增删数据的控件。
参考

https://www.codeproject.com/Articles/17266/Drag-and-Drop-Items-in-a-WPF-ListView#xx1911611xx
代码示例

SelectorDragDropSamples

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4