多边形自动调整到其上面的多边形

Question

我正在制作具有拖放功能的Windows桌面应用程序.我正在使用Polygon(和后面的图像)形状进行拖放.拖放功能工作正常,但我希望如果用户从面板拖动任何形状,当他拖动其他形状,然后第二个形状自动修复第一个形状.你可以通过下面的截图来了解它.

这是我在拖动形状时会发生什么的屏幕截图

当用户将多边形放在另一个多边形附近时,如果相同的多边形在画布的其他区域中下降而不是错误将向用户显示,则它将自动调整.

这是我的XAML代码

<Window x:Class="Images.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Images"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            MinWidth="400"
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Left" 
                Width="350" 
                Background="Aqua"
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <WrapPanel Margin="0,10,0,0" VerticalAlignment="Top">
                    <Button Name="control" Content="Control" Height="30" Background="BlueViolet" Margin="5" Width="100"/>
                    <Button Name="motion" Content="Motion" Width="100" Margin="5" Background="Green" Height="30"/>
                    <Button Name="variable" Content="Variable" Width="100" Margin="5" Background="SeaGreen" Height="30"/>
                    <Button Name="sensor" Content="Sensor" Width="100" Margin="5" Background="OrangeRed" Height="30"/>
                    <Button Name="lcd" Content="LCD" Width="100" Margin="5" Height="30" Background="PaleVioletRed"/>
                    <Button Name="function" Content="Function" Width="100" Margin="5" Height="30" Background="Salmon"/>

                    <StackPanel Name="heaading" Width="350">
                        <TextBlock Name="controlName" TextAlignment="Center" Text="Controls"/>
                    </StackPanel>
                    <StackPanel Name="userControls" Orientation="Vertical">
                        <!--  Users Controls Items Goes Here -->
                        <Polygon Name="startProgram" Points="80,10, 80, 80, 135,80, 135, 45, 205, 45, 205, 80, 260, 80, 260,10" Fill="Chocolate" Stroke="Black" StrokeThickness="2" MouseLeftButtonDown="shape_MouseLeftButtonDown" />
                        <Polygon Name="endProgram" Fill="BlueViolet"  Points="80,40, 80,80, 260,80, 260,40, 200,40, 200,10, 140,10,140,40"  Stroke="Black" StrokeThickness="2" MouseLeftButtonDown="shape_MouseLeftButtonDown" />
                    </StackPanel>
                </WrapPanel>

            </GroupBox>

            <!-- Change this to Canvas for work later -->
            <Canvas x:Name="dropArea" DockPanel.Dock="Right" Margin="10" Background="#FF9760BF" Width="Auto" HorizontalAlignment="Stretch" AllowDrop="True" Drop="dropArea_Drop">

            </Canvas>
        </DockPanel>
    </DockPanel>
</Window>

这是我的CS代码

namespace Images
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void dropArea_Drop(object sender, DragEventArgs e)
        {
            var shape = e.Data.GetData(typeof(Polygon)) as Polygon;
            Console.WriteLine("Polygon Name : " + shape.Name);
            Polygon myPolygon = new Polygon();
            myPolygon.Stroke = shape.Stroke;
            myPolygon.Fill = shape.Fill;
            myPolygon.StrokeThickness = 2;
            Canvas.SetTop(myPolygon, e.GetPosition(dropArea).Y);

            myPolygon.Points = shape.Points;
            dropArea.Children.Add(myPolygon);
            myPolygon.MouseRightButtonDown += new MouseButtonEventHandler(dragged_ShapeMouseDown);
        }

        private void dragged_ShapeMouseDown(object sender, MouseButtonEventArgs e)
        {
             //Show Options to Delete or set Value to current Polygon
        }

    private void shape_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Polygon shape = e.Source as Polygon;
            DragDrop.DoDragDrop(shape, shape, DragDropEffects.Copy);
        }
    }
}

问题

1. 我正在使用Canvas.setTop因为没有设置我的多边形显示在第一个.
2. 这里我设置的多边形用其上面的多边形进行固定,但也可以向左或向右,如下面的屏幕截图所示.

Answer 1

解决方案

对于删除形状

myPolygon.MouseLeftButtonUp += new MouseButtonEventHandler(dragged_ShapeMouseDown);

private void dragged_ShapeMouseDown(object sender, MouseButtonEventArgs e)
{
     if (dropArea.Children.Count > 0)
         dropArea.Children.Remove(sender as Polygon);
}