前台代码部分
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Background="AliceBlue">
<Border Height="40" Background="Chocolate" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">拖拽</TextBlock>
</Border>
</StackPanel>
<Canvas x:Name="canvas" Grid.Column="1" Drop="Canvas_Drop" AllowDrop="True" Background="Transparent"/>
</Grid>
这里有个几个注意的地方:
1 cavar是拖拽的放置对象,需要设置如下:
- Drop事件,拖拽完成时触发
- AllowDrop, 允许拖拽
- Background,设置一个颜色,不然无法接收到事件。
三者缺一不可。
后台代码部分
Border 是被拖拽的对象,在鼠标左键按下后,需要在后台添加一些代码。
private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Border border = (Border)sender;
DragDrop.DoDragDrop(border, "test", DragDropEffects.Copy);
}
这是一个创建拖拽对象的过程。 后续可以在拖拽事件中获取相应的参数:
private void Canvas_Drop(object sender, DragEventArgs e)
{
var data = e.Data.GetData(typeof(string));
Button btn = new Button();
btn.Content = data;
canvas.Children.Add(btn);
var point = e.GetPosition(canvas);
Canvas.SetLeft(btn, point.X);
Canvas.SetTop(btn, point.Y);
Debug.WriteLine("Canvas_Drop");
}
e.Data.GetData(typeof(string)); 获取的是我创建拖拽对象时,传入的第二个参数。
e.GetPosition(canvas); 可以获取拖拽完成时,鼠标相对于canvas的位置坐标!
效果展示