前言：
很多时候我们需要在运行时，动态地改变控件的位置以及大小，以获得更好的布局。比如说实际项目中的可自定义的报表、可自定义的单据等诸如此类。它们有个特点就是允许客户或者二次开发人员设计它们需要的界面设置功能。
本人以前也做过可自定义系统，包括界面和功能，主要为了减少开发人员的工作量以及程序的灵活性和健壮性。
本篇主要讨论下，在运行时如何实现拖拉控件，达到改变控件位置与大小。功能将模拟vs设计界面时的拖拉功能。
（本篇暂不涉及多控件同时操作）
一、技术概述
其实实现运行时控件的拖拉并不难，主要是改变控件的location与size即可。动态调整时再捕获mousedown、mousemove及mouseup事件来实时修改上述两个属性就可以实现。
二、功能规划
在此之前，我们先来看下.net设计界面，一旦选中某个控件时，将会出现如下图的边框：
之后就可以通过拖拉出现的边框改变其大小。而改变控件的位置，实际上是当鼠标点击在控件内部拖动时实现的。
所有本例也将功能分为两个部分实现，分别为控件内部拖动改变位置与控件边框拖拉改变大小。
三、具体实现
1.拖动控件改变位置
首先，新建一个项目，然后添加一个类，取名叫movecontrol，该类用来给控件挂载事件实现拖动。
接着在该类中添加字段currentcontrol，用来保存需要操作的控件，即通过构造函数传递的控件。
接着创建一方法--addevents,用来给当前的控件挂载事件。
代码如下：
dragcontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
using system;using system.collections.generic;using system.text;using system.windows.forms;using system.drawing;namespace dragcontrol{ public class movecontrol { #region constructors public movecontrol(control ctrl) { currentcontrol = ctrl; addevents(); } #endregion #region fields private control currentcontrol; //传入的控件 #endregion #region properties #endregion #region methods /// <summary> /// 挂载事件 /// </summary> private void addevents() { currentcontrol.mouseclick += new mouseeventhandler(mouseclick); currentcontrol.mousedown += new mouseeventhandler(mousedown); currentcontrol.mousemove += new mouseeventhandler(mousemove); currentcontrol.mouseup += new mouseeventhandler(mouseup); } #endregion #region events /// <summary> /// 鼠标单击事件：用来显示边框 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> void mouseclick(object sender, mouseeventargs e) { } /// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void mousedown(object sender, mouseeventargs e) { } /// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void mousemove(object sender, mouseeventargs e) { } /// <summary> /// 鼠标弹起事件：让自定义的边框出现 /// </summary> void mouseup(object sender, mouseeventargs e) { } #endregion }} |
接着我们需要实现mousedown、mousemove、mouseup三个事件。
不过在此之前，我们必须要弄清楚，移动即表示坐标的改变，所以必定要有个起始坐标和终点坐标。
所以我们在movecontrol类中加入两个字段。
private point ppoint; //上个鼠标坐标 private point cpoint; //当前鼠标坐标
而且在开始拖动之前，我们肯定需要先单击一次控件。在mousedown时获取当前光标的位置，保存到ppoint中。
（此处用cursor获得坐标的好处，就是忽略掉容器的麻烦问题）
|
1
2
3
4
5
6
7
|
/// <summary>/// 鼠标单击事件：用来显示边框/// </summary> void mouseclick(object sender, mouseeventargs e) { ppoint = cursor.position; } |
接着便实现mousemove的事件，当鼠标左键按下时，接着移动鼠标后，继续鼠标移动后的坐标，然后与mousedown时记下的坐标相减，就得到鼠标的位移值，接着控件的location加上该位移值即可，然后更新ppoint。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void mousemove(object sender, mouseeventargs e) { cursor.current = cursors.sizeall; //当鼠标处于控件内部时，显示光标样式为sizeall //当鼠标左键按下时才触发 if (e.button == mousebuttons.left) { cpoint = cursor.position; //获得当前鼠标位置 int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; currentcontrol.location = new point(currentcontrol.location.x + x, currentcontrol.location.y + y); ppoint = cpoint; } } |
由于此时还没涉及到边框，所以mouseup暂时不用处理。至此拖动的基本功能已经实现！
目前movecontrol的完整代码如下：
movecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
using system;using system.collections.generic;using system.text;using system.windows.forms;using system.drawing;namespace dragcontrol{ public class movecontrol { #region constructors public movecontrol(control ctrl) { currentcontrol = ctrl; addevents(); } #endregion #region fields private control currentcontrol; //传入的控件 private point ppoint; //上个鼠标坐标 private point cpoint; //当前鼠标坐标 #endregion #region properties #endregion #region methods /// <summary> /// 挂载事件 /// </summary> private void addevents() { currentcontrol.mousedown += new mouseeventhandler(mousedown); currentcontrol.mousemove += new mouseeventhandler(mousemove); currentcontrol.mouseup += new mouseeventhandler(mouseup); } /// <summary> /// 绘制拖拉时的黑色边框 /// </summary> public static void drawdragbound(control ctrl) { ctrl.refresh(); graphics g = ctrl.creategraphics(); int width = ctrl.width; int height = ctrl.height; point[] ps = new point[5]{new point(0,0),new point(width -1,0), new point(width -1,height -1),new point(0,height-1),new point(0,0)}; g.drawlines(new pen(color.black), ps); } #endregion #region events /// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void mousedown(object sender, mouseeventargs e) { ppoint = cursor.position; } /// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void mousemove(object sender, mouseeventargs e) { cursor.current = cursors.sizeall; //当鼠标处于控件内部时，显示光标样式为sizeall //当鼠标左键按下时才触发 if (e.button == mousebuttons.left) { movecontrol.drawdragbound(this.currentcontrol); cpoint = cursor.position; //获得当前鼠标位置 int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; currentcontrol.location = new point(currentcontrol.location.x + x, currentcontrol.location.y + y); ppoint = cpoint; } } /// <summary> /// 鼠标弹起事件：让自定义的边框出现 /// </summary> void mouseup(object sender, mouseeventargs e) { this.currentcontrol.refresh(); } #endregion }} |
下面我们来测试下拖动的功能。
创建一个form窗体，可以再界面上添加你要测试的控件类型，此处我只用textbox左下测试。在load的中添加以下代码，将form中的所有控件挂载上拖拉功能。
|
1
2
3
4
5
6
7
|
private void form1_load(object sender, eventargs e){ foreach (control ctrl in this.controls) { new movecontrol(ctrl); }} |
此时，有心人可能会发现vs中拖动控件时，将会出现黑色边框，而处于没有。
这也很简单，我们在mousemove时加上如下代码即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/// <summary>/// 绘制拖拉时的黑色边框/// </summary>public static void drawdragbound(control ctrl){ ctrl.refresh(); graphics g = ctrl.creategraphics(); int width = ctrl.width; int height = ctrl.height; point[] ps = new point[5]{new point(0,0),new point(width -1,0), new point(width -1,height -1),new point(0,height-1),new point(0,0)}; g.drawlines(new pen(color.black), ps);} /// <summary>/// 鼠标移动事件：让控件跟着鼠标移动/// </summary>void mousemove(object sender, mouseeventargs e){ cursor.current = cursors.sizeall; //当鼠标处于控件内部时，显示光标样式为sizeall //当鼠标左键按下时才触发 if (e.button == mousebuttons.left) { movecontrol.drawdragbound(this.currentcontrol); cpoint = cursor.position; //获得当前鼠标位置 int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; currentcontrol.location = new point(currentcontrol.location.x + x, currentcontrol.location.y + y); ppoint = cpoint; }} |
同时要在moveup的时候，刷新一下自己，让黑色边框消失掉！
|
1
2
3
4
5
6
7
|
/// <summary>/// 鼠标弹起事件：让自定义的边框出现/// </summary>void mouseup(object sender, mouseeventargs e){ this.currentcontrol.refresh();} |
接着用没有边框的控件测试下就会很明显。如下图所示：
2.通过边框拖拉控件改变大小
此处的主要思路为：点击控件的时候，创建一个自定义的用户控件，该用户控件响应区域就是传入控件的边框区域，同时给它画上虚线与8个小圆圈。
第一、创建用户控件--framecontrol（边框控件），然后增加一个字段用来保存传入的控件，还有加载事件，此处类同前面的movecontrol。
framecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
using system;using system.collections.generic;using system.componentmodel;using system.drawing;using system.data;using system.linq;using system.text;using system.windows.forms;namespace dragcontrol{public partial class framecontrol : usercontrol{#region constructorspublic framecontrol(control ctrl){ basecontrol = ctrl; addevents();}#endregion#region fieldscontrol basecontrol; //基础控件，即被包围的控件#endregion#region methods/// <summary>/// 加载事件/// </summary>private void addevents(){ this.name = "framecontrol" + basecontrol.name; this.mousedown += new mouseeventhandler(framecontrol_mousedown); this.mousemove += new mouseeventhandler(framecontrol_mousemove); this.mouseup += new mouseeventhandler(framecontrol_mouseup);}#endregion#region events/// <summary>/// 鼠标按下事件：记录当前鼠标相对窗体的坐标/// </summary>void framecontrol_mousedown(object sender, mouseeventargs e){}/// <summary>/// 鼠标移动事件：让控件跟着鼠标移动/// </summary>void framecontrol_mousemove(object sender, mouseeventargs e){}/// <summary>/// 鼠标弹起事件：让自定义的边框出现/// </summary>void framecontrol_mouseup(object sender, mouseeventargs e){}#endregion}} |
做完这些准备工作后，将到了主要的部分，就是给控件画边框。
整个边框分为三个部分：四边框（用来设置可视区域与区域）+四条虚线（只用来显示）+八个小圆圈（用来斜角拖拉）。
所以要建立三个字段，用来分别保存这个数据。
|
1
2
3
|
rectangle[] smallrects = new rectangle[8];//边框中的八个小圆圈rectangle[] siderects = new rectangle[4];//四条边框，用来做响应区域point[] linepoints = new point[5];//四条边，用于画虚线 |
接着就是创建用户控件的可视区域，和上面的三个变量数值。
（以下计算位置的代码，有兴趣的人可以研究下，没有的就直接copy）
创建边框
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
#region 创建边框/// <summary>/// 建立控件可视区域/// </summary>private void createbounds(){ //创建边界 int x = basecontrol.bounds.x - square.width - 1; int y = basecontrol.bounds.y - square.height - 1; int height = basecontrol.bounds.height + (square.height * 2) + 2; int width = basecontrol.bounds.width + (square.width * 2) + 2; this.bounds = new rectangle(x, y, width, height); this.bringtofront(); setrectangles(); //设置可视区域 this.region = new region(buildframe()); g = this.creategraphics();}/// <summary>/// 设置定义8个小矩形的范围/// </summary>void setrectangles(){ //左上 smallrects[0] = new rectangle(new point(0, 0), square); //右上 smallrects[1] = new rectangle(new point(this.width - square.width - 1, 0), square); //左下 smallrects[2] = new rectangle(new point(0, this.height - square.height - 1), square); //右下 smallrects[3] = new rectangle(new point(this.width - square.width - 1, this.height - square.height - 1), square); //上中 smallrects[4] = new rectangle(new point(this.width / 2 - 1, 0), square); //下中 smallrects[5] = new rectangle(new point(this.width / 2 - 1, this.height - square.height - 1), square); //左中 smallrects[6] = new rectangle(new point(0, this.height / 2 - 1), square); //右中 smallrects[7] = new rectangle(new point(square.width + basecontrol.width + 1, this.height / 2 - 1), square); //四条边线 //左上 linepoints[0] = new point(square.width / 2, square.height / 2); //右上 linepoints[1] = new point(this.width - square.width / 2 - 1, square.height / 2); //右下 linepoints[2] = new point(this.width - square.width / 2 - 1, this.height - square.height / 2); //左下 linepoints[3] = new point(square.width / 2, this.height - square.height / 2 - 1); //左上 linepoints[4] = new point(square.width / 2, square.height / 2); //整个包括周围边框的范围 controlrect = new rectangle(new point(0, 0), this.bounds.size);}/// <summary>/// 设置边框控件可视区域/// </summary>/// <returns></returns>private graphicspath buildframe(){ graphicspath path = new graphicspath(); //上边框 siderects[0] = new rectangle(0, 0, this.width - square.width - 1, square.height + 1); //左边框 siderects[1] = new rectangle(0, square.height + 1, square.width + 1, this.height - square.height - 1); //下边框 siderects[2] = new rectangle(square.width + 1, this.height - square.height - 1, this.width - square.width - 1, square.height + 1); //右边框 siderects[3] = new rectangle(this.width - square.width - 1, 0, square.width + 1, this.height - square.height - 1); path.addrectangle(siderects[0]); path.addrectangle(siderects[1]); path.addrectangle(siderects[2]); path.addrectangle(siderects[3]); return path;}#endregion |
设置完位置后，接着就是绘制的工作。增加一个draw的方法用来画，同时设置为public。此处不用控件的paint，而是让用户调用，只因为这样方便在不同控件之间切换，也就是一个容器中，只有当前控件有边框。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/// <summary>/// 绘图/// </summary>public void draw(){ this.bringtofront(); pen pen = new pen(color.black); pen.dashstyle = dashstyle.dot;//设置为虚线,用虚线画四边，模拟微软效果 g.drawlines(pen, linepoints);//绘制四条边线 g.fillrectangles(brushes.white, smallrects); //填充8个小矩形的内部 foreach (rectangle smallrect in smallrects) { g.drawellipse(pens.black, smallrect); //绘制8个小椭圆 } //g.drawrectangles(pens.black, smallrects); //绘制8个小矩形的黑色边线} |
做到这里，我们可以去前台看一下效果，不过再此之前，我们需要调用该用户控件。
调用的地方就是在控件上点击的时候，所以在movecontrol中加入mouseclick的事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/// <summary>/// 鼠标单击事件：用来显示边框/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void mouseclick(object sender, mouseeventargs e){ this.currentcontrol.parent.refresh();//刷新父容器，清除掉其他控件的边框 this.currentcontrol.bringtofront(); fc = new framecontrol(this.currentcontrol); this.currentcontrol.parent.controls.add(fc); fc.visible = true; fc.draw();} |
这时有了边框之后会有一个小问题，就是拖动控件的时候，控件移动了，但是边框还留在原地。
所以，这里需要注意的，就是移动的时候，将边框控件隐藏掉，当mouseup的时候再显示。
此时的完整代码如下：
movecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
using system;using system.collections.generic;using system.text;using system.windows.forms;using system.drawing;namespace dragcontrol{public class movecontrol{ #region constructors public movecontrol(control ctrl) { currentcontrol = ctrl; addevents(); } #endregion #region fields private control currentcontrol; //传入的控件 private point ppoint; //上个鼠标坐标 private point cpoint; //当前鼠标坐标 framecontrol fc;//边框控件 #endregion #region properties #endregion #region methods /// <summary> /// 挂载事件 /// </summary> private void addevents() { currentcontrol.mouseclick += new mouseeventhandler(mouseclick); currentcontrol.mousedown += new mouseeventhandler(mousedown); currentcontrol.mousemove += new mouseeventhandler(mousemove); currentcontrol.mouseup += new mouseeventhandler(mouseup); } /// <summary> /// 绘制拖拉时的黑色边框 /// </summary> public static void drawdragbound(control ctrl) { ctrl.refresh(); graphics g = ctrl.creategraphics(); int width = ctrl.width; int height = ctrl.height; point[] ps = new point[5]{new point(0,0),new point(width -1,0), new point(width -1,height -1),new point(0,height-1),new point(0,0)}; g.drawlines(new pen(color.black), ps); } #endregion #region events /// <summary> /// 鼠标单击事件：用来显示边框 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void mouseclick(object sender, mouseeventargs e) { this.currentcontrol.parent.refresh();//刷新父容器，清除掉其他控件的边框 this.currentcontrol.bringtofront(); fc = new framecontrol(this.currentcontrol); this.currentcontrol.parent.controls.add(fc); fc.visible = true; fc.draw(); } /// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void mousedown(object sender, mouseeventargs e) { ppoint = cursor.position; } /// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void mousemove(object sender, mouseeventargs e) { cursor.current = cursors.sizeall; //当鼠标处于控件内部时，显示光标样式为sizeall //当鼠标左键按下时才触发 if (e.button == mousebuttons.left) { movecontrol.drawdragbound(this.currentcontrol); if (fc != null) fc.visible = false; //先隐藏 cpoint = cursor.position; //获得当前鼠标位置 int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; currentcontrol.location = new point(currentcontrol.location.x + x, currentcontrol.location.y + y); ppoint = cpoint; } } /// <summary> /// 鼠标弹起事件：让自定义的边框出现 /// </summary> void mouseup(object sender, mouseeventargs e) { this.currentcontrol.refresh(); if (fc != null) { fc.visible = true; fc.draw(); } } #endregion}} |
framecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
using system;using system.collections.generic;using system.componentmodel;using system.drawing;using system.data;using system.text;using system.windows.forms;using system.drawing.drawing2d;namespace dragcontrol{ public partial class framecontrol : usercontrol { #region constructors public framecontrol(control ctrl) { basecontrol = ctrl; addevents(); createbounds(); } #endregion #region fields const int band = 6; //调整大小的响应边框 size square = new size(band, band);//小矩形大小 control basecontrol; //基础控件，即被包围的控件 rectangle[] smallrects = new rectangle[8];//边框中的八个小圆圈 rectangle[] siderects = new rectangle[4];//四条边框，用来做响应区域 point[] linepoints = new point[5];//四条边，用于画虚线 graphics g; //画图板 rectangle controlrect; //控件包含边框的区域 #endregion #region methods /// <summary> /// 加载事件 /// </summary> private void addevents() { this.name = "framecontrol" + basecontrol.name; this.mousedown += new mouseeventhandler(framecontrol_mousedown); this.mousemove += new mouseeventhandler(framecontrol_mousemove); this.mouseup += new mouseeventhandler(framecontrol_mouseup); } #region 创建边框 /// <summary> /// 建立控件可视区域 /// </summary> private void createbounds() { //创建边界 int x = basecontrol.bounds.x - square.width - 1; int y = basecontrol.bounds.y - square.height - 1; int height = basecontrol.bounds.height + (square.height * 2) + 2; int width = basecontrol.bounds.width + (square.width * 2) + 2; this.bounds = new rectangle(x, y, width, height); this.bringtofront(); setrectangles(); //设置可视区域 this.region = new region(buildframe()); g = this.creategraphics(); } /// <summary> /// 设置定义8个小矩形的范围 /// </summary> void setrectangles() { //左上 smallrects[0] = new rectangle(new point(0, 0), square); //右上 smallrects[1] = new rectangle(new point(this.width - square.width - 1, 0), square); //左下 smallrects[2] = new rectangle(new point(0, this.height - square.height - 1), square); //右下 smallrects[3] = new rectangle(new point(this.width - square.width - 1, this.height - square.height - 1), square); //上中 smallrects[4] = new rectangle(new point(this.width / 2 - 1, 0), square); //下中 smallrects[5] = new rectangle(new point(this.width / 2 - 1, this.height - square.height - 1), square); //左中 smallrects[6] = new rectangle(new point(0, this.height / 2 - 1), square); //右中 smallrects[7] = new rectangle(new point(square.width + basecontrol.width + 1, this.height / 2 - 1), square); //四条边线 //左上 linepoints[0] = new point(square.width / 2, square.height / 2); //右上 linepoints[1] = new point(this.width - square.width / 2 - 1, square.height / 2); //右下 linepoints[2] = new point(this.width - square.width / 2 - 1, this.height - square.height / 2); //左下 linepoints[3] = new point(square.width / 2, this.height - square.height / 2 - 1); //左上 linepoints[4] = new point(square.width / 2, square.height / 2); //整个包括周围边框的范围 controlrect = new rectangle(new point(0, 0), this.bounds.size); } /// <summary> /// 设置边框控件可视区域 /// </summary> /// <returns></returns> private graphicspath buildframe() { graphicspath path = new graphicspath(); //上边框 siderects[0] = new rectangle(0, 0, this.width - square.width - 1, square.height + 1); //左边框 siderects[1] = new rectangle(0, square.height + 1, square.width + 1, this.height - square.height - 1); //下边框 siderects[2] = new rectangle(square.width + 1, this.height - square.height - 1, this.width - square.width - 1, square.height + 1); //右边框 siderects[3] = new rectangle(this.width - square.width - 1, 0, square.width + 1, this.height - square.height - 1); path.addrectangle(siderects[0]); path.addrectangle(siderects[1]); path.addrectangle(siderects[2]); path.addrectangle(siderects[3]); return path; } #endregion /// <summary> /// 绘图 /// </summary> public void draw() { this.bringtofront(); pen pen = new pen(color.black); pen.dashstyle = dashstyle.dot;//设置为虚线,用虚线画四边，模拟微软效果 g.drawlines(pen, linepoints);//绘制四条边线 g.fillrectangles(brushes.white, smallrects); //填充8个小矩形的内部 foreach (rectangle smallrect in smallrects) { g.drawellipse(pens.black, smallrect); //绘制8个小椭圆 } //g.drawrectangles(pens.black, smallrects); //绘制8个小矩形的黑色边线 } #endregion #region events /// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void framecontrol_mousedown(object sender, mouseeventargs e) { } /// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void framecontrol_mousemove(object sender, mouseeventargs e) { } /// <summary> /// 鼠标弹起事件：让自定义的边框出现 /// </summary> void framecontrol_mouseup(object sender, mouseeventargs e) { } #endregion }} |
测试界面：
到目前为止，还只是有边框，下面将实现拖拉功能。
首先来实现，当鼠标放在响应区域的时候，根据不同的位置显示不同的箭头样子。
为此先创建一个枚举，用来记录当前鼠标的位置，等拖拉的时候根据该枚举值做不同的计算。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/// <summary>/// 鼠标在控件中位置/// </summary>enum mouseposonctrl{ none = 0, top = 1, right = 2, bottom = 3, left = 4, topleft = 5, topright = 6, bottomleft = 7, bottomright = 8,} |
创建一个方法，用来改变光标的样子以及枚举值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
/// <summary>/// 设置光标状态/// </summary>public bool setcursorshape(int x, int y){ point point = new point(x, y); if (!controlrect.contains(point)) { cursor.current = cursors.arrow; return false; } else if (smallrects[0].contains(point)) { cursor.current = cursors.sizenwse; mpoc = mouseposonctrl.topleft; } else if (smallrects[1].contains(point)) { cursor.current = cursors.sizenesw; mpoc = mouseposonctrl.topright; } else if (smallrects[2].contains(point)) { cursor.current = cursors.sizenesw; mpoc = mouseposonctrl.bottomleft; } else if (smallrects[3].contains(point)) { cursor.current = cursors.sizenwse; mpoc = mouseposonctrl.bottomright; } else if (siderects[0].contains(point)) { cursor.current = cursors.sizens; mpoc = mouseposonctrl.top; } else if (siderects[1].contains(point)) { cursor.current = cursors.sizewe; mpoc = mouseposonctrl.left; } else if (siderects[2].contains(point)) { cursor.current = cursors.sizens; mpoc = mouseposonctrl.bottom; } else if (siderects[3].contains(point)) { cursor.current = cursors.sizewe; mpoc = mouseposonctrl.right; } else { cursor.current = cursors.arrow; } return true;} |
接着就是处理相关的三大事件mousedown、mousemove、mouseup来实现拖拉。如同movecontrol都要增加以下两个字段。
|
1
2
|
private point ppoint; //上个鼠标坐标private point cpoint; //当前鼠标坐标 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void framecontrol_mousedown(object sender, mouseeventargs e) { ppoint = cursor.position; } /// <summary>/// 鼠标移动事件：让控件跟着鼠标移动/// </summary>void framecontrol_mousemove(object sender, mouseeventargs e){ if (e.button == mousebuttons.left) { this.visible = false; movecontrol.drawdragbound(basecontrol); controlmove(); } else { this.visible = true; setcursorshape(e.x, e.y); //更新鼠标指针样式 }}/// <summary>/// 鼠标弹起事件：让自定义的边框出现/// </summary>void framecontrol_mouseup(object sender, mouseeventargs e){ this.basecontrol.refresh(); //刷掉黑色边框 this.visible = true; createbounds(); draw();} |
在上面的mousemove中多了一个方法--controlmove，这个就是根据不同的枚举值，计算控件的移动方式和大小的方法。该方法中同时对控件的最小宽度和高度做了处理。添加如下两个字段。
|
1
2
|
private int minwidth = 20; //最小宽度private int minheight = 20;//最小高度 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
/// <summary> /// 控件移动 /// </summary> private void controlmove() { cpoint = cursor.position; int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; switch (this.mpoc) { case mouseposonctrl.top: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } break; case mouseposonctrl.bottom: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } break; case mouseposonctrl.left: if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.right: if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; case mouseposonctrl.topleft: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.topright: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; case mouseposonctrl.bottomleft: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.bottomright: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; } ppoint = cursor.position;} |
到此为止，功能已经基本上实现。
完成代码如下：
movecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/******************************************************************* 创 建 人： samwang* 创建时间： 2012-5-10 16:06* 描 述：* 移动控件但不改变大小* 原 理：* 版 本： v1.0 * 环 境： vs2010******************************************************************/using system;using system.collections.generic;using system.linq;using system.text;using system.windows.forms;using system.drawing;namespace dragcontrol{public class movecontrol{ #region constructors public movecontrol(control ctrl) { currentcontrol = ctrl; addevents(); } #endregion #region fields private control currentcontrol; //传入的控件 private point ppoint; //上个鼠标坐标 private point cpoint; //当前鼠标坐标 framecontrol fc;//边框控件 #endregion #region properties #endregion #region methods /// <summary> /// 挂载事件 /// </summary> private void addevents() { currentcontrol.mouseclick += new mouseeventhandler(mouseclick); currentcontrol.mousedown += new mouseeventhandler(mousedown); currentcontrol.mousemove += new mouseeventhandler(mousemove); currentcontrol.mouseup += new mouseeventhandler(mouseup); } /// <summary> /// 绘制拖拉时的黑色边框 /// </summary> public static void drawdragbound(control ctrl) { ctrl.refresh(); graphics g = ctrl.creategraphics(); int width = ctrl.width; int height = ctrl.height; point[] ps = new point[5]{new point(0,0),new point(width -1,0), new point(width -1,height -1),new point(0,height-1),new point(0,0)}; g.drawlines(new pen(color.black), ps); } #endregion #region events /// <summary> /// 鼠标单击事件：用来显示边框 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void mouseclick(object sender, mouseeventargs e) { this.currentcontrol.parent.refresh();//刷新父容器，清除掉其他控件的边框 this.currentcontrol.bringtofront(); fc = new framecontrol(this.currentcontrol); this.currentcontrol.parent.controls.add(fc); fc.visible = true; fc.draw(); } /// <summary> /// 鼠标按下事件：记录当前鼠标相对窗体的坐标 /// </summary> void mousedown(object sender, mouseeventargs e) { ppoint = cursor.position; } /// <summary> /// 鼠标移动事件：让控件跟着鼠标移动 /// </summary> void mousemove(object sender, mouseeventargs e) { cursor.current = cursors.sizeall; //当鼠标处于控件内部时，显示光标样式为sizeall //当鼠标左键按下时才触发 if (e.button == mousebuttons.left) { movecontrol.drawdragbound(this.currentcontrol); if(fc != null ) fc.visible = false; //先隐藏 cpoint = cursor.position;//获得当前鼠标位置 int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; currentcontrol.location = new point(currentcontrol.location.x + x, currentcontrol.location.y + y); ppoint = cpoint; }}/// <summary>/// 鼠标弹起事件：让自定义的边框出现/// </summary>void mouseup(object sender, mouseeventargs e){ this.currentcontrol.refresh(); if (fc != null) { fc.visible = true; fc.draw(); }}#endregion}} |
framecontrol
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
|
/******************************************************************* 创 建 人： samwang* 创建时间： 2012-5-10 17:00* 描 述：* 在控件外部加上边框，用于拖拉，以改变内部控件的大小* 原 理：* 版 本： v1.0 * 环 境： vs2010******************************************************************/using system;using system.collections.generic;using system.text;using system.windows.forms;using system.drawing;using system.drawing.drawing2d;namespace dragcontrol{public class framecontrol : usercontrol{ #region constructors /// <summary> /// 构造函数 /// </summary> public framecontrol(control ctrl) { basecontrol = ctrl; addevents(); createbounds(); } #endregion #region fields const int band = 6; //调整大小的响应边框 private int minwidth = 20; //最小宽度 private int minheight = 20;//最小高度 size square = new size(band, band);//小矩形大小 control basecontrol; //基础控件，即被包围的控件 rectangle[] smallrects = new rectangle[8];//边框中的八个小圆圈 rectangle[] siderects = new rectangle[4];//四条边框，用来做响应区域 point[] linepoints = new point[5];//四条边，用于画虚线 graphics g; //画图板 rectangle controlrect; //控件包含边框的区域 private point ppoint; //上个鼠标坐标 private point cpoint; //当前鼠标坐标 private mouseposonctrl mpoc; #endregion #region properties /// <summary> /// 鼠标在控件中位置 /// </summary> enum mouseposonctrl { none = 0, top = 1, right = 2, bottom = 3, left = 4, topleft = 5, topright = 6, bottomleft = 7, bottomright = 8, } #endregion #region methods /// <summary> /// 加载事件 /// </summary> private void addevents() { this.name = "framecontrol" + basecontrol.name; this.mousedown += new mouseeventhandler(framecontrol_mousedown); this.mousemove += new mouseeventhandler(framecontrol_mousemove); this.mouseup += new mouseeventhandler(framecontrol_mouseup); } #region 创建边框 /// <summary> /// 建立控件可视区域 /// </summary> private void createbounds() { //创建边界 int x = basecontrol.bounds.x - square.width - 1; int y = basecontrol.bounds.y - square.height - 1; int height = basecontrol.bounds.height + (square.height * 2) + 2; int width = basecontrol.bounds.width + (square.width * 2) + 2; this.bounds = new rectangle(x, y, width, height); this.bringtofront(); setrectangles(); //设置可视区域 this.region = new region(buildframe()); g = this.creategraphics(); } /// <summary> /// 设置定义8个小矩形的范围/// </summary>void setrectangles(){ //左上 smallrects[0] = new rectangle(new point(0, 0), square); //右上 smallrects[1] = new rectangle(new point(this.width - square.width - 1, 0), square); //左下 smallrects[2] = new rectangle(new point(0, this.height - square.height - 1), square); //右下 smallrects[3] = new rectangle(new point(this.width - square.width - 1, this.height - square.height - 1), square); //上中 smallrects[4] = new rectangle(new point(this.width / 2 - 1, 0), square); //下中 smallrects[5] = new rectangle(new point(this.width / 2 - 1, this.height - square.height - 1), square); //左中 smallrects[6] = new rectangle(new point(0, this.height / 2 - 1), square); //右中 smallrects[7] = new rectangle(new point(square.width + basecontrol.width + 1, this.height / 2 - 1), square); //四条边线 //左上 linepoints[0] = new point(square.width / 2, square.height / 2); //右上 linepoints[1] = new point(this.width - square.width / 2 - 1, square.height / 2); //右下 linepoints[2] = new point(this.width - square.width / 2 - 1, this.height - square.height / 2); //左下 linepoints[3] = new point(square.width / 2, this.height - square.height / 2 - 1); //左上 linepoints[4] = new point(square.width / 2, square.height / 2); //整个包括周围边框的范围 controlrect = new rectangle(new point(0, 0), this.bounds.size);}/// <summary>/// 设置边框控件可视区域/// </summary>/// <returns></returns>private graphicspath buildframe(){ graphicspath path = new graphicspath(); //上边框 siderects[0] = new rectangle(0, 0, this.width - square.width - 1, square.height + 1); //左边框 siderects[1] = new rectangle(0, square.height + 1, square.width + 1, this.height - square.height - 1); //下边框 siderects[2] = new rectangle(square.width + 1, this.height - square.height - 1, this.width - square.width - 1, square.height + 1); //右边框 siderects[3] = new rectangle(this.width - square.width - 1, 0, square.width + 1, this.height - square.height - 1); path.addrectangle(siderects[0]); path.addrectangle(siderects[1]); path.addrectangle(siderects[2]); path.addrectangle(siderects[3]); return path;}#endregion/// <summary>/// 绘图/// </summary>public void draw(){ this.bringtofront(); //g.fillrectangles(brushes.lightgray, siderects); //填充四条边框的内部 pen pen = new pen(color.black); pen.dashstyle = dashstyle.dot;//设置为虚线,用虚线画四边，模拟微软效果 g.drawlines(pen, linepoints);//绘制四条边线 g.fillrectangles(brushes.white, smallrects); //填充8个小矩形的内部 foreach (rectangle smallrect in smallrects) { g.drawellipse(pens.black, smallrect); //绘制8个小椭圆 } //g.drawrectangles(pens.black, smallrects); //绘制8个小矩形的黑色边线}/// <summary>/// 设置光标状态/// </summary>public bool setcursorshape(int x, int y){ point point = new point(x, y); if (!controlrect.contains(point)) { cursor.current = cursors.arrow; return false; } else if (smallrects[0].contains(point)) { cursor.current = cursors.sizenwse; mpoc = mouseposonctrl.topleft; } else if (smallrects[1].contains(point)) { cursor.current = cursors.sizenesw; mpoc = mouseposonctrl.topright; } else if (smallrects[2].contains(point)) { cursor.current = cursors.sizenesw; mpoc = mouseposonctrl.bottomleft; } else if (smallrects[3].contains(point)) { cursor.current = cursors.sizenwse; mpoc = mouseposonctrl.bottomright; } else if (siderects[0].contains(point)) { cursor.current = cursors.sizens; mpoc = mouseposonctrl.top; } else if (siderects[1].contains(point)) { cursor.current = cursors.sizewe; mpoc = mouseposonctrl.left; } else if (siderects[2].contains(point)) { cursor.current = cursors.sizens; mpoc = mouseposonctrl.bottom; } else if (siderects[3].contains(point)) { cursor.current = cursors.sizewe; mpoc = mouseposonctrl.right; } else { cursor.current = cursors.arrow; } return true;}/// <summary>/// 控件移动/// </summary>private void controlmove(){ cpoint = cursor.position; int x = cpoint.x - ppoint.x; int y = cpoint.y - ppoint.y; switch (this.mpoc) { case mouseposonctrl.top: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } break; case mouseposonctrl.bottom: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } break; case mouseposonctrl.left: if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.right: if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; case mouseposonctrl.topleft: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.topright: if (basecontrol.height - y > minheight) { basecontrol.top += y; basecontrol.height -= y; } else { basecontrol.top -= minheight - basecontrol.height; basecontrol.height = minheight; } if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; case mouseposonctrl.bottomleft: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } if (basecontrol.width - x > minwidth) { basecontrol.left += x; basecontrol.width -= x; } else { basecontrol.left -= minwidth - basecontrol.width; basecontrol.width = minwidth; } break; case mouseposonctrl.bottomright: if (basecontrol.height + y > minheight) { basecontrol.height += y; } else { basecontrol.height = minheight; } if (basecontrol.width + x > minwidth) { basecontrol.width += x; } else { basecontrol.width = minwidth; } break; } ppoint = cursor.position;} #endregion#region events/// <summary>/// 鼠标按下事件：记录当前鼠标相对窗体的坐标/// </summary>void framecontrol_mousedown(object sender, mouseeventargs e){ ppoint = cursor.position;}/// <summary>/// 鼠标移动事件：让控件跟着鼠标移动/// </summary>void framecontrol_mousemove(object sender, mouseeventargs e){ if (e.button == mousebuttons.left) { this.visible = false; movecontrol.drawdragbound(basecontrol); controlmove(); } else { this.visible = true; setcursorshape(e.x, e.y); //更新鼠标指针样式 }}/// <summary>/// 鼠标弹起事件：让自定义的边框出现/// </summary>void framecontrol_mouseup(object sender, mouseeventargs e){ this.basecontrol.refresh(); //刷掉黑色边框 this.visible = true; createbounds(); draw();}#endregion}} |
四、遗留问题
1.listbox存在拖拉高度时，存在莫名奇妙的bug。
2.目前该版本只支持单控件的拖拉，多控件同时拖拉等下次有空再弄。
以上这篇c# 实现拖拉控件改变位置与大小的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：http://blog.csdn.net/hugo20/article/details/51534968
