Avalonia 列表拖拽替换

实现目标，在一个ListBox中选择一个子项进行拖拽到另一个ListBox中，拖拽到某一子项区域进行替换

axaml代码

 <ListBox
                            Name="consumableListBox"
                            Margin="5"
                            ItemsSource="{Binding ConsumableList}"
                            SelectionMode="Single">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="5,5,5,0">
                                        <Border
                                            Width="160"
                                            Height="100"
                                            Margin="0,0,0,5"
                                            HorizontalAlignment="Center"
                                            Background="Red"
                                            CornerRadius="5" />
                                        <TextBlock HorizontalAlignment="Center" Text="{Binding}" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

<ListBox
                Name="platePositionListBox"
                Margin="5"
                ItemsSource="{Binding PlatePositionList}"
                SelectionMode="Single">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="5,5,5,0">
                            <Border
                                Width="160"
                                Height="100"
                                Margin="0,0,0,5"
                                HorizontalAlignment="Center"
                                Background="Red"
                                CornerRadius="5" />
                            <TextBlock HorizontalAlignment="Center" Text="{Binding}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

给源ListBox添加指针移动事件

private void SourceList_PointerMoved(object sender, PointerEventArgs e)
    {
        // 当拖拽操作开始时，在源列表中开始拖拽
        if (e.GetCurrentPoint(consumableListBox).Properties.IsLeftButtonPressed)
        {
            DataObject dataObject = new DataObject();
            dataObject.Set("dataObject", consumableListBox.SelectedItem);
            DragDrop.DoDragDrop(e, dataObject, DragDropEffects.Move);
        }
    }

 将目标ListBox设为允许拖入

DragDrop.SetAllowDrop(platePositionListBox, true);

由于ListBox没有DropEvent事件，需要进行添加事件

 platePositionListBox.AddHandler(DragDrop.DropEvent, PlatePositionListBox_DropEvent, RoutingStrategies.Bubble | RoutingStrategies.Direct);

对应事件实现，其中需要获取到需要替换的项的下标，本处是通过定位进行计算

private void PlatePositionListBox_DropEvent(object? sender, DragEventArgs e)
    {
        var a = e.Data.Get("dataObject");
        if (e.Data.Contains("dataObject") && a != null)
        {
            var targetIndex = GetDropTargetIndex(platePositionListBox, e.GetPosition(platePositionListBox));
            if (targetIndex >= 0)
            {
                if (this.DataContext is PlanViewModel viewModel)
                {
                    viewModel.PlatePositionList.RemoveAt(targetIndex);
                    viewModel.PlatePositionList.Insert(targetIndex, a.ToString());
                }
            }
        }
    }


//获取目标项下标
private int GetDropTargetIndex(ListBox targetListBox, Avalonia.Point position)
    {
        var itemsControl = targetListBox;

        var itemsPoint = GetAllItemDistances(targetListBox);
        var firstItemPanel = (StackPanel)Avalonia.VisualTree.VisualExtensions.FindDescendantOfType<StackPanel>(itemsControl);
        var itemContainer = (Control)firstItemPanel;
        var firstItemBounds = itemContainer.Bounds;
        var items = itemsControl.Items;
        var y = firstItemBounds.Y;
        for (int i = 0; i < items.Count; i++)
        {
            if (itemsPoint[i].Index == -1)
            {
                continue;
            }
            if (position.Y >= itemsPoint[i].DistanceToTop && position.Y <= itemsPoint[i].DistanceToTop + firstItemBounds.Height)
            {
                return i;
            }
        }
        return items.Count;
    }

//获取目标ListBox的项距离顶部边框的距离，如果未呈现到画面上，下标设为-1
private List<ItemCoordinates> GetAllItemDistances(ListBox listBox)
    {
        var itemCoordinatesList = new List<ItemCoordinates>();
        var items = listBox.Items;
        var scrollViewer = listBox.FindDescendantOfType<ScrollViewer>();
        var topOffset = scrollViewer.Offset.Y;

        for (int i = 0; i < items.Count; i++)
        {
            var itemContainer = listBox.ItemContainerGenerator.ContainerFromIndex(i) as Control;
            if (itemContainer != null)
            {
                var itemBounds = itemContainer.Bounds;
                var distanceToTop = itemBounds.Top - topOffset;
                itemCoordinatesList.Add(new ItemCoordinates(i, distanceToTop));
            }
            else
            {
                itemCoordinatesList.Add(new ItemCoordinates(-1, -999));
            }
        }
        return itemCoordinatesList;
    }

对应的实体类

public class ItemCoordinates
    {
        public int Index { get; }
        public double DistanceToTop { get; }

        public ItemCoordinates(int index, double distanceToTop)
        {
            Index = index;
            DistanceToTop = distanceToTop;
        }
    }

最终效果：

初始画面

拖拽后：