UWP C# Add Button Dynamically and Organizing On StackPanel

Question

I understand there are a few post asking about adding buttons dynamically but I could not find out how to organize them on the stackpanel. I have no issue adding new buttons but is there any way to organize them in column and row?

<Grid Margin="400,0,0,0">
     <StackPanel x:Name="stackpanel">
          <Button x:Name="Button" Height="30" Width="100" Content="Button" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,20,0,0" Click="Button_Click"/>
     </StackPanel>
</Grid>

private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button b = new Button(); ;
        stackpanel.Children.Add(b);
        b.Content = "Button";
    }

Please help. Thanks.

Update: I'd like to add button(s) based on how many times the button is clicked. It adds until 4th rom then move to the next/new column.

Answer 1

From the comments i took, that it is possbile to use a Grid too. To achieve the desired layout you could use the following:

XAML:

<Grid Margin="400,0,0,0">
        <Grid x:Name="myGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="addBtn" Height="30" Width="100" Content="Button" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,20,0,0" Click="Button_Click"></Button>
        </Grid>
    </Grid>

I replaced your StackPanel with a Grid and added definitions for the four rows and the first column.

CS:

First we need to add a counter:

public int buttonCounter = 1;

Then we need to change the Button_Click method:

private void Button_Click(object sender, RoutedEventArgs e)
        {

            //Create the button
            Button b = new Button();
            b.Height = 30;
            b.Width = 100;
            b.VerticalAlignment = VerticalAlignment.Top;
            b.HorizontalAlignment = HorizontalAlignment.Left;
            b.Margin = new Thickness(20, 20, 0, 0);
            b.Content = "Button " + buttonCounter;
            b.Click += Button_Click;

            //Calculate the place of the button
            int column = (int)(buttonCounter / 4);
            int row = buttonCounter % 4;

            //Check if you need to add a columns
            if(row == 0)
            {
                ColumnDefinition col = new ColumnDefinition();
                col.Width = new GridLength(column, GridUnitType.Auto);
                myGrid.ColumnDefinitions.Add(col);
            }

            //Add the button
            myGrid.Children.Add(b);
            Grid.SetColumn(b, column);
            Grid.SetRow(b, row);
            buttonCounter++;
        }

Inside this method, the position of the new button is automatically calculated and if needed, a new column is added to the grid.

Answer 2

Try this:

    <Grid Margin="400,0,0,0">
       <UniformGrid x:Name="ButtonsUniformGrid" Columns="2" Rows="4"/>
    </Grid>

If you need to have a button at the beginning, when you initialize your view do the following:

    Button b = new Button(); ;
    b.Content = "Button";
    b.Click += Button_Click;
    ButtonsUniformGrid.Children.Add(b);

Then, everytime you click on it will put a new button in the grid. Let me know if you have any other questions about this :)

---

As commented Uwp doesn't include UniformGrid if you don't specify it in your xaml. If you want to use it, just include this:

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

and your UniformGrid will be like this:

<controls:UniformGrid...../>