C＃在Canvas中拖放图像 [英] C# Drag and Drop Image within Canvas

问题描述

我尝试过谷歌如何拖拉在Canvas上为UIElements添加，但找不到任何我想要的东西。

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

我有一个带有Window的C＃WPF应用程序。在窗口内，我有一个画布，我可以添加图像。
我想要的是能够拖放拖放图像，同时留在画布边框内。
我也希望这是在代码中，所以不要在xaml。

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.

我在这个功能里添加/更新图片到画布。 TODO应该被替换为Drag&删除事件

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：虽然这是为了以后，如果有人有代码一次拖放多个图像，额外的奖金，我会很感激。

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.

提前感谢帮助。

推荐答案

使用以下代码修复了我的问题：

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. 修正了当我将鼠标拖动到快速位置时，鼠标滑过图像的一个小错误。这种情况经常发生，即使我甚至没有将拖动图像移动到这个快速的位置。


2. 使其能够一次性拖放多个图像通过选择多个第一，然后拖放它们，同时留在画布内。

将创建一个新的这个问题。

Will make a new Question for this.

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