一、背景
下面代码只是简单示例,未使用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 后端拖动代码
private void ListBoxItem_PreviewMouseMove(object sender, MouseEventArgs e)
{
if(sender is ListBoxItem item)
{
DragDrop.DoDragDrop(item, item.Content, DragDropEffects.Copy);
}
}
三、工作页面(Canvas)
3.1 前端代码
<!-- 流程图容器 -->
<Canvas Grid.Column="1" x:Name="FlowChartCanvas" Background="White" AllowDrop="True" PreviewDragOver="FlowChartCanvas_PreviewDragOver" PreviewDrop="FlowChartCanvas_PreviewDrop">
<!-- 流程图元素 -->
</Canvas>
3.2 后端获取工具放置坐标
private Point startPoint;
private void FlowChartCanvas_PreviewDragOver(object sender, DragEventArgs e)
{
startPoint = e.GetPosition(FlowChartCanvas);
}
3.3 后端放置工具
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);
}
}
}