Develop Reference

Drag and Drop Object onto Canvas with coordinates

I managed to drag and drop items from my ListView onto a canvas and show an image on it. I used this question as a template:
https://social.msdn.microsoft.com/Forums/en-US/cef5c42c-87a0-4e19-afc8-935284607488/drag-and-drop-controls-issue-from-listbox-into-canvas-wpf?forum=wpf
I also added the suggestion in that thread, so that the Item gets rendered where I drop it. These are the code behinds for my "Drawing Plate" (The canvas) and the ListView:
Canvas:
public partial class DrawingPlateUC : UserControl
{
IMessenger messenger = Messenger.Instance;
public DrawingPlateUC()
{
InitializeComponent();
}
void Canvas_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("MyFormat"))
{
var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;
Image image = new Image();
image.Source = module.ModuleImage;
CanvasView.Children.Add(image);
}
}
private void Canvas_DragOver(object sender, DragEventArgs e)
{
// write down this point to a private member
Point enterPoint = e.GetPosition(this.moduleCanvas);
messenger.Send<Point>(enterPoint, MessengerTopics.MousePoint);
}
void Canvas_DragEnter(object sender, DragEventArgs e)
{
if (!(e.Data.GetDataPresent("contact")) || (sender == e.Source))
{
e.Effects = DragDropEffects.Copy;
}
}
}
ListView:
public partial class ItemListViewUC : UserControl
{
IMessenger messenger = Messenger.Instance;
Point startPoint;
Point enterPoint;
public ItemListViewUC()
{
messenger.Register<Point>(this, MessengerTopics.MousePoint, GetEnterPoint);
InitializeComponent();
}
private void GetEnterPoint(Point point)
{
enterPoint = point;
}
void StackPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(null);
}
void StackPanel_PreviewMouseMove(object sender, MouseEventArgs e)
{
Point mousPos = e.GetPosition(null);
Vector diff = startPoint - mousPos;
if ((e.LeftButton == MouseButtonState.Pressed) && (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance) && (Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
{
ListView listView = sender as ListView;
ListViewItem listViewItem = FindAnchestor<ListViewItem>((DependencyObject)e.OriginalSource);
if (listViewItem == null) { return; }
var contact = (Module)listView.ItemContainerGenerator.ItemFromContainer(listViewItem);
DataObject dataObject = new DataObject("MyFormat", contact);
try
{
DragDrop.DoDragDrop(listViewItem, dataObject, DragDropEffects.Copy);
}
catch { }
// Set the Margin property to place the drag item on the canvas.
listViewItem.Margin = new Thickness(enterPoint.X, enterPoint.Y, 0, 0);
}
}
static T FindAnchestor<T>(DependencyObject current) where T : DependencyObject
{
do
{
if (current is T)
{
return (T)current;
}
current = VisualTreeHelper.GetParent(current);
}
while (current != null);
return null;
}
}
This here is supposed to draw the Image on the spot where I dropped it:
listViewItem.Margin = new Thickness(enterPoint.X, enterPoint.Y, 0, 0);
But it only renders on the top left corner, coordinates 0, 0 of the canvas. This is for all Items I drop, they overlay on that position. I already checked the coordinates, they are not 0, 0, but the ones where my mouse is when I drop the item.
This is my Window:

when you drop an item, you don't set any coordinate for Image:
void Canvas_Drop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("MyFormat"))
{
var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;
Image image = new Image();
image.Source = module.ModuleImage;
image.SetValue(Canvas.LeftProperty, _enterPoint.X);
image.SetValue(Canvas.TopProperty, _enterPoint.Y);
CanvasView.Children.Add(image);
}
}
private Point _enterPoint;
private void Canvas_DragOver(object sender, DragEventArgs e)
{
_enterPoint = e.GetPosition(this.moduleCanvas);
messenger.Send<Point>(_enterPoint, MessengerTopics.MousePoint);
}

How to remove a created image in C#?

