C# wpf Canvas中实现控件拖动调整大小的示例

下面是详细讲解C# wpf Canvas中实现控件拖动调整大小的攻略。

1. 为控件添加事件处理程序

首先，我们需要定义控件的事件处理程序来让它们可以被拖动和调整大小。在XAML中，我们可以这样为控件添加鼠标左键按下事件处理程序：

<Canvas>
    <Button Content="可拖拽" Canvas.Left="50" Canvas.Top="50"
            PreviewMouseLeftButtonDown="MouseLeftButtonDownHandler"
            PreviewMouseMove="MouseMoveHandler"
            PreviewMouseLeftButtonUp="MouseLeftButtonUpHandler"/>
</Canvas>

其中，PreviewMouseLeftButtonDown事件处理程序用来记录鼠标左键按下时鼠标所在的位置，以备后用：

private Point startPoint; // 鼠标按下时所在的坐标

private void MouseLeftButtonDownHandler(object sender, MouseButtonEventArgs e)
{
    startPoint = e.GetPosition(null);
    ((UIElement)sender).CaptureMouse(); // 捕获鼠标
}

PreviewMouseMove事件处理程序则用来处理拖动过程中的逻辑，这里我们将控件的Canvas.Left和Canvas.Top属性设置为当前鼠标的位置加上鼠标按下时的偏移：

private void MouseMoveHandler(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        Point currentPoint = e.GetPosition(null);
        double deltaX = currentPoint.X - startPoint.X;
        double deltaY = currentPoint.Y - startPoint.Y;
        if (sender is UIElement uiElement)
        {
            double newLeft = Canvas.GetLeft(uiElement) + deltaX;
            double newTop = Canvas.GetTop(uiElement) + deltaY;
            Canvas.SetLeft(uiElement, newLeft);
            Canvas.SetTop(uiElement, newTop);
        }
    }
}

最后，PreviewMouseLeftButtonUp事件处理程序用来释放鼠标捕获：

private void MouseLeftButtonUpHandler(object sender, MouseButtonEventArgs e)
{
    ((UIElement)sender).ReleaseMouseCapture(); // 释放鼠标
}

现在，我们已经定义好了控件的事件处理程序，在屏幕上拖动控件时，它们应该会跟随鼠标移动了。

2. 实现控件调整大小

为了实现控件的调整大小，我们需要在控件周围加上一些调整大小的“手柄”（鼠标经过时会变成箭头）。这里我们使用Grid控件来实现：

<Canvas>
    <Grid Canvas.Left="50" Canvas.Top="50">
        <Button Content="可拖拽" Width="100" Height="50"
                PreviewMouseLeftButtonDown="MouseLeftButtonDownHandler"
                PreviewMouseMove="MouseMoveHandler"
                PreviewMouseLeftButtonUp="MouseLeftButtonUpHandler"/>
        <Rectangle Width="8" Height="8" Fill="Gray" Cursor="SizeNWSE"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Margin="-4,-4,0,0" PreviewMouseLeftButtonDown="NWSE_MouseLeftButtonDownHandler"
                   PreviewMouseMove="NWSE_MouseMoveHandler" PreviewMouseLeftButtonUp="NWSE_MouseLeftButtonUpHandler"/>
        <Rectangle Width="8" Height="8" Fill="Gray" Cursor="SizeNESW"
                   HorizontalAlignment="Right" VerticalAlignment="Top"
                   Margin="0,-4,-4,0" PreviewMouseLeftButtonDown="NESW_MouseLeftButtonDownHandler"
                   PreviewMouseMove="NESW_MouseMoveHandler" PreviewMouseLeftButtonUp="NESW_MouseLeftButtonUpHandler"/>
        <Rectangle Width="8" Height="8" Fill="Gray" Cursor="SizeNESW"
                   HorizontalAlignment="Left" VerticalAlignment="Bottom"
                   Margin="-4,0,0,-4" PreviewMouseLeftButtonDown="NESW_MouseLeftButtonDownHandler"
                   PreviewMouseMove="NESW_MouseMoveHandler" PreviewMouseLeftButtonUp="NESW_MouseLeftButtonUpHandler"/>
        <Rectangle Width="8" Height="8" Fill="Gray" Cursor="SizeNWSE"
                   HorizontalAlignment="Right" VerticalAlignment="Bottom"
                   Margin="0,0,-4,-4" PreviewMouseLeftButtonDown="NWSE_MouseLeftButtonDownHandler"
                   PreviewMouseMove="NWSE_MouseMoveHandler" PreviewMouseLeftButtonUp="NWSE_MouseLeftButtonUpHandler"/>
    </Grid>
</Canvas>

这里我们在Button控件周围添加了四个小矩形作为手柄，它们的水平和垂直对齐方式可以决定它们在控件的四边中的位置，Margin属性表示矩形距离控件边缘的距离。此外，我们还需要定义一些额外的事件处理程序来实现手柄的调整大小功能。

以左上角的手柄为例，我们需要在PreviewMouseLeftButtonDown事件处理程序中记录鼠标按下时的位置，并保存当前控件的大小：

private Point resizeStartPoint; // 鼠标按下时所在的坐标
private Size resizeStartSize; // 控件尺寸

private void NWSE_MouseLeftButtonDownHandler(object sender, MouseButtonEventArgs e)
{
    resizeStartPoint = e.GetPosition(null);
    if (sender is Rectangle rectangle)
    {
        FrameworkElement parent = (FrameworkElement)rectangle.Parent;
        resizeStartSize = new Size(parent.ActualWidth, parent.ActualHeight);
        rectangle.CaptureMouse();
    }
}

然后，在PreviewMouseMove事件处理程序中计算当前鼠标与鼠标按下时的偏移，并根据这个偏移调整控件的大小：

private void NWSE_MouseMoveHandler(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        Point currentPoint = e.GetPosition(null);
        double deltaX = currentPoint.X - resizeStartPoint.X;
        double deltaY = currentPoint.Y - resizeStartPoint.Y;
        if (sender is Rectangle rectangle)
        {
            FrameworkElement parent = (FrameworkElement)rectangle.Parent;
            double newWidth = resizeStartSize.Width + deltaX;
            double newHeight = resizeStartSize.Height + deltaY;
            parent.Width = newWidth > 0 ? newWidth : parent.MinWidth;
            parent.Height = newHeight > 0 ? newHeight : parent.MinHeight;
        }
    }
}

最后，在PreviewMouseLeftButtonUp事件处理程序中释放鼠标捕获：

private void NWSE_MouseLeftButtonUpHandler(object sender, MouseButtonEventArgs e)
{
    ((Rectangle)sender).ReleaseMouseCapture();
}

右上角、左下角、右下角的手柄的事件处理程序与左上角的类似，这里不再赘述。

总结

通过上面的步骤，我们已经成功地实现了控件在Canvas中的拖动和调整大小。这里讲解的是一种比较基础的方法，但其它方法也有可能会有更好的效果。希望本文对你有所帮助。