我正在尝试使用Mouse事件在Canvas（在WPF应用程序）中的Rectangle中移动，但是它不起作用

Question

I develop a wpf application and I have to move a rectangle in a canvas (and the end goal is to make sure my rectangle can not get out of the canvas). So I searched and tried many solutions on the Web, but I was not working yet. Then I tried to rewrite a solution, but it did not work.

<Grid x:Name="mainGrid">
    <Canvas x:Name="CanvasImplant" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="27,27,26,0" Height="415">
        <Rectangle x:Name="MovableShape" Opacity="0.85" Width="93" Height="62" HorizontalAlignment="left" VerticalAlignment="Top" Margin="930,140" Stroke="Black" StrockThickness="1" MouseDown="MovShp_MouseDown" MouseUp="MovShp_MouseUp" MouseMove="MovShp_MouseMove"/>
    </Canvas>
</Grid>

private bool drag = true;
private Point StartPt;
private double newX, newY;

private void MovShp_MouseDown(object sender, MouseButtonEventArgs e)
{
    drag = true;
    Cursor = Cursors.Hand;
    startPt = e.Getposition(CanvasImplant);
    Mouse.Capture((UIElement)sender);
}

private void MovShp_MouseUp(object sender, MouseButtonEventArgs e)
{
    drag = false;
    Cursor = Cursors.Arrow;
    Mouse.Capture(null);
}

private void MovShp_MouseMove(object sender, MouseButtonEventArgs e)
{
    if (drag)
    {
        double deltaX = e.GetPosition(CanvasImplant).X - startPt.X;
        double deltaY = e.GetPosition(CanvasImplant).Y - startPt.Y;

        newX = deltaX + Canvas.GetLeft(MovableShape);
        newY = deltaY + Canvas.GetTop(MovableShape);

        if (newX < 0)
            newX = 0;
        else if (newX + MovableShape.ActualWidth > CanvasImplant.ActualWidth)
            newX = CanvasImplant.ActualWidth - MovableShape.ActualWidth;

        if (newY < 0)
            newY = 0;
        else if (newY + MovableShape.ActualHeight > CanvasImplant.ActualHeight )
            newY = CanvasImplant.ActualHeight - MovableShape.ActualHeight ;

        MovableShape.SetValue(Canvas.LeftProperty, newX);
        MovableShape.SetValue(Canvas.TopProperty, newY);
    }

}

When I click on MovableShape, the mouse becomes a hand and when I release the left mouse button, it becomes an arrow, but when I drag the rectangle, it does not follow the mouse and when I release the click, it do not move.

Answer 1

There are several things.

1. you need to set the Fill on the shape otherwise your click events only fire on the very thin border
2. the mouse move and mouse up event needs to be the Canvas events, not the shape
3. you need to set startPt to the new position each time in the move event handler
4. you need to remove the margin and horizontal/vertical position for the shape
5. you need to capture the mouse using the Canvas not the shape

This works for me:

    <Grid x:Name="mainGrid"  >
    <Canvas x:Name="CanvasImplant" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseMove="MovShp_MouseMove"  MouseUp="MovShp_MouseUp" Background="Transparent">
        <Rectangle Canvas.Left="10" Canvas.Top="20" x:Name="MovableShape" Fill="Transparent"  Opacity="0.85" Width="93" Height="62" Stroke="Black" 
                   StrokeThickness="1" MouseDown="MovShp_MouseDown" />
    </Canvas>
</Grid>

And the handlers:

private void MovShp_MouseDown(object sender, MouseButtonEventArgs e)
{
    drag = true;
    Cursor = Cursors.Hand;
    startPt = e.GetPosition(CanvasImplant);
    Mouse.Capture(CanvasImplant);
}

private void MovShp_MouseUp(object sender, MouseButtonEventArgs e)
{
    drag = false;
    Cursor = Cursors.Arrow;
    Mouse.Capture(null);
}

private void MovShp_MouseMove(object sender, MouseEventArgs e)
{
    if (drag)
    {
        var mp = e.GetPosition(CanvasImplant);
        double deltaX = mp .X - startPt.X;
        double deltaY = mp .Y - startPt.Y;

        var newX = deltaX + Canvas.GetLeft(MovableShape);
        var newY = deltaY + Canvas.GetTop(MovableShape);

        if (newX < 0)
            newX = 0;
        else if (newX + MovableShape.ActualWidth > CanvasImplant.ActualWidth)
            newX = CanvasImplant.ActualWidth - MovableShape.ActualWidth;

        if (newY < 0)
            newY = 0;
        else if (newY + MovableShape.ActualHeight > CanvasImplant.ActualHeight)
            newY = CanvasImplant.ActualHeight - MovableShape.ActualHeight;

        Canvas.SetLeft(MovableShape, newX);
        Canvas.SetTop(MovableShape, newY);

        startPt = mp ;
    }

}