how to drag & drop image from wrap panel to canvas

Question

I am using Visual Studio 2012 to write a C# WPF application.

I got some images from a database and put them into a wrap panel. From the wrap panel, I want to drag the images and drop them into a canvas. This is how I get the images from the database:

private void GetImages(int taskID, int activityID)
{
   IList<ModelSQL.TwoCategory> ImagesList = twocat.GetImageURL(taskid, type);

   foreach (ModelSQL.TwoCategory tc in ImagesList)
   {
      var uriSource = new Uri(root.SetupInformation.ApplicationBase + tc.Pictures);
      Image img = new Image();
      img.Source = new BitmapImage(uriSource);
      img.VerticalAlignment = VerticalAlignment.Center;
      img.HorizontalAlignment = HorizontalAlignment.Center;
      img.Stretch = Stretch.Uniform;
      img.Height = 100;
      img.Width = 100;
      img.AllowDrop = true;
      img.PreviewMouseDown += new MouseButtonEventHandler(img_MouseDown);
      img.PreviewMouseMove += new MouseEventHandler(img_MouseMove);
      img.PreviewGiveFeedback += new GiveFeedbackEventHandler(img_GiveFeedback);
      img.PreviewMouseUp += new MouseButtonEventHandler(img_PreviewMouseUp);
      Canvas1.AllowDrop = true;
      Canvas2.AllowDrop = true;

      //Canvas1.PreviewDrop += new DragEventHandler(Canvas1_PreviewDrop);
      //Canvas2.PreviewDrop += new DragEventHandler(Canvas2_PreviewDrop);

      imgPanel.Children.Add(img);    
   }   
}

I used the drag adorner to drag the images and it works fine.

private void img_MouseDown(object sender, MouseButtonEventArgs e)
{
   startPoint = e.GetPosition(this);
}

private void img_MouseMove(object sender, MouseEventArgs e)
{
   // int y = 0, z = 0;
   if (e.LeftButton == MouseButtonState.Pressed)
   {
      var source = sender as UIElement;
      Image img = sender as Image;

      //img.Background = System.Windows.Media.Brushes.YellowGreen;
      Point current = e.GetPosition(this);
      Vector diff = startPoint - current;

      if (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
          Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance)
      {    
         adorner = new DragAdorner(img, e.GetPosition(img));
         AdornerLayer.GetAdornerLayer(img).Add(adorner);

         var dragData = new DataObject(this);

         //string str = img.Content.ToString();    

         //DragDrop.DoDragDrop(lbl, lbl.Content, DragDropEffects.Move | DragDropEffects.Copy);
         DragDrop.DoDragDrop(img, dragData, DragDropEffects.Move | DragDropEffects.Copy);
         AdornerLayer.GetAdornerLayer(img).Remove(adorner);    
      }    
   }
}

private void img_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{ }

private void img_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{
   if (adorner != null)
   {
      Image img = sender as Image;

      var pos = img.PointFromScreen(GetMousePosition());
      adorner.UpdatePosition(pos);
      e.Handled = true;
   }

}

[DllImport("user32.dll")]
[return: MarshalAs(UnmanagedType.Bool)]
internal static extern bool GetCursorPos(ref Win32Point pt);

[StructLayout(LayoutKind.Sequential)]
internal struct Win32Point
{
   public Int32 X;
   public Int32 Y;
};

public static Point GetMousePosition()
{
   Win32Point w32Mouse = new Win32Point();
   GetCursorPos(ref w32Mouse);
   return new Point(w32Mouse.X, w32Mouse.Y);
}

But I'm having trouble dropping the image into the canvas, and I'm able to drag the image to anywhere in the application. How do I disable that?

This is the GUI

THIS IS THE DROP EVENT

private void Canvas1_Drop(object sender, DragEventArgs e)
        {
            ImageSource imageSource = e.Data.GetData(typeof(ImageSource)) as ImageSource;
            Image img = sender as Image;
            img.Source = imageSource;
            Canvas Canvas1 = sender as Canvas;
            Canvas1.Children.Add(img);

        }

Answer 1

With

 DragDrop.DoDragDrop(img, dragData, DragDropEffects.Move | DragDropEffects.Copy);

you managed, that the data has been given to the drag drop operation.

Now, every other Control, e.g. the canvas, can decide in their DragOver and Drop events, if they want/can do anything with the data or not. The source of the data is more or less out of the game, when the drag and drop starts, it's the drop target that does the rest. If you do not want your data to leave the source control, you should attach to its DragLeave-event and cancel the Drag and Drop operation, if the mouse moves away.