控件的布局
控件的布局:当窗口中有多个控件时,如何决定每个控件的位置和大小。
布局的方式:
- 可视化布局:在设计器里拖放操作
- 手工布局:用代码计算每个控件的位置
- 使用布局器:用布局器自动布局
演示: 添加几个控件,进行可视化布局。。
按钮,Button
文本框,TextBox
图片框,PictureBox
为PictureBox添加背景颜色
直接使用鼠标拖拽方式布局
按住ctrl 同时选中两个控件,进行对其方式排布选择
运行程序
本质上,是在窗口初始化的时候,使用代码设置了每控件的位置和大小
例如,在Form1.Designer.cs 中,
button1.Location = new Point(375, 12);
button1.Size = new Size(75, 23);
要点与细节
1当窗口改变大小时,布局并不能够自动适应所以,此种布局只适用于窗口大小固定不变的情况
控件大小没有随着,窗体的大小改变而自动变换
手工布局
手工布局:用代码计算每个控件的位置
重写 OnLayout方法
override void OnLayout (LayoutEventArgs levent)
{
}
当窗口大小改变时,会自动调用这个方法重新布局
1.依然添加上述三个控件
代码
演示:在窗口中添加几个控件,并实现手工布局。
其中,窗口的大小:
Size:窗口总大小(含标题栏和边框)
ClientSize:仅窗口客户区的大小
要点与细节
1 TextBox : AutoSize = false否则它会自己计算所需的大小,参考图文教程
2 区分窗口的 Size 和 ClientSize
3 窗口的自适应 : 当窗口大小变化时,会自动调用 OnLayout() 方法
思考:谁调用了这个方法?是系统框架自动调用的
Anchor
控件的两个通用的布局属性:
Anchor:锚定,将控件固定于某个位置
Dock:停靠,将控件停靠在一侧或中央
本节介绍 Anchor 用法
设置一个控件的Anchor为TopIRight
当窗口大小改变时,该控件锚定于窗口的右上角即,与父窗口的上边距Top 和右边距 Right 保持不变(无论用户怎样调节按钮,都位于右上角)
右上角
选中为灰色,取消为白色
运行程序,改变窗体大小,按钮总是保持右上角不变
水平拉伸
锚定于上边缘,水平拉伸
- Anchor = Top I Left l Right
运行
水平居中
锚定于上边缘、水平居中-水平居中
- Anchor = Top I Left I Right
1.先把按钮居中,选中按钮,选择格式
- 设置Anchor
运行测试,此时他是停靠在上边缘的位置
拉伸
-Anchor = Top, Right l Bottom l Left
就是一个全面拉伸的效果
水平,垂直居中
-水平居中,垂直居中
-Anchor: None
先设置垂直对齐
Dock
Dock:停靠,将控件停靠在一侧或中央
上ToP
下 Bottom
左 Left
右 Right
中 Fill
无 None
演示:Panel, 面板
1 添加一个Panel,停靠在上侧
选择top
添加背景色
2 添加一个Panel,停靠在左侧
3添加一个PictureBox,依靠在中央
运行项目,改变窗口大小的时候,控件也相应改变
依靠于左右两侧时,可以调整宽度;上下两侧时,可以调整高度。
布局的嵌套
实际的项目中,界面布局可能有多个层次
比如,
一个Panel内部可能还会添加多个控件
要点与细节
1 当设置 Dock 属性时,Anchor属性无效,不能同时使用