当前位置：网站首页>【wpf】拖拽的简单实现

【wpf】拖拽的简单实现

2022-08-10 00:54:00 【code bean】

前台代码部分

<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的位置坐标！