c# - How to remove dashed rectangle when doing drag and drop

Question

I'm following Bea Stollnitz's blog post on implementing drag and drop on an data bound ItemsControl. It works very nicely, but I have a question for anyone who's experienced something similar...

When I begin dragging the item, there is a small, dashed rectangle at the bottom of the mouse. I cannot figure out at all how to hide that rectangle. Does anyone know how to get rid of this? I would add a screenshot, but when I do a Print Screen, the rectangle doesn't appear.

I think it has something to do with a focus setting on the AdornerLayer that the "DraggedAdorner" is added to.

Thanks!

Answer 1

Try this in the Style of the Visual that is surrounded by the rectangle:

<Setter Property="FocusVisualStyle" Value="{x:Null}"/>

EDIT: The effect that you are seeing is a result of the DragDropEffects.Move assignment. You can mitigate this visual by simply changing the following line (Line #168 in the sample):

DragDropEffects effects = DragDrop.DoDragDrop((DependencyObject)sender, data, DragDropEffects.Move);

To this:

DragDropEffects effects = DragDrop.DoDragDrop((DependencyObject)sender, data, DragDropEffects.None);

Thus setting the DragDropEffect to DragDropEffects.None

NOTE: In the sample, it evaluates the DragDropEffects value in the process of performing the drag & drop, so you would need to work around this (Probably a simple AttachedProperty, or even casting the Sender as a FrameworkElement and using the Tag property), but this should resolve the visual issue.

I hope this helps, and if I can help you further feel free to let me know. Good luck!

Answer 2

The dashed rectangle is actually part of the default cursor used when performing a drag and drop "Move" operation.

This is the default "Move" cursor:

And this is the default "Copy" cursor (if you hold CTRL while dragging):

You can get more control over what mouse cursor is shown by overriding UIElement.OnGiveFeedback, or subscribing to the UIElement.GiveFeedback Routed Event.

When handling the event and changing the cursor, make sure to set e.Handled = true; to prevent the cursor from flickering.

For example, use this override on the element initiating the Drag operation (see this walkthrough for more info):

protected override void OnGiveFeedback(GiveFeedbackEventArgs e)
{
    if (e.Effects.HasFlag(DragDropEffects.Copy))
    {
        Mouse.SetCursor(Cursors.Cross);
    }
    else if (e.Effects.HasFlag(DragDropEffects.Move))
    {
        Mouse.SetCursor(Cursors.Pen);
    }
    else
    {
        Mouse.SetCursor(Cursors.No);
    }

    e.Handled = true;
}