WPF 动态添加组件，并计算坐标，让组件按列表排列

在软件开发中，经常有动态添加控件的需求，并且让控件自动排序，当超过容器的宽度时，自动换行，在 Winfrom，Unity 中都有自动布局的组件，WPF 应该也有，只是我刚初学，不太清楚。

假如，在一个WPF容器中添加36个控件，每排12个，请问第4个控件和第16个控件，在容器的第几排和第几列？

在编程中遍历数组的习惯性写法，从0开始计数，3则代表4，求余数和它的商就能计算出它在那一排，那一列了。

下面开始求余数，图中这个是网页版的在线求余数计算器，用搜索引擎搜一下就出来了

图一：3 / 12 的商等于 0 代表的是第一排，余数等于 3 代表的是第四列

图二：15 / 12 的商等于 1 代表的是第二排，余数等于 3 代表的是第四列

知道了这个原理，现在新建一个项目，界面的布局非常简单，代码基本是默认的，可以直接复制下面 MainWindow.xaml 中的代码。

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="900" Loaded="Window_Loaded">
    <Grid Width="870" Height="96" Background="Pink" Name="MyGrid">
    </Grid>
</Window>

MainWindow.xaml.cs

我设置了一行固定添加12个控件，在这里并没有手动去计算，读者也可以自己实现这些功能，公式是：

X轴能容纳的控件个数 = 容器的宽度  /（控件的宽度 + 间隔距离）----结果取整

Y轴能容纳的控件个数 = 容器的高度  /（控件的高度 + 间隔距离）----结果取整

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }


        //代表一行显示多少个控件
        private int CheckBoxCount = 12;

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<string> allNameList = new List<string>()
            {
              "上官云","上官云","上官云","上官云","上官云","上官云","上官云",
              "上官云","上官云","上官云","上官云","上官云","上官云","上官云",
              "上官云海","上官云海","erss","13e","scced","2edd","246","dfe","df9",
              "8dl","erss","13e","scced","2edd","246","dfe","df9","8dl",
            };

            for (int i = 0; i < allNameList.Count; i++)
            {
                //商
                int quotient = i / CheckBoxCount;
                //余数
                int remainder = i % CheckBoxCount;
                //下面的71是组件的宽度，5 是组件之间的间隔（暂时写死）
                float x = (remainder * 71) + 5;
                float y = (quotient * 25) + 5;

                CheckBox checkbox = new CheckBox();
                checkbox.Name = "CheckBox_" + i;
                checkbox.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
                checkbox.VerticalAlignment = System.Windows.VerticalAlignment.Top;
                checkbox.Margin = new Thickness(x, y, 0, 0);
                checkbox.Content = allNameList[i];

                //添加到容器中
                this.MyGrid.Children.Add(checkbox);
            }
        }
    }
}

下面开始运行，看看效果：

end