C# wpf 实现Grid内控件拖动_利用wpf实现鼠标改变矩形位置和大小

系列文章目录

第一章 Grid内控件拖动（本章）
第二章 Canvas内控件拖动
第三章 任意控件拖动
第四章 窗口拖动
第五章 附加属性实现任意拖动
第六章 拓展更多拖动功能

---

---

前言

有一些业务场景中我们需要拖动控件，在Grid中就可以实现控件拖动，通过设置Margin属性即可，根据鼠标的移动，设置相应的Margin，当然也不是直接设置的，有些细节还是需要注意的。

---

一、如何实现？

1.注册鼠标事件

拖动的控件需要注册3个鼠标事件分别是，鼠标按下、鼠标移动、鼠标弹起。
以Button为例：

<Button   PreviewMouseDown="Button_MouseDown" 
          PreviewMouseMove="Button_MouseMove" 
          PreviewMouseUp="Button_MouseUp"> </Button>
1
2
3

2.记录位置

在鼠标按下事件中记录位置。

//鼠标是否按下
bool _isMouseDown = false;
//鼠标按下的位置
Point _mouseDownPosition;
//鼠标按下控件的Margin
Thickness _mouseDownMargin;
//鼠标按下事件
private void Button_MouseDown(object sender, MouseButtonEventArgs e)
{
    var c = sender as Control;
    _isMouseDown = true;
    _mouseDownPosition = e.GetPosition(this);
    _mouseDownMargin = c.Margin;
    c.CaptureMouse();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.跟随鼠标移动

鼠标按下后移动鼠标，控件需要跟随鼠标移动。HorizontalAlignment、VerticalAlignment值不同不会影响移动，需要注意margin的4个值都要计算偏移。

private void Button_MouseMove(object sender, MouseEventArgs e)
{
    if (_isMouseDown)
    {
        var c = sender as Control;
        var pos = e.GetPosition(this);
        var dp = pos - _mouseDownPosition;
        c.Margin = new Thickness(_mouseDownMargin.Left + dp.X, _mouseDownMargin.Top + dp.Y, _mouseDownMargin.Right - dp.X, _mouseDownMargin.Bottom - dp.Y);
    }
}
1
2
3
4
5
6
7
8
9
10

4.恢复标识

鼠标弹起后需要恢复标识，让控件不再跟随鼠标移动。

private void Button_MouseUp(object sender, MouseButtonEventArgs e)
{ 
   var c = sender as Control;
   _isMouseDown = false;
   c.ReleaseMouseCapture();
} 
1
2
3
4
5
6

---

二、示例

示例代码：

<Window x:Class="WpfControlMove.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:WpfControlMove"
        mc:Ignorable="d"
        Title="MainWindow" Height="360" Width="640">
    <Grid>
        <Button Width="120" Height="50" Content="移动"   PreviewMouseDown="Button_MouseDown" PreviewMouseMove="Button_MouseMove" PreviewMouseUp="Button_MouseUp"> </Button>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12

效果预览：

---

总结

以上就是今天要讲的内容，本文说明了Grid中控件拖动的方法。方法采用了记录鼠标位置以及控件位置的方法来确保准确的相对位置。如果是采用只记录鼠标位置，计算时通过控件内部坐标差值累加，这样会产生累计误差，除非取整运算，但取整与dpi有可能产生不兼容。总的来说，本方法采用准确的位置计算方式，而且还根据不同停靠采用相应的计算方法，适用性较好。