【C#学习记录】如何让界面控件实现自适应布局（Winform）_c#winfrom窗体及控件的自适应

小伙伴们大家好，我是雷工！
在软件界面设计中，客户常常要求设计的界面可以随意缩放，缩放过程中，界面中的按钮等控件也会随着窗体变大缩小自动调整显示位置和尺寸大小。在C#的Winform窗体中如何实现这个效果，下面我们一起学习下。

一、样例开发环境

本样例的程序运行环境具体如下。
（1）、系统开发平台：Microsoft Visual Studio 2019。
（2）、系统开发语言：C#语言，Winform框架。

二、界面设计

1、新建Winform窗体应用程序；
2、在窗体上布局控件。

2.1、数字显示部分：

a、添加Panel控件，设置相关属性：
修改BackColor背景色，
设置Dock停靠属性（TOP），
Anchor属性：Top, Bottom, Left, Right；
b、在Panel控件上添加label控件，并设置相关属性
AutoSize属性：False；
TextAlign属性：MiddleRight；
Font属性：微软雅黑, 21.75pt；
BackColor属性：Aqua；
Anchor属性：Top, Bottom, Left, Right；

2.2、按钮部分：

添加一组Button按钮控件，并修改按钮的Text，调整合适的大小，并排列整齐。

三、运行效果：

1、按钮的位置和尺寸无法随窗口尺寸的变化而变化。

2、按钮的位置和尺寸随窗口尺寸的变化而变化。

四、实现思路

1、实现变化需要进行比例缩小或扩大，因此在窗体初始化时先获取窗体的尺寸；
2、需要遍历窗体控件记录一下窗口尺寸变化前的位置和尺寸；
3、当窗体尺寸变化时，获取当前窗体的尺寸，需要根据窗口原尺寸计算缩放比例；
4、当窗体变化后，遍历窗体控件，将根据缩放比例计算的位置和尺寸设置到控件；

五、代码实现与分析

1、需要记录的控件的位置以及尺寸

		Dictionary<string, Rect> normalControl = new Dictionary<string, Rect>();
        private void Form1_Load(object sender, EventArgs e)
        {
            //记录相关对象以及原始尺寸
            normalWidth = this.panel2.Width;
            normalHeight = this.panel2.Height;
            //通过父控件Panel进行控件的遍历
            foreach (Control item in this.panel2.Controls)
            {
                normalControl.Add(item.Name, new Rect(item.Left, item.Top, item.Width, item.Height));
            }

        }
1
2
3
4
5
6
7
8
9
10
11
12
13

2、根据原始比例进行新尺寸的计算并设置

private void Form1_SizeChanged(object sender, EventArgs e)
        {
            //根据原始比例进行新尺寸的计算
            int w = this.panel2.Width;
            int h = this.panel2.Height;

            foreach (Control item in this.panel2.Controls)
            {
                int newX = (int)(w * 1.00 / normalWidth * normalControl[item.Name].X);
                int newY = (int)(h * 1.00 / normalHeight * normalControl[item.Name].Y);
                int newW = (int)(w * 1.00 / normalWidth * normalControl[item.Name].Widht);
                int newH = (int)(h * 1.00 / normalHeight * normalControl[item.Name].Height);

                item.Left = newX;
                item.Top = newY;
                item.Width = newW;
                item.Height = newH;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

六、完整代码

using System;
using System.Collections.Generic;
using System.Windows.Forms;
namespace A006_computer
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.Load += Form1_Load;
            this.SizeChanged += Form1_SizeChanged;
        }
        //窗体的默认宽和高
        int normalWidth = 0;
        int normalHeight = 0;
        //需要记录的控件的位置以及宽和高（X，Y，Widht,Height）
        Dictionary<string, Rect> normalControl = new Dictionary<string, Rect>();
        private void Form1_Load(object sender, EventArgs e)
        {
            //记录相关对象以及原始尺寸
            normalWidth = this.panel2.Width;
            normalHeight = this.panel2.Height;
            //通过父控件Panel进行控件的遍历
            foreach (Control item in this.panel2.Controls)
            {
                normalControl.Add(item.Name, new Rect(item.Left, item.Top, item.Width, item.Height));
            }
        }
        private void Form1_SizeChanged(object sender, EventArgs e)
        {
            //根据原始比例进行新尺寸的计算
            int w = this.panel2.Width;
            int h = this.panel2.Height;

            foreach (Control item in this.panel2.Controls)
            {
                int newX = (int)(w * 1.00 / normalWidth * normalControl[item.Name].X);
                int newY = (int)(h * 1.00 / normalHeight * normalControl[item.Name].Y);
                int newW = (int)(w * 1.00 / normalWidth * normalControl[item.Name].Widht);
                int newH = (int)(h * 1.00 / normalHeight * normalControl[item.Name].Height);
                item.Left = newX;
                item.Top = newY;
                item.Width = newW;
                item.Height = newH;
            }
        }        
    }
    class Rect
    {
        public Rect(int x,int y,int w,int h)
        {
            this.X = x;this.Y = y;this.Widht = w;this.Height = h;
        }
        public int X { get; set; }
        public int Y { get; set; }
        public int Widht { get; set; }
        public int Height { get; set; }
    }
}
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

七、结束语

该功能实现的方法可能有很多，此处仅记录本人学习并实操的过程。抛砖引玉，如有不当之处或大家有更好的实现方法欢迎留言讨论。