如何在WPF中实现点击按钮按列批量创建按钮？

点击「Create Button」按钮时需创建新按钮，要求每列最多容纳8个按钮，当前列满额后自动在第二列创建新按钮，以此类推。但当前实现效果不符合预期，相关代码如下：

MainWindow.xaml 代码 #

<Window x:Class="Helloone.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:Helloone"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="grid" VerticalAlignment="Top" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button x:Name="button1" Content="Create Button" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button1_Click" Grid.Row="0" Grid.Column="0"/>
    </Grid>
</Window>

MainWindow.xaml.cs 代码 #

namespace Helloone
{
 /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private int buttonCount = 1;
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            // Create a new button
            Button button = new Button();
            button.Content = "Button " + buttonCount.ToString();

            button.HorizontalAlignment = HorizontalAlignment.Left;
            button.VerticalAlignment = VerticalAlignment.Top;
            button.Margin = new Thickness(10);

            // Add the new button to the Grid
            int row = (buttonCount - 1) / 3 + 1;
            int column = (buttonCount - 1) % 3;
            grid.Children.Add(button);
            Grid.SetRow(button, row);
            Grid.SetColumn(button, column);

            // Increment the button count
            buttonCount++;
        }
    }
}

当前问题核心是行列计算逻辑错误，以及Grid的行/列定义不足，修改步骤如下：

1. 修正行列计算逻辑：需求是每列最多8个按钮，因此要先计算按钮所在列，再计算该列内的行号：

   • 列号：(buttonCount - 1) / 8（每8个按钮换一列）
   • 行号：(buttonCount - 1) % 8 + 1（+1是因为第0行留给了「Create Button」）

2. 动态添加行/列：避免Grid的行/列数量不足导致按钮重叠，当需要的行/列超过现有定义时，自动添加新的行/列定义。

修改后的Button1_Click方法代码：

private void Button1_Click(object sender, RoutedEventArgs e)
{
    // 创建新按钮
    Button button = new Button();
    button.Content = "Button " + buttonCount.ToString();
    button.HorizontalAlignment = HorizontalAlignment.Left;
    button.VerticalAlignment = VerticalAlignment.Top;
    button.Margin = new Thickness(10);

    const int maxButtonsPerColumn = 8;
    // 计算当前按钮所在列和行
    int column = (buttonCount - 1) / maxButtonsPerColumn;
    int row = (buttonCount - 1) % maxButtonsPerColumn + 1;

    // 动态添加列（如果需要）
    while (column >= grid.ColumnDefinitions.Count)
    {
        grid.ColumnDefinitions.Add(new ColumnDefinition());
    }

    // 动态添加行（如果需要）
    while (row >= grid.RowDefinitions.Count)
    {
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    }

    // 将按钮添加到Grid并设置行列
    grid.Children.Add(button);
    Grid.SetRow(button, row);
    Grid.SetColumn(button, column);

    buttonCount++;
}

3. 可选优化：如果希望按钮在列内垂直居中排列，可以将按钮的VerticalAlignment改为Center，同时行定义保持Auto即可。

内容的提问来源于stack exchange，提问作者CsharpIsGood