在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.

Answer 1

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 .

Answer 2

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.