How to click a button to create many buttons in WPF?

Question

I hope that every time the "Create Button" button is clicked, a new button will be created, with a maximum of 8 buttons in each column, and then continue to click the "Create Button" button, and new buttons will be created in the second column, and so on , the effect I want to achieve is this: enter image description here

But currently I'm limited, it's something like this: enter image description here

Here is my 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>

Here is my 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++;
        }
    }
}

Answer 1

1. Add the event grid_Loaded for the grid

2. Get nbr of columns

3. Create StackPanel in each columns/Rows..

   public partial class MainWindow : Window
   {
      private int numBut = 0;
      private List<StackPanel> stP = new List<StackPanel>();
   
     public MainWindow()
     {
        InitializeComponent();
     }
   
    private void Button1_Click(object sender, RoutedEventArgs e)
    {
        if (numBut >= 8 * stP.Count) return;
   
        var col = numBut / 8;
        var st = stP[col];
   
        Button button = new Button();
        button.Content = $"Button {++numBut}";
        button.HorizontalAlignment = HorizontalAlignment.Left;
        button.VerticalAlignment = VerticalAlignment.Top;
        button.Margin = new Thickness(10);
        Grid.SetRow(button, 1);
        Grid.SetColumn(button, col);
        st.Children.Add(button);
    }
   
    private void grid_Loaded(object sender, RoutedEventArgs e)
    {
        var nbCols = grid.ColumnDefinitions.Count;
   
        for (var c = 0; c < nbCols; c++)
        {
            StackPanel st = new StackPanel();
            st.Orientation = Orientation.Vertical;
            Grid.SetRow(st, 1);
            Grid.SetColumn(st, c);
            grid.Children.Add(st);
            stP.Add(st);
        }
     }
   }
   

---

result: