WPF实现拖动控件功能（类似从工具箱拖出工具）

两仪风2024-03-18 16:13

一、背景

下面代码只是简单示例，未使用MVVM模式编写

二、工具箱（ListBox）

2.1 前端代码

复制代码

<!-- 工具箱 -->
<ListBox Grid.Column="0" x:Name="Toolbox">
    <ListBoxItem>Tool 1</ListBoxItem>
    <ListBoxItem>Tool 2</ListBoxItem>
    <!-- 添加更多工具 -->
</ListBox>

2.2 前端事件

复制代码

<Window.Resources>
    <Style TargetType="ListBoxItem">
        <EventSetter Event="PreviewMouseMove" Handler="ListBoxItem_PreviewMouseMove"/>
    </Style>
</Window.Resources>

2.2 后端拖动代码

cs 复制代码

private void ListBoxItem_PreviewMouseMove(object sender, MouseEventArgs e)
{
    if(sender is ListBoxItem item)
    {
        DragDrop.DoDragDrop(item, item.Content, DragDropEffects.Copy);
    }        
}

三、工作页面（Canvas）

3.1 前端代码

cs 复制代码

<!-- 流程图容器 -->
<Canvas Grid.Column="1" x:Name="FlowChartCanvas" Background="White" AllowDrop="True" PreviewDragOver="FlowChartCanvas_PreviewDragOver" PreviewDrop="FlowChartCanvas_PreviewDrop">
    <!-- 流程图元素 -->
</Canvas>

3.2 后端获取工具放置坐标

cs 复制代码

private Point startPoint;


private void FlowChartCanvas_PreviewDragOver(object sender, DragEventArgs e)
{
        startPoint = e.GetPosition(FlowChartCanvas);        
}

3.3 后端放置工具

cs 复制代码

private void FlowChartCanvas_PreviewDrop(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(DataFormats.StringFormat))
    {
        var tool = e.Data.GetData(DataFormats.StringFormat) as string;
        if (tool != null)
        {
            var element = new TextBlock
            {
                Text = tool,
                Background = Brushes.LightBlue,
                Width = 100,
                Height = 30
            };
            Canvas.SetLeft(element, startPoint.X);
            Canvas.SetTop(element, startPoint.Y);
            FlowChartCanvas.Children.Add(element);
        }
    }
}