C＃中拖放图片内的画布 [英] C# Drag and Drop Image within Canvas

问题描述

我试图谷歌如何使拖放放大器;放弃对在Canvas UI元素，但无法找到任何东西，我要找的。

我有一个窗口一个C＃WPF应用程序。在窗口中我有一个画布，我可以添加图像。
我想要的是能够拖放放大器;掉落的图像，而画布境内停留。
我也希望这是代码，因此无法在XAML。

我在功能上得到了这个，我添加/更新图片到Canvas 。在TODO的应更换为拖放放大器; 。丢弃事件

 图片IMG = ImageList的[I]在图像配; 
 img.Name =形象+我; 
 
 // TODO：拖放事件的图像
 
 // TODO：检查左侧和顶部帆布内（减去宽/图像高度）
 
 Canvas.SetLeft（IMG，左）; //默认的左把图象= 0 
 Canvas.SetTop时（IMG，顶部）; //默认顶部添加图像= 0 
 
 MyCanvas.Children.Add（IMG）时; 
 OnPropertyChanged（MyCanvas）; 
  

PS：虽然这是为以后，如果有人有代码，拖一次为降多张图片一个额外的奖金，我将不胜感激。

在您的帮助感谢。

解决方案

固定我的问题下面，使用下面的代码：

  img.AllowDrop = TRUE; 
 img.PreviewMouseLeftButtonDown + = this.MouseLeftButtonDown; 
 img.PreviewMouseMove + = this.MouseMove; 
 img.PreviewMouseLeftButtonUp + = this.PreviewMouseLeftButtonUp; 
 
 
私有对象movingObject; 
私人双firstXPos，firstYPos; 
私人无效的MouseLeftButtonDown（对象发件人，MouseButtonEventArgs E）{
 //在这种情况下，我们得到了控制当前鼠标位置的MouseMove事件中使用它。 
图片IMG =发件人为图像; 
帆布油画= img.Parent帆布; 
 
 firstXPos = e.GetPosition（IMG）.X; 
 firstYPos = e.GetPosition（IMG）.Y; 
 
 movingObject =发送; 
 
 //将当前正在对其他的顶拖图像
 INT顶部= Canvas.GetZIndex（IMG）; 
的foreach（图片孩子canvas.Children）
如果（顶部< Canvas.GetZIndex（子））
顶部= Canvas.GetZIndex（孩子）; 
 Canvas.SetZIndex（IMG，顶+ 1）; 
} 
私人无效的PreviewMouseLeftButtonUp（对象发件人，MouseButtonEventArgs E）{
图片IMG =发件人为图像; 
帆布油画= img.Parent帆布; 
 
 movingObject = NULL; 
 
 //将当前正在对其他的顶拖图像
 INT顶部= Canvas.GetZIndex（IMG）; 
的foreach（图片孩子canvas.Children）
如果（顶部> Canvas.GetZIndex（子））
顶部= Canvas.GetZIndex（孩子）; 
 Canvas.SetZIndex（IMG，顶+ 1）; 
} 
私人无效的MouseMove（对象发件人，MouseEventArgs E）{
如果（e.LeftButton == MouseButtonState.Pressed&放大器;&放大器;发送== movingObject）{
图像img， =发件人为图像; 
帆布油画= img.Parent帆布; 
 
双newLeft = e.GetPosition（画布）.X  -  firstXPos  -  canvas.Margin.Left; 
 // newLeft内帆布权边界？ 
如果（newLeft> canvas.Margin.Left + canvas.ActualWidth  -  img.ActualWidth）
 newLeft = canvas.Margin.Left + canvas.ActualWidth  -  img.ActualWidth; 
 // newLeft左边内边界印刷品吗？ 
否则如果（newLeft< canvas.Margin.Left）
 newLeft = canvas.Margin.Left; 
 img.SetValue（Canvas.LeftProperty，newLeft）; 
 
双newTop = e.GetPosition（画布）.Y  -  firstYPos  -  canvas.Margin.Top; 
 // newTop内帆布底部边框？ 
如果（newTop> canvas.Margin.Top + canvas.ActualHeight  -  img.ActualHeight）
 newTop = canvas.Margin.Top + canvas.ActualHeight  -  img.ActualHeight; 
 // newTop帆布顶边框内？ 
否则如果（newTop< canvas.Margin.Top）
 newTop = canvas.Margin.Top; 
 img.SetValue（Canvas.TopProperty，newTop）; 
} 
} 
  

这个代码让我可以拖动和删除。Canvas中的图像，而无需离开画布本身

现在我只需要能够做两件事：

