The FlexGridGroupPanel is a custom control that comprises a grid element with text block and a stack panel. The text block displays a watermark message and the stack panel shows available groups in the source ICollectionView. The groups are represented by GroupMarker element that can be clicked to sort or close the groups, or dragged to re-arrange the grouping order. The control comes with the DragDropManager utility class, which handles four drag actions listed below:

• Dragging GroupMarkers within the grouping area to re-arrange the groups.
• Dragging GroupMarkers into the grid to remove the group and restore columns at specific positions.
• Dragging ColumnHeader elements from the grid to the grouping area to create new groups.
• Dragging ColumnHeader elements within the grid to re-arrange the grid columns.

The first two drag actions are initiated by the GroupMarker class, which detects mouse drag actions and calls the DoDragDrop method with marker as a parameter. The last two actions are initiated in response to the FlexGrid's DraggingColumn event. When the DoDragDrop method is called, the DragDropManager displays a transparent element over the whole page, captures the mouse, and raises the Dragging event so that the caller can update the drop location. When the user releases the mouse, the DragDropManager raises the Dropped event so that the caller can finish the drag-drop action.