如何使用C＃在WPF中在画布内拖放图像

Question

我能够将图像作为子元素动态添加到WPF Canvas控件中，但是无法将这些图像拖放到画布中。 请帮助我，如何在画布窗口内移动或拖放图像。

提前致谢。

以下是我到目前为止所做的事情：

<Canvas x:Name="canvasImages" Height="325" Margin="0,0,0,0" Width="430" 
HorizontalAlignment="Left" VerticalAlignment="Top" AllowDrop="True" 
PreviewMouseLeftButtonDown="MouseLeftButtonDown" 
PreviewMouseLeftButtonUp="MouseLeftButtonUp" 
PreviewMouseMove="MouseMove" 
MaxWidth="430" MaxHeight="325" 
ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</Grid>

**Code**
OpenFileDialog op = new OpenFileDialog();
op.Title = "Select Multiple Pictures";
op.Multiselect = true;
op.Filter = "Image files (*.jpg, *.jpeg, *.jpe, *.jfif, *.png) | 
*.jpg; *.jpeg; *.jpe; *.jfif; *.png";

foreach (string imageFile in op.FileNames)
{
 Image img = new Image();
 img.Source = new BitmapImage(new Uri(imageFile));
 img.Height = 100;
 img.Width = 100;
 img.AllowDrop = true;
 Canvas.SetTop(img, y); //Setting up images to the Top position
 Canvas.SetLeft(img, x); //Setting up images to the left position
 canvasImages.Children.Add(img);
}

private new void MouseLeftButtonDown(object sender, 
MouseButtonEventArgs 
e)
 {
  IsDragging = true;
  draggedItem = (UIElement)sender;
  itemRelativePosition = e.GetPosition(draggedItem);
}

private new void MouseMove(object sender, 
System.Windows.Input.MouseEventArgs e)
{
 if (!IsDragging)
     return;
 Point canvasRelativePosition = e.GetPosition(canvasImages);
 Canvas.SetTop(draggedItem, canvasRelativePosition.Y - 
 itemRelativePosition.Y);
 Canvas.SetLeft(draggedItem, canvasRelativePosition.X - 
 itemRelativePosition.X);
}

private new void MouseLeftButtonUp(object sender, MouseButtonEventArgs  
e)
{
   if (!IsDragging)
     return;
   IsDragging = false;
}

Answer 1

@Mark，这是XAML代码和您细读的相应类。 基本上，我可以通过“ OpenFileDialog（）”来选择图像，然后将这些图像动态添加到Canvas控件中，如我之前的代码所述，然后我无法在Canvas控件内部内部拖动这些图像。

以下是XAML代码

<Window x:Class="PicturesMovement.CanvasControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Connectlite Clients" 
    Height="394" Width="445"
    WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
   <Grid Margin="0,0,2,0" Background="{DynamicResource {x:Static                  
     SystemColors.MenuBarBrushKey}}">
    <Button x:Name="Select" Content="Select" HorizontalAlignment="Left" 
     Height="22"  Margin="329,328,0,0" VerticalAlignment="Top" Width="42"                       
     Click="SelectImages"/>
    <Button x:Name="Cancel" Content="Cancel" HorizontalAlignment="Left"                       
     Margin="374,328,0,0" VerticalAlignment="Top" Width="49" 
     Click="closeBox"/>
    <Canvas x:Name="canvasImages" Height="325" Margin="0,0,0,0" 
      Width="430" HorizontalAlignment="Left" VerticalAlignment="Top" 
       AllowDrop="True"  PreviewMouseDown="PreviewMouseDown" 
         PreviewMouseUp="PreviewMouseUp"                     
         PreviewMouseMove="PreviewMouseMove" MaxWidth="430" 
        MaxHeight="325"                    
        ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</Grid>
</Window>

以下是触发这些鼠标事件的相应类

public partial class CanvasControl : System.Windows.Window,          
         System.Windows.Markup.IComponentConnector {

   this.canvasImages.PreviewMouseDown += new                       
   System.Windows.Input.MouseButtonEventHandler 
    (this.PreviewMouseDown);

   this.canvasImages.PreviewMouseUp += new                   
    System.Windows.Input.MouseButtonEventHandler 
       (this.PreviewMouseUp);

   this.canvasImages.PreviewMouseMove += new 
    System.Windows.Input.MouseEventHandler        
        (this.PreviewMouseMove);
}

任何建议将不胜感激...谢谢

Answer 2

好的，这里有些错误...

1）您的鼠标按下处理程序必须在图像上，而不是在画布上，否则您的代码无法知道要拖动的项目。

2）单击图像后，处理程序应捕获画布的鼠标，以便获得所有鼠标移动消息。

3）然后需要相应地处理Canvas MouseMove和MouseUp处理程序。

4）画布需要有背景。 如果您不提供背景知识，那么它对点击测试实际上是透明的，并且您不会收到鼠标消息。 如果您不希望它有可见的背景，请将其设置为Transparent 。

因此，您的Canvas标签需要如下所示：

<Canvas x:Name="canvasImages" Height="325" Margin="0,0,0,0" Width="430" 
    HorizontalAlignment="Left" VerticalAlignment="Top" AllowDrop="True" 
    PreviewMouseLeftButtonUp="CanvasImages_PreviewMouseLeftButtonUp" 
    PreviewMouseMove="CanvasImages_PreviewMouseMove" 
    MaxWidth="430" MaxHeight="325" 
    ScrollViewer.HorizontalScrollBarVisibility="Visible"
    Background="Transparent" />

并且您创建的每个图像都需要为其MouseDown事件设置一个处理程序：

img.MouseLeftButtonDown += Img_MouseLeftButtonDown;

然后，只需实现这样的处理程序即可：

private void Img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.draggedItem = (UIElement)sender;
    itemRelativePosition = e.GetPosition(this.draggedItem);
    e.Handled = true;
}

private void CanvasImages_PreviewMouseMove(object sender, MouseEventArgs e)
{
    if (this.draggedItem == null)
        return;
    var newPos = e.GetPosition(canvasImages) - itemRelativePosition;
    Canvas.SetTop(this.draggedItem, newPos.Y);
    Canvas.SetLeft(this.draggedItem, newPos.X);
    canvasImages.CaptureMouse();
    e.Handled = true;
}

private void CanvasImages_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (this.draggedItem != null)
    {
        this.draggedItem = null;
        canvasImages.ReleaseMouseCapture();
        e.Handled = true;
    }
}