C# 在 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 中拖放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！