DataGridRow drag and drop behavior

[aldelaro5]

So if you check the Avalonia.Xaml.Behariors repos here https://github.com/AvaloniaUI/Avalonia.Xaml.Behaviors there is a dnd module and there's even samples in the repos about them working with listbox, but nothing about data grid which is what I wanted (I could have converted to listbox, but I liked the flexibility of datagrid enough to not want to change them).

So...I did one! I even got the adorner styling to work using some classes. Here's the behavior code:

using System.Collections.Generic;
using System.Diagnostics;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.VisualTree;
using Avalonia.Xaml.Interactions.DragAndDrop;

namespace BugFablesSaveEditor.Behaviors;

public class DataGridDnd<T> : DropHandlerBase where T : class
{
  private enum DragDirection
  {
    Up,
    Down
  }

  private struct DndData
  {
    public DndData() { }
    public DataGrid? SrcDataGrid = null;
    public DataGrid DestDataGrid = null!;
    public IList<T> SrcList = null!;
    public IList<T> DestList = null!;
    public int SrcIndex = -1;

    public int DestIndex = -1;
    public DragDirection Direction;
  }

  private const string DraggingUpClassName = "dragging-up";
  private const string DraggingDownClassName = "dragging-down";

  private DndData _dnd = new();

  private bool Validate(object? sender, DragEventArgs e, object? sourceContext)
  {
    if (_dnd.SrcDataGrid is not { } srcDg ||
        sender is not DataGrid destDg ||
        sourceContext is not T src ||
        srcDg.Items is not IList<T> srcList ||
        destDg.Items is not IList<T> destList ||
        destDg.GetVisualAt(e.GetPosition(destDg),
          v => v.FindDescendantOfType<DataGridCell>() is not null) is not Control
        {
          DataContext: T dest
        } visual)
    {
      return false;
    }

    DataGridCell cell = visual.FindDescendantOfType<DataGridCell>()!;
    var pos = e.GetPosition(cell);

    _dnd.SrcDataGrid = srcDg;
    _dnd.DestDataGrid = destDg;
    _dnd.SrcList = srcList;
    _dnd.DestList = destList;
    _dnd.Direction = cell.DesiredSize.Height / 2 > pos.Y ? DragDirection.Up : DragDirection.Down;
    _dnd.SrcIndex = srcList.IndexOf(src);
    _dnd.DestIndex = destList.IndexOf(dest);

    return true;
  }

  public override bool Validate(object? sender, DragEventArgs e, object? sourceContext,
                                object? targetContext, object? state)
  {
    return Validate(sender, e, sourceContext);
  }

  public override bool Execute(object? sender, DragEventArgs e, object? sourceContext,
                               object? targetContext, object? state)
  {
    if (!Validate(sender, e, sourceContext))
      return false;

    if (_dnd.SrcDataGrid != _dnd.DestDataGrid && _dnd.Direction == DragDirection.Down)
      _dnd.DestIndex++;
    else if (_dnd.SrcIndex > _dnd.DestIndex && _dnd.Direction == DragDirection.Down)
      _dnd.DestIndex++;
    else if (_dnd.SrcIndex < _dnd.DestIndex && _dnd.Direction == DragDirection.Up)
      _dnd.DestIndex--;

    MoveItem(_dnd.SrcList, _dnd.DestList, _dnd.SrcIndex, _dnd.DestIndex);
    _dnd.DestDataGrid.SelectedIndex = _dnd.DestIndex;
    _dnd.DestDataGrid.ScrollIntoView(_dnd.DestList[_dnd.DestIndex], null);
    _dnd.SrcDataGrid = null;
    return true;
  }

  public override void Enter(object? sender, DragEventArgs e, object? sourceContext,
                             object? targetContext)
  {
    _dnd.SrcDataGrid ??= sender as DataGrid;
    if (!Validate(sender, e, sourceContext))
    {
      e.DragEffects = DragDropEffects.None;
      e.Handled = true;
      return;
    }

    string className = _dnd.Direction switch
    {
      DragDirection.Down => DraggingDownClassName,
      DragDirection.Up => DraggingUpClassName,
      _ => throw new UnreachableException($"Invalid drag direction: {_dnd.Direction}")
    };
    _dnd.DestDataGrid.Classes.Add(className);

    e.DragEffects |= DragDropEffects.Copy | DragDropEffects.Move | DragDropEffects.Link;
    e.Handled = true;
  }

  public override void Over(object? sender, DragEventArgs e, object? sourceContext,
                            object? targetContext)
  {
    if (!Validate(sender, e, sourceContext))
    {
      e.DragEffects = DragDropEffects.None;
      e.Handled = true;
      return;
    }

    e.DragEffects |= DragDropEffects.Copy | DragDropEffects.Move | DragDropEffects.Link;
    e.Handled = true;

    (string toAdd, string toRemove) classUpdate = _dnd.Direction switch
    {
      DragDirection.Down => (DraggingDownClassName, DraggingUpClassName),
      DragDirection.Up => (DraggingUpClassName, DraggingDownClassName),
      _ => throw new UnreachableException($"Invalid drag direction: {_dnd.Direction}")
    };
    if (_dnd.DestDataGrid.Classes.Contains(classUpdate.toAdd))
      return;

