WPF拖放控件 - 技术栈

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

我这里实现的是对TabControl的Tab页面进行拖放，以达成类似Chrome浏览器的拖放功能。

对拖放相关事件研究后发现，最终只需要在拖动源事件处理程序中调用 DoDragDrop 方法启动拖动操作，然后在拖放目标上，响应Drop事件。启动拖放操作的拖动源事件通常是 MouseMove事件，另外需要判断鼠标左键是否为按下状态。另外，最好判断一下鼠标移动的距离是否大于最小拖动距离（在我没有添加这个检查之前，双击也会触发拖动事件）。

除了正常拖动（将Tab页从一个TabControl 拖动到另一个 TabControl 中），考虑将Tab页拖动到窗口之外的情况（浏览器在这种情况下会创建一个新的窗口来显示这个Tab页），我这里采用类似的方式，创建一个预设的子窗口来显示该Tab页面。

此外，当Tab页面在原TabControl内部拖动时，根据拖动位置，调整Tab页面的顺序。

我这里对原生的TabControl进行了继承封装了几个响应事件，轻量化的实现了拖放效果。

TabControlDragable.cs

cs 复制代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfLibrary;

public class TabControlDragable : TabControl
{
    public TabControlDragable()
    {
        AddHandler(MouseLeftButtonDownEvent, new MouseButtonEventHandler(OnMouseLeftButtonDown), true);
        AddHandler(MouseLeftButtonUpEvent, new MouseButtonEventHandler(OnMouseLeftButtonUp), true);
        AddHandler(MouseMoveEvent, new MouseEventHandler(OnMouseMove), true);

        AddHandler(DropEvent, new DragEventHandler(OnDrop), true);
        MinWidth = 100;
        MinHeight = 100;
        AllowDrop = true;
    }
    private bool IsDraging = false;
    private object? DragData;
    private Point DragStartPosition;

    private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Point p = e.GetPosition(this);
        DragData = DragUtility.GetDataObjectFromItemsControl(this, p);
        if (DragData != null)
        {
            DragStartPosition = p;
        }
        e.Handled = true;
    }
    private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        ResetState();
        e.Handled = true;
    }
    private void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (DragData == null || DragData is not TabItem)
        {
            return;
        }
        Point currentPosition = e.GetPosition(this);
        if (e.LeftButton == MouseButtonState.Pressed && !IsDraging
            && ((Math.Abs(currentPosition.X - DragStartPosition.X) > SystemParameters.MinimumHorizontalDragDistance) || (Math.Abs(currentPosition.Y - DragStartPosition.Y) > SystemParameters.MinimumVerticalDragDistance)))
        {
            DataObject dataObject = new DataObject();
            dataObject.SetData("DragData", DragData);
            var effects = DragDrop.DoDragDrop(this, dataObject, DragDropEffects.Move);
            if (effects == DragDropEffects.None)
            {
                if (Items.Count != 1)
                {
                    var tabItem = DragData as TabItem;
                    var parentWindow = DragUtility.GetParentWindow(tabItem);
                    Items.Remove(tabItem);
                    ChildWindow newChildWindow = new ChildWindow();
                    if (parentWindow is ChildWindow)
                    {
                        newChildWindow.Owner = parentWindow.Owner;
                    }
                    else
                    {
                        newChildWindow.Owner = parentWindow;
                    }
                    newChildWindow.DataContext = parentWindow?.DataContext;
                    var tabControl = new TabControlDragable();
                    newChildWindow.MyGrid.Children.Add(tabControl);
                    tabControl.Items.Add(tabItem);
                    newChildWindow.Show();
                }
            }
            ResetState();
        }
        e.Handled = true;
    }
    private int MeasureIndex(TabControl targetTabControl, Point point)
    {
        double preWidth = 0.0;
        for (var i = 0; i < targetTabControl.Items.Count; i++)
        {
            var item = targetTabControl.Items[i] as TabItem;
            if (item == null)
            {
                continue;
            }
            if (point.Y > item.ActualHeight)
            {
                return targetTabControl.Items.Count;
            }
            if (point.X < preWidth + item.ActualWidth / 2)
            {
                return i;
            }
            else
            {
                preWidth += item.ActualWidth;
            }
        }
        return targetTabControl.Items.Count;
    }
    private void OnDrop(object sender, DragEventArgs e)
    {
        var tabItem = e.Data.GetData("DragData") as TabItem;
        var parentTabControl = tabItem?.Parent as TabControl;
        if (tabItem == null || parentTabControl == null)
        {
            return;
        }
        var point = e.GetPosition(this);
        int index = MeasureIndex(this, point);
        if (this != parentTabControl)
        {
            var parentWindow = DragUtility.GetParentWindow(parentTabControl);
            if (parentTabControl.Items.Count == 1)
            {
                var childWindow = parentWindow as ChildWindow;
                if (childWindow != null)
                {
                    parentTabControl.Items.Remove(tabItem);
                    this.Items.Insert(index, tabItem);
                    this.SelectedItem = tabItem;
                    childWindow?.Close();
                }
            }
            else
            {
                parentTabControl.Items.Remove(tabItem);
                this.Items.Insert(index, tabItem);
                this.SelectedItem = tabItem;
            }
        }
        else if (index < parentTabControl.Items.IndexOf(tabItem))
        {
            parentTabControl.Items.Remove(tabItem);
            parentTabControl.Items.Insert(index, tabItem);
            parentTabControl.SelectedItem = tabItem;
        }
        else if (index > parentTabControl.Items.IndexOf(tabItem))
        {
            parentTabControl.Items.Remove(tabItem);
            parentTabControl.Items.Insert(index - 1, tabItem);
            parentTabControl.SelectedItem = tabItem;
        }
        e.Handled = true;
    }

    private void ResetState()
    {
        IsDraging = false;
        DragData = null;
    }
}

使用起来也很简单，只需要将TabControl 替换为 TabControlDragable 即可，事件已经绑定好了。

MainWindow.xaml

XML 复制代码

<Window x:Class="WpfLibraryTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfLibraryTest"
        xmlns:wpfLibrary="clr-namespace:WpfLibrary;assembly=WpfLibrary"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <wpfLibrary:TabControlDragable Grid.Row="0" x:Name="tabControl1">
            <TabItem Header="tabControl1Item1">
                <DataGrid ItemsSource="{Binding Path=Accounts}" IsReadOnly="True"></DataGrid>
            </TabItem>
            <TabItem Header="tabControl1Item2">
                <DataGrid ItemsSource="{Binding Path=Accounts2}" IsReadOnly="True"></DataGrid>
            </TabItem>
            <TabItem Header="tabControl1Item3">
                <DataGrid ItemsSource="{Binding Path=Accounts3}" IsReadOnly="True"></DataGrid>
            </TabItem>
        </wpfLibrary:TabControlDragable>
        <wpfLibrary:TabControlDragable Grid.Row="1" x:Name="tabControl2">
            <TabItem Header="tabControl2Item1">
                <DataGrid ItemsSource="{Binding Path=Accounts}" IsReadOnly="True"></DataGrid>
            </TabItem>
            <TabItem Header="tabControl2Item2">
                <DataGrid ItemsSource="{Binding Path=Accounts2}" IsReadOnly="True"></DataGrid>
            </TabItem>
            <TabItem Header="tabControl2Item3">
                <DataGrid ItemsSource="{Binding Path=Accounts3}" IsReadOnly="True"></DataGrid>
            </TabItem>
        </wpfLibrary:TabControlDragable>
    </Grid>
</Window>