Question

我正在制作具有拖放功能的Windows桌面应用程序。我使用Polygon（和以后的图像）用于拖放的形状。拖放功能工作正常，但我希望如果用户从面板拖动任何形状，当他拖动其他形状，然后第二个形状自动修复第一个形状。您可以通过查看下面的屏幕截图来了解它。

当我拖动Shapes

时会发生什么

当用户将多边形放在另一个多边形附近时，如果画布的其他区域中的相同多边形下降将显示给用户，则它将自动调整自身。

这是我的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);
        }
    }
}

问题

我使用Canvas.setTop因为没有设置我的多边形显示在第一个。
这里我设置了用上面的多边形修复的多边形，但也可以左右两边，如下面的截图所示。

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);
}

Answer 2

Sacha Barber有一篇非常好的文章，描述了你想要做的事情，我认为...... MVVM的4篇文章！看看这些step1和 step2，step3，step4 - 我也在自己的项目ArchX

中使用了它

好吧，我认为我的代码中都存在一切：在上一次测试结果并更改光标。 ondragend：使用HitHelper确定释放鼠标的位置并返回测试的形状 - 然后根据命中结果调整多边形的形状：下面的示例代码 - GuideLineManager

public Cursor HitTestGuide(Point p, RulerOrientation mode)
    {
        if (_Guides.Exists(g => (int)g.Info.Orientation == (int)mode && g.HitTest(p)))
        {
            return _Guides.First(g => (int)g.Info.Orientation == (int)mode && g.HitTest(p)).Cursor;

        }
        return Cursors.Arrow;
    }

和onDragEnd，调用以获取受测试对象

public Guideline GetSnapGuide(Point hitPoint)

    {

        foreach (Guideline gl in Guides)
        {
            if (!gl.IsDisplayed) continue;
            if (gl.Info.IsSnap && !gl.Info.IsMoving)

                if (gl.IsOnGuide(hitPoint, _Container.dPicCapture))
                {
                    return gl;
                }
        }
        return null;
    }

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

2 个答案: