【C#学习记录】如何让界面控件实现自适应布局(Winform)

小伙伴们大家好,我是雷工!
在软件界面设计中,客户常常要求设计的界面可以随意缩放,缩放过程中,界面中的按钮等控件也会随着窗体变大缩小自动调整显示位置和尺寸大小。在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));
            }

        }

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;
            }
        }

六、完整代码

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; }
    }
}

七、结束语

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

  • 13
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雷工笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值