Search code examples
c#wpfdatagriddrag-and-drop

WPF datagrid drag and drop target indicator


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.


Solution

  • 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