将项目从“列表框”拖放，然后将方法放入特定的“画布”中

I am quite new to C# so please keep things as simple as possible. My problem is as follows: I have a Listbox to which I add Items dynamically at runtime and I also have four different Canvases within my UI. Now the user has to be able to drag any Item from the Listbox and drop it into one of the four Canvases. Upon drop a method will be started which needs to know which Item has been draged and into which Canvas it was dropped.

我对C＃很陌生，所以请尽量保持简单。我的问题如下：我有一个Listbox，我在运行时动态添加Items，我的UI中也有四个不同的画布。现在，用户必须能够从列表框中拖动任何项目并将其放入四个画布中的一个。在删除时，将启动一个方法，该方法需要知道哪个项目已经被拖动以及哪个项目被删除。

I have not implemented anything yet but here at least my XAML:

我还没有实现任何东西，但至少在这里我的XAML：

<Grid Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="gridMenu" VerticalAlignment="Stretch" Width="Auto" Background="#FFE6E6E6">
     <ListBox Grid.Row="2" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="listBox1" VerticalAlignment="Stretch" Width="Auto" Background="#FFE6E6E6" BorderBrush="{x:Null}" Panel.ZIndex="1" PreviewMouseDown="listBox1_PreviewMouseLeftButtonDown">
        <ListBoxItem Content="test1" />
        <ListBoxItem Content="test2" />
        <ListBoxItem Content="test3" />
        <ListBoxItem Content="test4" />
        <ListBoxItem Content="test5" />
    </ListBox>
</Grid>
<Grid Grid.Column="1" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="gridImage" VerticalAlignment="Stretch" Width="Auto" TextBlock.Drop="grid1_Drop">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
        <Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage1" VerticalAlignment="Stretch" Width="Auto" />
        <Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage2" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" />
        <Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage3" VerticalAlignment="Stretch" Width="Auto" Grid.Row="1" />
        <Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage4" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" Grid.Row="1" />
</Grid>

2 个解决方案

#1

I think Drag and Drop isn't an easy topic, so I am afraid I can't make it that simple and I agree with ekholm: You will definitely need a decent c#/wpf knowledge to succesfully implement this. Even when you get your code to run you will be stuck when you want to modify/extend your DragDrop Code.

我认为Drag and Drop不是一个简单的话题，所以我担心我不能那么简单，我同意ekholm：你肯定需要一个体面的c＃/ wpf知识才能成功实现这一点。即使您运行代码，当您想要修改/扩展DragDrop代码时，也会遇到困难。

Here's an example to get you started based on your provided markup:

以下是根据您提供的标记开始使用的示例：

XAML:

XAML：

    <Grid Grid.Row="1" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="gridImage" VerticalAlignment="Stretch" Width="Auto">
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

      <Canvas Background="LightGreen" AllowDrop="True" Drop="canvasImage_Drop" DragEnter="canvasImage_DragEnter" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage1" VerticalAlignment="Stretch" Width="Auto" />

      <Canvas Background="LightYellow" AllowDrop="True" Drop="canvasImage_Drop" DragEnter="canvasImage_DragEnter"  Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage2" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" />

      <Canvas Background="LightPink" AllowDrop="True" Drop="canvasImage_Drop" DragEnter="canvasImage_DragEnter"  Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage3" VerticalAlignment="Stretch" Width="Auto" Grid.Row="1" />

      <Canvas Background="LightSteelBlue" AllowDrop="True" Drop="canvasImage_Drop" DragEnter="canvasImage_DragEnter"  Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage4" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" Grid.Row="1" />
    </Grid>
  </Grid>

Code behind:

代码背后：

private Point _startPoint;
private static readonly string _dropIdentifier = "dropIdentifier";

private void listBox_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  // The initial mouse position
  _startPoint = e.GetPosition(null);
}

private void listBox_PreviewMouseMove(object sender, MouseEventArgs e)
{
  // Get the current mouse position
  Point mousePos = e.GetPosition(null);
  Vector diff = _startPoint - mousePos;

  if (e.LeftButton == MouseButtonState.Pressed &&
      (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
      Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
  {
    // Get the dragged ListBoxItem
    var listBox = sender as ListBox;
    var listBoxItem = listBox.SelectedItem;

    // Initialize the drag & drop operation
    DataObject dragData = new DataObject(_dropIdentifier, listBoxItem);
    DragDrop.DoDragDrop(listBox, dragData, DragDropEffects.Move);
  } 
}

private void canvasImage_Drop(object sender, DragEventArgs e)
{
  if (e.Data.GetDataPresent(_dropIdentifier))
  {
    var item = e.Data.GetData(_dropIdentifier) as ListBoxItem;
    DropOnCanvas(sender as Canvas, item);
  }
}

private void canvasImage_DragEnter(object sender, DragEventArgs e)
{
  if (!e.Data.GetDataPresent(_dropIdentifier) ||
    sender == e.Source)
  {
    e.Effects = DragDropEffects.None;
  }
}

public void DropOnCanvas(Canvas targetCanvas, ListBoxItem item)
{
  // do your stuff here ...
  int textHeight = 20;
  var text = new TextBlock() { Text = item.Content.ToString(), Height = textHeight };
  Canvas.SetTop(text, targetCanvas.Children.Count * textHeight);
  targetCanvas.Children.Add(text);
}

#2

This tutorial should get you started: http://wpftutorial.net/DragAndDrop.html

本教程可以帮助您入门：http：//wpftutorial.net/DragAndDrop.html

#1