    _dnd.DestDataGrid.Classes.Remove(classUpdate.toRemove);
    _dnd.DestDataGrid.Classes.Add(classUpdate.toAdd);
  }

  public override void Leave(object? sender, RoutedEventArgs e)
  {
    base.Leave(sender, e);
    RemoveDraggingClass(sender as DataGrid);
  }

  public override void Drop(object? sender, DragEventArgs e, object? sourceContext,
                            object? targetContext)
  {
    RemoveDraggingClass(sender as DataGrid);
    base.Drop(sender, e, sourceContext, targetContext);
    _dnd.SrcDataGrid = null;
  }

  private static void RemoveDraggingClass(DataGrid? dg)
  {
    if (dg is not null && !dg.Classes.Remove(DraggingUpClassName))
      dg.Classes.Remove(DraggingDownClassName);
  }
}

As for the xaml, I just needed to put some styles in my app.xaml (but you could move these to your own file for better organisation):

<Style Selector="DataGrid.dragging-up DataGridRow.dragging">
      <Setter Property="AdornerLayer.Adorner">
        <Template>
          <Border BorderThickness="0 2 0 0" BorderBrush="White" />
        </Template>
      </Setter>
    </Style>

    <Style Selector="DataGrid.dragging-down DataGridRow.dragging">
      <Setter Property="AdornerLayer.Adorner">
        <Template>
          <Border BorderThickness="0 0 0 2" BorderBrush="White" />
        </Template>
      </Setter>
    </Style>

    <Style Selector="DataGrid.draggable DataGridRow">
      <Setter Property="DragDrop.AllowDrop" Value="True" />
      <Setter Property="(i:Interaction.Behaviors)">
        <i:BehaviorCollectionTemplate>
          <i:BehaviorCollection>
            <idd:ContextDragBehavior />
            <iac:RoutedEventTriggerBehavior RoutedEvent="{x:Static DragDrop.DragEnterEvent}"
                                            RoutingStrategies="Bubble">
              <iac:AddClassAction ClassName="dragging" RemoveIfExists="True" />
            </iac:RoutedEventTriggerBehavior>
            <iac:RoutedEventTriggerBehavior RoutedEvent="{x:Static DragDrop.DragLeaveEvent}"
                                            RoutingStrategies="Bubble">
              <iac:RemoveClassAction ClassName="dragging" />
            </iac:RoutedEventTriggerBehavior>
            <iac:RoutedEventTriggerBehavior RoutedEvent="{x:Static DragDrop.DropEvent}"
                                            RoutingStrategies="Bubble">
              <iac:RemoveClassAction ClassName="dragging" />
            </iac:RoutedEventTriggerBehavior>
          </i:BehaviorCollection>
        </i:BehaviorCollectionTemplate>
      </Setter>
    </Style>

And for usage, any datagrid you want to add support for dnd, you need to put draggable in the classes and it needs to have this underneath it:

<i:Interaction.Behaviors>
            <i:BehaviorCollection>
              <idd:ContextDropBehavior Handler="{StaticResource DataGridDndBfNamedId}" />
            </i:BehaviorCollection>
          </i:Interaction.Behaviors>

That ressource is to close the generic, it needs to be something like this and it has to be done once for every type:

    <b:DataGridDnd x:Key="DataGridDndBfNamedId" x:TypeArguments="ob:ObservableBfNamedId" />

I am assuming you import the namespaces under these prefixes, but you get the idea. There's not really a better way I found to get better generics handling, but it's one line per type, not too bad.

The result is REALLY nice: it works between datagrid, within a datagrid and it is smart enough to understand that dropping to the upper region of a row is different than the lower region, here it is in action:

I'm proud of getting this working so I'm sharing it :)

[timunie]

That is really nice 👍 .

One thing that comes into my mind when I see it is that a tooltip showing the dragged item could be useful for the user of the App. It's not mandatory though.

[alexandrehtrb]

I copied your solution to use in my app hehehe! Thanks!

[dbriard]

Thanks for sharing this and good job 👍

[aldelaro5]

Nice, one thing I should probably mentioned is that I found that it's not completely infallable: it's possible to initiate a drag such that it's no longer possible to determine the source datagrid accurately.

I partially solved it by using a drag handler (I might as well link the folder so it looks a bit more obvious what I ended up doing), but I STILL was sometime getting the source index not found so I ended up doing both that and refusing the drag if that happens.

Here is how I did it with everything: https://github.com/aldelaro5/Bug-Fables-Save-Editor/tree/main/BugFablesSaveEditor/BugFablesSaveEditor/Behaviors

[alexandrehtrb]

Hi,

@aldelaro5 , do you know how to block drag and drop if a cell of the DataGrid is being edited?
If I try to select a part of a cell's text using the mouse, it understands as if it was a drag and drop... it only works for read-only tables

This problem also happens with Avalonia.Controls.TreeDataGrid

[aldelaro5]

Unfortunatelly, most of my data grid with draggable rows was made with dropdowns so I didn't used the edit features at all here so I don't know.

[alexandrehtrb]

Alternative solution here:
#13581