控件的布局

$$控件的布局$$

1.控件的布局

控件的布局:当窗口中有多个控件时&＃xff0c;如何决定每个控件的位置和大小。

布局的方式:

1 可视化布局:在设计器里拖放操作
2 手工布局:用代码计算每个控件的位置
3 使用布局器:用布局器自动布局


演示:添加几个控件&＃xff0c;进行可视化布局

按钮, Button
文本框,TextBox
图片框,PictureBox


当窗口改变大小时&＃xff0c;布局并不能够自动适应所以&＃xff0c;此种布局只适用于窗口大小固定不变的情况

2.手工布局

手工布局:用代码计算每个控件的位置
重写OnIayout方法

override void OnLayout (LayoutEventArgs levent){
}


当窗口大小改变时&＃xff0c;会自动调用这个方法重新布局

演示:在窗口中添加几个控件&＃xff0c;并实现手工布局。
其中&＃xff0c;窗口的大小:
Size:窗口大小(含标题栏和边框)
ClientSize :仅窗口客户区的大小

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;namespace WinForm基础3
{public partial class Form1 : Form{public Form1(){InitializeComponent();this.timeField.AutoSize &＃61; false;}protected override void OnLayout(LayoutEventArgs levent){// 1.调用父类的OnLayout(),不是必需的base.OnLayout(levent);// 2.获取窗口的大小ClientSize(仅客户区&＃xff0c;不含标题栏&＃xff09;int w &＃61; this.ClientSize.Width;int h &＃61; this.ClientSize.Height;// 3.计算每个控件的位置和大小int yoff &＃61; 0;yoff &＃61; 4;this.timeField.Location &＃61; new Point(0, yoff);this.timeField.Size &＃61; new Size(w - 80, 30);this.button1.Location &＃61; new Point(w - 80, yoff);this.button1.Size &＃61; new Size(80, 30);yoff &＃43;&＃61; 30;yoff &＃43;&＃61; 4;this.pictureBox1.Location &＃61; new Point(0, yoff);this.pictureBox1.Size &＃61; new Size(w, h - yoff - 4);}private void On_Test(object sender, EventArgs e){string timeStr &＃61; DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");timeField.Text &＃61; timeStr;}}
}

1 TextBox : AutoSize &＃61; false
否则它会自己计算所需的大小

2区分窗口的Size和 ClientSize

3窗口的自适应:当窗口大小变化时&＃xff0c;会自动调用OnLayout()方法

3.Anchor

控件的两个通用的布局属性:

Anchor:锚定&＃xff0c;将控件固定于某个位置
Dock:停靠&＃xff0c;将控件停靠在一侧或中央


演示:设置一个控件的 Anchor为Top l Right
当窗口大小改变时&＃xff0c;该控件锚定于窗口的右上角
即&＃xff0c;与父窗口的上边距Top和右边距 Right保持不变

1 锚定于左下角

• Anchor &＃61;Left | Bottom

2 锚定于右下角

• Anchor &＃61; Right | Bottom

3锚定于上边缘、水平拉伸

• Anchor &＃61; Top l Left l Right

4锚定于上边缘、水平居中-水平居中

• Anchor &＃61;Top l Left l Right

5拉伸

• Anchor &＃61; Top l Right I Bottom l Left

6居中

• 水平居中&＃xff0c;垂直居中-Anchor: None

4.Dock

Dock:停靠&＃xff0c;将控件停靠在一侧或中央

上 Top
下 Bottom
左 Left
右 Right
中 Fill
无 None


演示:Panel,面板

1添加一个Panel&＃xff0c;停靠在上侧
2添加一个Panel&＃xff0c;依靠在左侧
3添加一个PictureBox&＃xff0c;依靠在中央


依靠于左右两侧时&＃xff0c;可以调整宽度;上下两侧时&＃xff0c;可以调整高度。

当设置Dock属性时&＃xff0c;Anchor属性无效