I have it so the user can click on an image view and drag the item elsewhere on the form, doing this creates a new image whilst the original image box stays put. How would I delete one of the duplicated images on click?
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
this.AllowDrop = true;
this.pictureBox1.MouseDown += pictureBox1_MouseDown;
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
var dragImage = (Bitmap)pictureBox1.Image;
IntPtr icon = dragImage.GetHicon();
Cursor.Current = new Cursor(icon);
DoDragDrop(pictureBox1.Image, DragDropEffects.Copy);
DestroyIcon(icon);
}
}
protected override void OnGiveFeedback(GiveFeedbackEventArgs e)
{
e.UseDefaultCursors = false;
}
protected override void OnDragEnter(DragEventArgs e)
{
if (e.Data.GetDataPresent(typeof(Bitmap))) e.Effect = DragDropEffects.Copy;
}
protected override void OnDragDrop(DragEventArgs e)
{
var bmp = (Bitmap)e.Data.GetData(typeof(Bitmap));
var pb = new PictureBox();
pb.Image = (Bitmap)e.Data.GetData(typeof(Bitmap));
pb.Size = pb.Image.Size;
pb.Location = this.PointToClient(new Point(e.X - pb.Width / 2, e.Y - pb.Height / 2));
this.Controls.Add(pb);
}
[System.Runtime.InteropServices.DllImport("user32.dll")]
extern static bool DestroyIcon(IntPtr handle);
}

Just add the delete operation after the drag drop.
protected override void OnDragDrop(DragEventArgs e) {
var pb = new PictureBox {
Image = (Bitmap)e.Data.GetData(typeof(Bitmap))
};
pb.Size = pb.Image.Size;
pb.Location = PointToClient(new Point(e.X - pb.Width / 2, e.Y - pb.Height / 2));
Controls.Add(pb);
// deletion here: Controls.Remove(pictureBox1 or pb);
base.OnDragDrop(e);
}
If you wish to delete it somewhere else, you will need to declare a variable at class level, and assign it with 'pb'. Then you will can decide which one to delete given both pictureBox1 and pb.

Mouse event not working twice

I encounter a strange problem. I've got a canvas and drawed a complexe structure:
an Image inside a Grid inside a Border.
My Image is the one which is active for moving.
It works well the first time i drag my structure but the second time nothing works at all no exception but nothing works. It seems to me to be a problem of mouse capture but i can't catch what's about.
Here is my event code :
bool captured = false;
double x_shape, x_canvas, y_shape, y_canvas;
double x_shape_Origine, y_shape_Origine;
Border source = null;
int CountZ = 10;
private void shape_MoveButtonDown(object sender, MouseButtonEventArgs e)
{
/// AWFULLY SOURCE WAS null. I don't understand Why it was working the
/// first time
Mouse.Capture(source);
captured = true;
Image myImage = (Image)sender;
Grid outerGrid = (Grid)myImage.Parent;
source = (Border)outerGrid.Parent;
Canvas.SetZIndex(source, CountZ++);
x_shape = Canvas.GetLeft(source);
y_shape = Canvas.GetTop(source);
x_canvas = e.GetPosition(myCanvas).X;
y_canvas = e.GetPosition(myCanvas).Y;
}
private void shape_MoveMoving(object sender, MouseEventArgs e)
{
if (captured)
{
double x = e.GetPosition(myCanvas).X;
double y = e.GetPosition(myCanvas).Y;
x_shape += x - x_canvas;
Canvas.SetLeft(source, x_shape);
x_canvas = x;
y_shape += y - y_canvas;
Canvas.SetTop(source, y_shape);
y_canvas = y;
}
}
private void shape_MoveButtonUp(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(null);
captured = false;
}
private void shape_MouseEnter(object sender, MouseEventArgs e)
{
if (!captured)
{
Border inner = (Border)sender;
Grid parentInner = (Grid)inner.Parent;
parentInner.Children[0].Visibility = Visibility.Visible;
parentInner.Children[2].Visibility = Visibility.Visible;
parentInner.Children[5].Visibility = Visibility.Visible;
parentInner.Children[6].Visibility = Visibility.Visible;
parentInner.Children[8].Visibility = Visibility.Visible;
parentInner.Background = new SolidColorBrush(Colors.Red);
}
}
private void shape_MouseLeave(object sender, MouseEventArgs e)
{
if (!captured)
{
Grid outer = (Grid)sender;
outer.Children[0].Visibility = Visibility.Hidden;
outer.Children[2].Visibility = Visibility.Hidden;
outer.Children[5].Visibility = Visibility.Hidden;
outer.Children[6].Visibility = Visibility.Hidden;
outer.Children[8].Visibility = Visibility.Hidden;
outer.Background = null;
}
}
Hope it will make sense for you