1. 修正一个小错误在我的形象的鼠标滑动时，我拖累他们身边快速。这种情况经常，甚至当我还没有移动拖动图像周围那么快.. 的通过使用我的其他问题中提到的解决方案修正。


2. 使得它能够拖动和拖放一次多张图片，最好首先选择多，然后拖动和放下一大堆人，同时保持Canvas中。

将作出新的质疑这一点。

I tried to Google how to make drag & drop for UIElements on a Canvas, but couldn't find anything that I'm looking for.

I got a C# WPF application with a Window. Inside the Window I got a Canvas where I can add Images to. What I want is to be able to Drag & Drop the Images, while staying within the Canvas' borders. I also want this to be in code, so not in the xaml.

I got this in the function where I add/update the Images to the Canvas. The TODO's should be replaced for the Drag & Drop events.

Image img = ImageList[i].Image;
img.Name = "Image" + i;

// TODO: Drag and Drop event for Image

// TODO: Check if Left and Top are within Canvas (minus width / height of Image) 

Canvas.SetLeft(img, Left); // Default Left when adding the image = 0
Canvas.SetTop(img, Top); // Default Top when adding the image = 0

MyCanvas.Children.Add(img);
OnPropertyChanged("MyCanvas");

PS: Though this is for later, if someone has code to drag and drop multiple images at once as an additional bonus, I would appreciate it.

Thanks in advance for the help.

解决方案

Fixed my problem below, by using the following code:

img.AllowDrop = true;
img.PreviewMouseLeftButtonDown += this.MouseLeftButtonDown;
img.PreviewMouseMove += this.MouseMove;
img.PreviewMouseLeftButtonUp += this.PreviewMouseLeftButtonUp;


private object movingObject;
private double firstXPos, firstYPos;
private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
    // In this event, we get the current mouse position on the control to use it in the MouseMove event.
    Image img = sender as Image;
    Canvas canvas = img.Parent as Canvas;

    firstXPos = e.GetPosition(img).X;
    firstYPos = e.GetPosition(img).Y;

    movingObject = sender;

    // Put the image currently being dragged on top of the others
    int top = Canvas.GetZIndex(img);
    foreach (Image child in canvas.Children)
        if (top < Canvas.GetZIndex(child))
            top = Canvas.GetZIndex(child);
    Canvas.SetZIndex(img, top + 1);
}
private void PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
    Image img = sender as Image;
    Canvas canvas = img.Parent as Canvas;

    movingObject = null;

    // Put the image currently being dragged on top of the others
    int top = Canvas.GetZIndex(img);
    foreach (Image child in canvas.Children)
        if (top > Canvas.GetZIndex(child))
            top = Canvas.GetZIndex(child);
    Canvas.SetZIndex(img, top + 1);
}
private void MouseMove(object sender, MouseEventArgs e) {
    if (e.LeftButton == MouseButtonState.Pressed && sender == movingObject) {
        Image img = sender as Image;
        Canvas canvas = img.Parent as Canvas;

        double newLeft = e.GetPosition(canvas).X - firstXPos - canvas.Margin.Left;
        // newLeft inside canvas right-border?
        if (newLeft > canvas.Margin.Left + canvas.ActualWidth - img.ActualWidth)
            newLeft = canvas.Margin.Left + canvas.ActualWidth - img.ActualWidth;
        // newLeft inside canvas left-border?
        else if (newLeft < canvas.Margin.Left)
            newLeft = canvas.Margin.Left;
        img.SetValue(Canvas.LeftProperty, newLeft);

        double newTop = e.GetPosition(canvas).Y - firstYPos - canvas.Margin.Top;
        // newTop inside canvas bottom-border?
        if (newTop > canvas.Margin.Top + canvas.ActualHeight - img.ActualHeight)
            newTop = canvas.Margin.Top + canvas.ActualHeight - img.ActualHeight;
        // newTop inside canvas top-border?
        else if (newTop < canvas.Margin.Top)
            newTop = canvas.Margin.Top;
        img.SetValue(Canvas.TopProperty, newTop);
    }
}

This code allows me to drag-and-drop the Images inside the Canvas, without leaving the Canvas itself.

Now I just need to be able to do two more things:

1. Fix a little bug where my Mouse slips of the Image when I drag them around to fast. This happens quite often, even when I'm not even moving the dragging image around THAT fast.. Fixed by using the solution mentioned in my other question.
2. Making it able to drag-and-drop multiple images at once, preferably by selecting multiple first, and then drag-and-drop the whole bunch of them while staying inside the Canvas.

Will make a new Question for this.

这篇关于C＃中拖放图片内的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！