WPF利用TabControl控件实现拖拽排序功能

 更新时间:2023年10月24日 13:55:15   作者:czwy  
在UI交互中,拖拽操作是一种非常简单友好的交互,这篇文章主要为大家介绍了WPF如何利用TabControl控件实现拖拽排序功能,需要的小伙伴可以参考一下

在UI交互中,拖拽操作是一种非常简单友好的交互。尤其是在ListBox,TabControl,ListView这类列表控件中更为常见。通常要实现拖拽排序功能的做法是自定义控件。本文将分享一种在原生控件上设置附加属性的方式实现拖拽排序功能。

该方法的使用非常简单,仅需增加一个附加属性就行。

<TabControl
    assist:SelectorDragDropAttach.IsItemsDragDropEnabled="True"
    AlternationCount="{Binding ClassInfos.Count}"
    ContentTemplate="{StaticResource contentTemplate}"
    ItemContainerStyle="{StaticResource TabItemStyle}"
    ItemsSource="{Binding ClassInfos}"
    SelectedIndex="0" />

实现效果如下:

主要思路

WPF中核心基类UIElement包含了DragEnterDragLeaveDragEnterDrop等拖拽相关的事件,因此只需对这几个事件进行监听并做相应的处理就可以实现WPF中的UI元素拖拽操作。

另外,WPF的一大特点是支持数据驱动,即由数据模型来推动UI的呈现。因此,可以通过通过拖拽事件处理拖拽的源位置以及目标位置,并获取到对应位置渲染的数据,然后操作数据集中数据的位置,从而实现数据和UI界面上的顺序更新。

首先定义一个附加属性类SelectorDragDropAttach,通过附加属性IsItemsDragDropEnabled控制是否允许拖拽排序。

public static class SelectorDragDropAttach
{
    public static bool GetIsItemsDragDropEnabled(Selector scrollViewer)
    {
        return (bool)scrollViewer.GetValue(IsItemsDragDropEnabledProperty);
    }

    public static void SetIsItemsDragDropEnabled(Selector scrollViewer, bool value)
    {
        scrollViewer.SetValue(IsItemsDragDropEnabledProperty, value);
    }

    public static readonly DependencyProperty IsItemsDragDropEnabledProperty =
        DependencyProperty.RegisterAttached("IsItemsDragDropEnabled", typeof(bool), typeof(SelectorDragDropAttach), new PropertyMetadata(false, OnIsItemsDragDropEnabledChanged));

    private static readonly DependencyProperty SelectorDragDropProperty =
        DependencyProperty.RegisterAttached("SelectorDragDrop", typeof(SelectorDragDrop), typeof(SelectorDragDropAttach), new PropertyMetadata(null));

    private static void OnIsItemsDragDropEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        bool b = (bool)e.NewValue;
        Selector selector = d as Selector;
        var selectorDragDrop = selector?.GetValue(SelectorDragDropProperty) as SelectorDragDrop;
        if (selectorDragDrop != null)
            selectorDragDrop.Selector = null;
        if (b == false)
        {
            selector?.SetValue(SelectorDragDropProperty, null);
            return;
        }
        selector?.SetValue(SelectorDragDropProperty, new SelectorDragDrop(selector));

    }

}

其中SelectorDragDrop就是处理拖拽排序的对象,接下来看下几个主要事件的处理逻辑。
通过PreviewMouseLeftButtonDown确定选中的需要拖拽操作的元素的索引

void selector_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (this.IsMouseOverScrollbar)
    {
        //Set the flag to false when cursor is over scrollbar.
        this.canInitiateDrag = false;
        return;
    }

    int index = this.IndexUnderDragCursor;
    this.canInitiateDrag = index > -1;

    if (this.canInitiateDrag)
    {
        // Remember the location and index of the SelectorItem the user clicked on for later.
        this.ptMouseDown = GetMousePosition(this.selector);
        this.indexToSelect = index;
    }
    else
    {
        this.ptMouseDown = new Point(-10000, -10000);
        this.indexToSelect = -1;
    }
}

PreviewMouseMove事件中根据需要拖拽操作的元素创建一个AdornerLayer,实现鼠标拖着元素移动的效果。其实拖拽移动的只是这个AdornerLayer,真实的元素并未移动。

void selector_PreviewMouseMove(object sender, MouseEventArgs e)
{
    if (!this.CanStartDragOperation)
        return;

    // Select the item the user clicked on.
    if (this.selector.SelectedIndex != this.indexToSelect)
        this.selector.SelectedIndex = this.indexToSelect;

    // If the item at the selected index is null, there's nothing
    // we can do, so just return;
    if (this.selector.SelectedItem == null)
        return;

    UIElement itemToDrag = this.GetSelectorItem(this.selector.SelectedIndex);
    if (itemToDrag == null)
        return;

    AdornerLayer adornerLayer = this.ShowDragAdornerResolved ? this.InitializeAdornerLayer(itemToDrag) : null;

    this.InitializeDragOperation(itemToDrag);
    this.PerformDragOperation();
    this.FinishDragOperation(itemToDrag, adornerLayer);
}