I had a complete sample for D&D with WPF and Silverlight. Here full code, hope it helps.
class MyWnd : Window
{
public MyWnd()
{
var c = new Canvas();
c.Background = new SolidColorBrush(Colors.White);
var rect = new Rectangle { Fill = new SolidColorBrush(Colors.Red), Width = 20, Height = 20 };
c.Children.Add(rect);
this.Content = c;
Canvas.SetLeft(rect, 0);
Canvas.SetTop(rect, 0);
rect.MouseLeftButtonDown+=Handle_MouseDown;
rect.MouseLeftButtonUp+=Handle_MouseUp;
rect.MouseMove+=Handle_MouseMove;
}
bool isMouseCaptured;
double mouseVerticalPosition;
double mouseHorizontalPosition;
public void Handle_MouseDown(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
mouseVerticalPosition = args.GetPosition(null).Y;
mouseHorizontalPosition = args.GetPosition(null).X;
isMouseCaptured = true;
item.CaptureMouse();
}
public void Handle_MouseMove(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
if (isMouseCaptured)
{
// Calculate the current position of the object.
double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;
double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);
// Set new position of object.
item.SetValue(Canvas.TopProperty, newTop);
item.SetValue(Canvas.LeftProperty, newLeft);
// Update position global variables.
mouseVerticalPosition = args.GetPosition(null).Y;
mouseHorizontalPosition = args.GetPosition(null).X;
}
}
public void Handle_MouseUp(object sender, MouseEventArgs args)
{
var item = sender as FrameworkElement;
isMouseCaptured = false;
item.ReleaseMouseCapture();
mouseVerticalPosition = -1;
mouseHorizontalPosition = -1;
}
}
void Main()
{
var wnd = new MyWnd();
wnd.ShowDialog();
}

C# drag controls around a panel

i am developing a system which allow user to drag objects around within a same panel, i went through some research and founds that i should use mouse events like mouse_up, mouse_down and mouse_move.
The the program will generate 3 picturebox and allow the user to drag around the every picturebox within the panel, but the program i code did not work perfectly as when i drag over a picturebox, the picturebox will move, but not according to my mouse cursor location, it is somewhere else, besides, when dragging, there is picturebox shadows in the panel, i've tried those update(),refresh(), and invalidate() but it seems not useful for me. Below are my codes, thanks for helping
public partial class Form1 : Form
{
List<PictureBox> pictureBoxList = new List<PictureBox>();
private bool isDragging = false;
public Form1()
{
InitializeComponent();
for (int i = 0; i < 3; i++)
{
PictureBox picture = new PictureBox
{
Name = "pictureBox" + i,
Size = new Size(20, 20),
Location = new Point(i * 40, i * 40),
BorderStyle = BorderStyle.FixedSingle,
SizeMode = PictureBoxSizeMode.Zoom,
ImageLocation = "A.jpg"
};
pictureBoxList.Add(picture);
foreach (PictureBox p in pictureBoxList)
{
p.MouseDown += new MouseEventHandler(c_MouseDown);
p.MouseMove += new MouseEventHandler(c_MouseMove);
p.MouseUp += new MouseEventHandler(c_MouseUp);
pnlDisplayImage.Controls.Add(p);
pnlDisplayImage.Refresh();
}
}
}
void c_MouseDown(object sender, MouseEventArgs e)
{
isDragging = true;
}
void c_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging == true) {
Control c = sender as Control;
for (int i = 0; i < pictureBoxList.Count(); i++)
{
if (c.Equals(pictureBoxList[i]))
{
pictureBoxList[i].Location = new Point(e.X, e.Y);
}
}
}
}
void c_MouseUp(object sender, MouseEventArgs e)
{
PictureBox c = sender as PictureBox;
isDragging = false;
for (int i = 0; i < pictureBoxList.Count(); i++) {
if (c.Equals(pictureBoxList[i])){
pictureBoxList[i].Location = new Point(e.X, e.Y);
}
}
}
private void pnlDisplayImage_Paint(object sender, PaintEventArgs e)
{
foreach (PictureBox p in pictureBoxList)
{
pnlDisplayImage.Controls.Add(p);
}
}
}

