如何使用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;
    }
}