DragEnterDragLeaveDragEnter事件中处理AdornerLayer的位置以及是否显示。

Drop事件中确定了拖拽操作目标位置以及渲染的数据元素,然后移动元数据,通过数据顺序的变化更新界面的排序。从代码中可以看到列表控件的ItemsSource不能为空,否则拖拽无效。这也是后边将提到的一个缺点。

void selector_Drop(object sender, DragEventArgs e)
{
    if (this.ItemUnderDragCursor != null)
        this.ItemUnderDragCursor = null;

    e.Effects = DragDropEffects.None;

    var itemsSource = this.selector.ItemsSource;
    if (itemsSource == null) return;

    int itemsCount = 0;
    Type type = null;
    foreach (object obj in itemsSource)
    {
        type = obj.GetType();
        itemsCount++;
    }

    if (itemsCount < 1) return;
    if (!e.Data.GetDataPresent(type))
        return;

    object data = e.Data.GetData(type);
    if (data == null)
        return;

    int oldIndex = -1;
    int index = 0;
    foreach (object obj in itemsSource)
    {
        if (obj == data)
        {
            oldIndex = index;
            break;
        }
        index++;
    }
    int newIndex = this.IndexUnderDragCursor;

    if (newIndex < 0)
    {
        if (itemsCount == 0)
            newIndex = 0;
        else if (oldIndex < 0)
            newIndex = itemsCount;
        else
            return;
    }
    if (oldIndex == newIndex)
        return;

    if (this.ProcessDrop != null)
    {
        // Let the client code process the drop.
        ProcessDropEventArgs args = new ProcessDropEventArgs(itemsSource, data, oldIndex, newIndex, e.AllowedEffects);
        this.ProcessDrop(this, args);
        e.Effects = args.Effects;
    }
    else
    {
        dynamic dItemsSource = itemsSource;
        if (oldIndex > -1)
            dItemsSource.Move(oldIndex, newIndex);
        else
            dItemsSource.Insert(newIndex, data);
        e.Effects = DragDropEffects.Move;
    }
}

优点与缺点

优点:

  • 用法简单,封装好拖拽操作的附加属性后,只需一行代码实现拖拽功能。
  • 对现有项目友好,对于已有项目需要扩展拖拽操作排序功能,无需替换控件。
  • 支持多种列表控件扩展。派生自SelectorListBoxTabControlListView,ComboBox都可使用该方法。

缺点:

  • 仅支持通过数据绑定动态渲染的列表控件,XAML硬编码或者后台代码循环添加列表元素创建的列表控件不适用该方法。
  • 仅支持列表控件内的元素拖拽,不支持穿梭框拖拽效果。
  • 不支持同时拖拽多个元素。

小结

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

到此这篇关于WPF利用TabControl控件实现拖拽排序功能的文章就介绍到这了,更多相关WPF TabControl拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • C#并行编程之Task同步机制

    C#并行编程之Task同步机制

    这篇文章介绍了C#并行编程之Task同步机制,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • c#序列化详解示例

    c#序列化详解示例

    序列化是将对象状态转换为可保持或传输的格式的过程。与序列化相对的是反序列化,它将流转换为对象。这两个过程结合起来,可以轻松地存储和传输数据
    2014-02-02
  • C#学习笔记整理_变量等基础语法(必看篇)

    C#学习笔记整理_变量等基础语法(必看篇)

    下面小编就为大家带来一篇C#学习笔记整理_变量等基础语法(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 利用C#/VB.NET实现将PDF转为Word

    利用C#/VB.NET实现将PDF转为Word

    众所周知,PDF 文档支持特长文件,集成度和安全可靠性都较高,可有效防止他人对 PDF 内容进行更改,所以在工作中深受大家喜爱。本文将分为两部分介绍如何以编程的方式将 PDF 转换为 Word,需要的可以参考一下
    2022-12-12
  • 如何在C#中使用注册表

    如何在C#中使用注册表

    这篇文章主要介绍了如何在C# 使用注册表,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下
    2020-12-12
  • C#时间戳基本使用方法详解

    C#时间戳基本使用方法详解

    这篇文章主要给大家介绍了关于C#时间戳基本使用方法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友可以参考下
    2022-10-10
  • C#用websocket实现简易聊天功能(客户端)

    C#用websocket实现简易聊天功能(客户端)

    这篇文章主要为大家详细介绍了C#用websocket实现简易聊天功能,客户端方向,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • c# 给pdf添加数字签名的步骤

    c# 给pdf添加数字签名的步骤

    这篇文章主要介绍了c# 给pdf添加数字签名的步骤,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下
    2020-12-12
  • c#数据类型基础

    c#数据类型基础

    C#里面的数据类型分为两种:值类型和引用类型。
    2008-08-08
  • C#中的where泛型约束介绍

    C#中的where泛型约束介绍

    这个关于泛型约束的东西我看了几天了。一直没打看懂,我的领悟能力有点差,刚才突然明白了一点
    2013-04-04

最新评论