Finally I've found what are the problems that caused my program not running as my expectations. The main problem is that I accidentally put the foreach loop inside the for loop which I used to create pictureBox, this problem caused the pictureBox comes out some shadows effect while dragging during run time due to there are few same pictureBox. Also, I have change a little bit of the codes and it now run as what I expected. Below are the code that I want for answer.
public partial class Form1 : Form
{
List<PictureBox> pictureBoxList = new List<PictureBox>();
private bool isDragging = false;
Point move;
public Form1()
{
InitializeComponent();
for (int i = 0; i < 3; i++)
{
PictureBox picture = new PictureBox
{
Name = "pictureBox" + i,
Size = new Size(20, 20),
Location = new Point(i * 40, i * 40),
BorderStyle = BorderStyle.FixedSingle,
SizeMode = PictureBoxSizeMode.Zoom,
ImageLocation = "A.jpg"
};
pictureBoxList.Add(picture);
}
foreach (PictureBox p in pictureBoxList)
{
p.MouseDown += new MouseEventHandler(c_MouseDown);
p.MouseMove += new MouseEventHandler(c_MouseMove);
p.MouseUp += new MouseEventHandler(c_MouseUp);
pnlDisplayImage.Controls.Add(p);
pnlDisplayImage.Refresh();
}
}
void c_MouseDown(object sender, MouseEventArgs e)
{
Control c = sender as Control;
isDragging = true;
move = e.Location;
}
void c_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging == true) {
Control c = sender as Control;
for (int i = 0; i < pictureBoxList.Count(); i++)
{
if (c.Equals(pictureBoxList[i]))
{
pictureBoxList[i].Left += e.X - move.X;
pictureBoxList[i].Top += e.Y - move.Y;
}
}
}
}
void c_MouseUp(object sender, MouseEventArgs e)
{
isDragging = false;
}
}

