Dragging selected Item along with the mouse in WPF

Question

I am using the following code for performing Drag & Drop in my StackPanel Childran,

XAML

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="601" Width="637">

<StackPanel Name="sp" AllowDrop="True" Background="SkyBlue" PreviewMouseLeftButtonDown="sp_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="sp_PreviewMouseLeftButtonUp" PreviewMouseMove="sp_PreviewMouseMove"
            DragEnter="sp_DragEnter" Drop="sp_Drop">
    <Image Source="/Assets/Image1.jpg" Height="100" Width ="100"/>
    <Image Source="/Assets/Image2.jpg" Height="100" Width ="100"/>
    <Image Source="/Assets/Image3.jpg" Height="100" Width ="100"/>
    <Image Source="/Assets/Image4.jpg" Height="100" Width ="100"/>
    <Image Source="/Assets/Image5.jpg" Height="100" Width ="100"/>
</StackPanel>

Code Behind

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }
    private bool _isDown;
    private bool _isDragging;
    private Point _startPoint;
    private UIElement _realDragSource;
    private UIElement _dummyDragSource = new UIElement();

    private void sp_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (e.Source == this.sp)
        {
        }
        else
        {              
            _isDown = true;                             
            _startPoint = e.GetPosition(this.sp);                       
        }
    }

    private void sp_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        _isDown = false;
        _isDragging = false;
        _realDragSource.ReleaseMouseCapture();
    }

    private void sp_PreviewMouseMove(object sender, MouseEventArgs e)
    {          
        if (_isDown)
        {
            if ((_isDragging == false) && ((Math.Abs(e.GetPosition(this.sp).X - _startPoint.X) > SystemParameters.MinimumHorizontalDragDistance) ||
                (Math.Abs(e.GetPosition(this.sp).Y - _startPoint.Y) > SystemParameters.MinimumVerticalDragDistance)))
            {
                _isDragging = true;
                _realDragSource = e.Source as UIElement;
                _realDragSource.CaptureMouse();
               DragDrop.DoDragDrop(_dummyDragSource, new DataObject("UIElement", e.Source, true), DragDropEffects.Move);
            }              
        }
    }

    private void sp_DragEnter(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent("UIElement"))
        {
            e.Effects = DragDropEffects.Move;               
        }
    }

    private void sp_Drop(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent("UIElement"))
        {              
            UIElement droptarget = e.Source as UIElement;              
            int droptargetIndex=-1, i =0;
            foreach (UIElement element in this.sp.Children)
            {
                if (element.Equals(droptarget))
                {
                    droptargetIndex = i;
                    break;
                }
                i++;
            }
            if (droptargetIndex != -1)
            {
                this.sp.Children.Remove(_realDragSource);
                this.sp.Children.Insert(droptargetIndex, _realDragSource);
            }

            _isDown = false;
            _isDragging = false;
            _realDragSource.ReleaseMouseCapture();
        }
    }  
}

What i am trying to implement is, I need to drag the clicked item along with my click and drag. In this implementation, While drag and drop a small rectangle dotted like selection appears and then it drops to the place where mouse pointer leaves. How can i hold that image along with my selection (drag & drop)

Thanks in Advance,

StezPet.

score 1 · Accepted Answer · answered Mar 25 '14 at 23:02

If I understand you correctly and you want to have some visual feedback of the object that is being dragged in a drag and drop operation, then you'll need to use the Adorner Layer. From the linked page:

Adorners are a special type of FrameworkElement, used to provide visual cues to a user... [and] are rendered in an AdornerLayer, which is a rendering surface that is always on top of the adorned element

You can find a good article explaining how to do this with a code example in the WPF: Drag Drop Adorner post on Code Blitz.

score 0 · Answer 2 · answered Mar 25 '14 at 23:01

You'll want to create an Adorner which shows your item.

Add the Adorner to the AdornerLayer before DragDrop.DoDragDrop.

Override PreviewDragOver in order to update the position of the Adorner during drag.

Remove the Adorner from the AdornerLayer after DragDrop.DoDragDrop.

Dragging selected Item along with the mouse in WPF

2 Answers2

Linked