Winform下实现Grid布局「建议收藏」

很久没写非常代码化的文章了，代码倒是每天都在写，但是前几天看到一个朋友在用一个“只有一个文本框”的窗体来写“让控件随窗体大小改变而改变”，他用的方法是在窗体大小变化后，重新计算根据窗体的新Size计算这一个控件的Size。所以我给他评论是：单个控件压根不需要这么做，而多个控件这么做又没有意义，所以最好的办法就是参考CSS的Grid布局方法自定义一套基于WIniform的Grid布局。

Winform的控件都有一个Anchor属性。只不过如果使用Anchor的话，对于一个控件确实是可以的，但是多个控件行列布局的时候用Anchor就不行了，放大缩小后完全乱套。比如我布局得好好的一个页面：

用Anchor布局得很好的页面

用Anchor布局的话，上下左右控件的位置倒是可以随窗口大小变化，但是大小却不会变。但是对于中间的空件，那么布局后很可能就是乱七八糟的了。

中间的控件Anchor布局后显然很乱，不好调整

所以刚好周末，就花了点时间描述一下我所说的参考CSS的Grid布局方法来实现一个Winform下的Grid布局，思路如下：

1. 模拟CSS的Grid布局，加一个GridArea的类，用于存储grid-row-start / grid-column-start / grid-row-end / grid-column-end（想简单的话用一个Rectangle来替代也行）；
2. 在窗体的初始化方法中，完成控件初始化后(InitializeComponent)，计算每个控件所属的GridArea；
3. 在窗体Resize后，根据前面计算出来的每个控件GridArea，重新计算每个控件的位置，大小。

就是这么简单：

Grid布局前是这样的

Grid布局后，窗体放大缩小（用了一个录屏软件，希望能审核通过吧）

Anchor布局后效果

总的代码就100行，如果有朋友需要，欢迎使用。

public partial class GridLayoutForm : Form
    {
        private static int GRIDSPACE = 2;
        private Dictionary<Control, GridArea> ControlGridArea = new Dictionary<Control, GridArea>();

        public GridLayoutForm()
        {
            InitializeComponent();

            this.InitGridAreas();
        }

        private int GridCols { get; set; }
        private int GridRows { get; set; }

        private GridArea CalcGridArea(Control ctrl)
        {
            int top = ctrl.Top;
            int left = ctrl.Left;
            int width = ctrl.Width;
            int height = ctrl.Height;

            int startRow = top / GRIDSPACE;
            int startCol = left / GRIDSPACE;
            if (startRow <= 0) startRow = 1;
            if (startCol <= 0) startCol = 1;

            int endRow = (top + height) / GRIDSPACE;
            int endCol = (left + width) / GRIDSPACE;
            if ((top + height) % GRIDSPACE > 0)
            {
                endRow = (top + height + GRIDSPACE) / GRIDSPACE;
            }
            if ((left + width) % GRIDSPACE > 0)
            {
                endCol = (left + width + GRIDSPACE) / GRIDSPACE;
            }

            // grid-row-start / grid-column-start / grid-row-end / grid-column-end
            return new GridArea(startRow, startCol, endRow, endCol + 1);
        }

        public void RelocationControls()
        {
            if (this.GridCols > 0 && this.GridRows > 0)
            {
                double spaceW = (double)this.Width / this.GridCols;
                double spaceH = (double)this.Height / this.GridRows;

                foreach (Control child in this.Controls)
                {
                    if (this.ControlGridArea.ContainsKey(child))
                    {
                        GridArea area = this.ControlGridArea[child];

                        int left = (int)Math.Round((area.GridColumnStart) * spaceW, 0);
                        int top = (int)Math.Round((area.GridRowStart) * spaceH, 0);

                        int width = (int)Math.Round((area.GridColumnEnd - 1) * spaceW - left, 0);
                        int height = (int)Math.Round((area.GridRowEnd - 1) * spaceH - top, 0);

                        child.Location = new Point(left, top);
                        child.Size = new Size(width, height);
                    }
                }
            }
        }

        public void InitGridAreas()
        {
            this.GridCols = this.Width / GRIDSPACE;
            this.GridRows = this.Height / GRIDSPACE;

            foreach (Control child in this.Controls)
            {
                this.ControlGridArea[child] = this.CalcGridArea(child);
            }

            this.RelocationControls();
        }

        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);
            this.RelocationControls();
        }

        private class GridArea
        {
            // grid-row-start / grid-column-start / grid-row-end / grid-column-end
            public GridArea(int rowStart, int columnStart, int rowEnd, int columnEnd)
            {
                this.GridRowStart = rowStart;
                this.GridColumnStart = columnStart;
                this.GridRowEnd = rowEnd;
                this.GridColumnEnd = columnEnd;
            }

            public int GridRowStart { get; set; }
            public int GridColumnStart { get; set; }
            public int GridRowEnd { get; set; }
            public int GridColumnEnd { get; set; }
        }
    }