Try something like (it's custom control with overrides, but should be easy to convert to events):
private bool _isMoved = false; // true if move mode on
private Point _pointMove = new Point(0); // for moving
protected override void OnMouseDown(MouseEventArgs e)
{
// if left button pressed
if(e.Button == MouseButtons.Left)
{
_pointMove.X = e.X;
_pointMove.Y = e.Y;
_isMoved = true;
Cursor = Cursors.SizeAll;
Capture = true;
}
base.OnMouseDown (e);
}
protected override void OnMouseUp(MouseEventArgs e)
{
// if move mode on
if(_isMoved)
{
_isMoved = false;
Cursor = Cursors.Default;
Capture = false;
}
base.OnMouseUp (e);
}
protected override void OnMouseMove(MouseEventArgs e)
{
// if move mode on
if (_isMoved)
{
Left += e.X - _pointMove.X;
Top += e.Y - _pointMove.Y;
}
base.OnMouseMove (e);
}

WPF C# PreviewDrop/Drop event not fired ( With dragadorner)

I assume that previewdrop/drop events fired when it detect a drag target with an element as a drop target . In this case , my drop target is a textbox and my drag target is a label. Both of them are dynamically created from DB . I am using DragAdorner to clone the element that i am dragging , before implementing the DragAdorner , my DnD works well but after i use the dragadorner , it won't work . And i notice my previewdrop event is not firing when i try to debug .
Here are my codes :
tbox.Drop += new DragEventHandler(tbox_PreviewDrop); // text box , Drop Target
tbox.DragOver += new DragEventHandler(tbox_DragOver);
Label lbl = new Label(); // Label , Drag Target
lbl.Content = s;
lbl.Width = Double.NaN;
lbl.Height = 40;
lbl.FontSize = 19;
lbl.PreviewMouseDown += new MouseButtonEventHandler(lbl_MouseDown);
lbl.PreviewMouseMove += new MouseEventHandler(lbl_MouseMove);
lbl.PreviewGiveFeedback += new GiveFeedbackEventHandler(lbl_GiveFeedback);
private void lbl_MouseDown(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(this);
// Mouse.OverrideCursor = Cursors.None;
}
private void lbl_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
// Mouse.OverrideCursor = Cursors.None;
var source = sender as UIElement;
Label lbl = sender as Label;
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(lbl, e.GetPosition(lbl));
AdornerLayer.GetAdornerLayer(lbl).Add(adorner);
var dragData = new DataObject(this);
DragDrop.DoDragDrop(source, dragData, DragDropEffects.Copy);
AdornerLayer.GetAdornerLayer(lbl).Remove(adorner);
}
startPoint = current;
}
}
private void lbl_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{
if (adorner != null)
{
Label lbl = sender as Label;
var pos = lbl.PointFromScreen(GetMousePosition());
adorner.UpdatePosition(pos);
e.Handled = true;
}
}
private void tbox_PreviewDrop(object sender, DragEventArgs e)
{
(sender as TextBox).Text = string.Empty; // Empty the textbox from previous answer.
(sender as TextBox).Background = Brushes.White;
e.Effects = DragDropEffects.Move;
e.Handled = true;
}
private void tbox_DragOver(object sender, DragEventArgs e)
{
e.Handled = true;
e.Effects = DragDropEffects.Move;
}
[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);
}
private Point startPoint;
private DragAdorner adorner;
And the adorner class file :
public class DragAdorner : Adorner {
public DragAdorner(UIElement adornedElement, Point offset)
: base(adornedElement) {
this.offset = offset;
vbrush = new VisualBrush(AdornedElement);
//vbrush.Opacity = .7;
}
public void UpdatePosition(Point location) {
this.location = location;
this.InvalidateVisual();
}
protected override void OnRender(DrawingContext dc) {
var p = location;
p.Offset(-offset.X, -offset.Y);
dc.DrawRectangle(vbrush, null, new Rect(p, this.RenderSize));
}
private Brush vbrush;
private Point location;
private Point offset;
}
I seen http://www.adorkable.us/books/wpf_control_development.pdf ( page 103 ) but its way too complicated for me as i am a newbie .
It is because of my GiveFeedBack event that is in conflict with other events?

Since your DragAdorner is always under your cursor, it will be the object receiving the drop. If you set IsHitTestVisible = false; in the constructor for the Adorner, it should fix this.
Even though you haven't set AllowDrop on the Adorner, since it is under the cursor, it will intercept the drop attempt. But since it doesn't accept drop, it will just cancel it.
Update
The other issue is that you are setting the allowed effects in your drag operation to DragDropEffects.Copy, but in the DragOver and Drop handlers, you're trying to do a DragDropEffects.Move. This won't work, as those are not the same operation. These must match. If you want to enable both operations on drag, you can specify both with a bitwise or:
DragDrop.DoDragDrop(source, dragData, DragDropEffects.Copy | DragDropEffects.Move);
Update 2
If you want to drop anything other than a string onto a TextBox, you have to use the PreviewDrop and PreviewDragOver events. Otherwise, the TextBox's default handling will ignore anything else. So it would look like this:
tbox.PreviewDrop += new DragEventHandler(tbox_PreviewDrop);
tbox.PreviewDragOver += new DragEventHandler(tbox_DragOver);

Try setting background color for your label and see if it will work properly.