WPF DataGrid Drag & Drop and target Row Indicator effect

I am new to WPF and got a requirement to apply some effect on dragging and I feel it is one good topic to share which can help programmers out there, who wants to achieve same Hence sharing with you all.

So lets see, How you can apply drag & drop effect to WPF data grid. There are many custom paid/licensed wpf data grid controls which helps you to apply such effects with no effort but that is not a option always (as it is paid).

Here we are discussing two effects on data grid with drag & drop features:

1. Enable Drag & Drop for grid: Below are the events which I used to enable drag & drop, other than these there are other DataGrid events like DragEnter, DragOver and DragLeave which you can make use of for your need.
   i. Enable AllowDrop=”True” and SelectionMode=”Extended” for the grid.
   ii. Add LoadingRow event for dragging rows and indicator line effects. Below mentioned effects code is been handled from this event.
   iii. Add SelectionChanged event to mark selected rows. This event will set Model.IsSelected to true through which we identify this row(s) are selected.
   iv. Add Drop event and the code related to dropping rows goes here, this is where collection source gets modified.
2. Show the selected rows while dragging: This you can achieve by adding a popup and this is all you need to do:
   i. Design a container control (in my case I added a grid with no header) to show data (selected rows).
   ii. Create a popup and place the above container control within the popup.
   iii. From the code behind On Row_DragOver event bind the container control and display the popup on current mouse position and otherwise hide the popup.

private void PersonGrid_LoadingRow(object sender, DataGridRowEventArgs e){      e.Row.DragOver += Row_DragOver;}private void Row_DragOver(object sender, DragEventArgs e){     if (!popup1.IsOpen)     {           popup1.IsOpen = true;
           //bind your container control with selected rows of data.     }     Size popupSize = new Size(popup1.ActualWidth, popup1.ActualHeight);     popup1.PlacementRectangle = new Rect(e.GetPosition(this), popupSize);}

3.  Show the row indicator line for drop location: To achieve this we need to figure out the drop location based on our data collection index position and then dynamically apply the styling to draw a Row Indicator line and to do this:
i. Create an enum which will help to hold the info for drag position.

public enum DragRowEffect{     None,     Before,     After}

ii. Add the enum in your model.

private DragRowEffect rowEffect;public DragRowEffect RowEffect{       get => rowEffect;       set => SetProperty(ref rowEffect, value); //Prism.Mvvm.BindableBase}

iii. Based on how you are changing the datagrid’s data collection (i.e remove item and then add the dragged back at respective index), set the value of RowEffect for your model On Row_DragOver event.

private void Row_DragOver(object sender, DragEventArgs e){      if (!popup1.IsOpen)
      {
            popup1.IsOpen = true; //bind your container control with selected rows of data.
      }      Size popupSize = new Size(popup1.ActualWidth,       popup1.ActualHeight);
      popup1.PlacementRectangle = new Rect(e.GetPosition(this), popupSize);      var targetRowIndex = dataContext.PersonCollection.IndexOf((e.OriginalSource as FrameworkElement).DataContext as Person);
      if (targetRowIndex < 0)
          return;
      var selectedItemsIndexes = selectedItems.Select(x => dataContext.PersonCollection.IndexOf(x)).OrderBy(x => x).ToList();
      var minIndex = selectedItemsIndexes.Min();
      if (targetRowIndex == 0)
          dataContext.PersonCollection[targetRowIndex].RowEffect = DragRowEffect.Before;
      else if (minIndex > targetRowIndex)
dataContext.PersonCollection[targetRowIndex].RowEffect =   DragRowEffect.Before;
      else
dataContext.PersonCollection[targetRowIndex].RowEffect = DragRowEffect.After;}

iv. Override the DataGrid.RowStyle and change the style of the target row’s border based on your Model.RowEffect value.

<DataGrid.RowStyle><Style TargetType="{x:Type DataGridRow}"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="Background" Value="Transparent"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="MinHeight" Value="40"/><Style.Triggers><DataTrigger Binding="{Binding RowEffect}" Value="1"><Setter Property="BorderBrush" Value="Blue" /><Setter Property="BorderThickness" Value="0,2,0,0" /></DataTrigger><DataTrigger Binding="{Binding RowEffect}" Value="2"><Setter Property="BorderBrush" Value="Blue" /><Setter Property="BorderThickness" Value="0,0,0,2" /></DataTrigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="LightGray" /></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background" Value="LightGray" /></Trigger><Trigger Property="IsNewItem" Value="True"><Setter Property="Margin" Value="{Binding NewItemMargin, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/></Trigger></Style.Triggers></Style></DataGrid.RowStyle>

if you see here in above code I have applied Style triggers based on model’s RowEffect data to change the backgroud of a row.

That’s all and as a result here is the effect which you will get:

Note: Cursor is not shown in image as it disappear while taking the snapshot because of control movement but it is there.

** Use ctrl for multi select and then ctrl+shift to start dragging multiple selected rows. This behavior your can change based on your code logic.

Download the prototype code from here: https://github.com/binodmahto/FunProjects/tree/main/WPFDragDropDemo