WPF datagrid drag and drop target indicator

Question

I have a WPF datagrid where a user can drag and drop various rows to reorder them. However, I need an indicator that will display where the row will be inserted.

I've tried various 'hacky' ways of doing it, including detecting mouse move events and inserting a blank indicator row where the mouse is. Unfortunately, it seems that while dragging rows, none of my mouse move events are getting fired.

Martin Martin · Accepted Answer · 2015-11-06T18:23:17

The UIElement class provides several events that you can use. Those are:

DragEnter
DragOver
DragLeave
Drop

The first two are the one you can use.

<DataGrid DragOver="MyGrid_DragOver"
          DragEnter="MyGrid_DragEnter"

I had to use both to get my drag and drop working.

I start the Drag operation by reacting to a move mouve event:

private void MyGrid_MouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {    
        var dragSource = ...;
        var data = ...;
        DragDrop.DoDragDrop(dragSource, data, DragDropEffects.Move);
    }
}

Then you code the event handlers on the target control (your DataGrid):

private void MyGrid_DragOver(object sender, DragEventArgs e)
{
    this.DragOver_DragEnter(sender, e);
}

private void MyGrid_DragEnter(object sender, DragEventArgs e)
{
    this.DragOver_DragEnter(sender, e);
}

Then you can set the Effects propery to give a visual feedback to the user:

private void DragOver_DragEnter(object sender, DragEventArgs e)
{
    // code here to decide whether drag target is ok

    e.Effects = DragDropEffects.None;
    e.Effects = DragDropEffects.Move;
    e.Effects = DragDropEffects.Copy;
    e.Handled = true;
    return;
}

Check out this response on MSDN too: Giving drag and drop feedback using DragEventArgs.Effect

WPF datagrid drag and drop target indicator

1 Answers