UWP C# 动态添加按钮并在 StackPanel 上组织

Question

我知道有几个 post 询问动态添加按钮，但我无法找到如何在 stackpanel 上组织它们。我添加新按钮没有问题，但有什么方法可以按列和行组织它们吗？

<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";
    }

请帮忙。谢谢

更新：我想根据点击按钮的次数添加按钮。它添加到第 4 个 rom，然后移动到 next/new 列。

Answer 1

试试这个：

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

如果您需要在开头有一个按钮，请在初始化视图时执行以下操作：

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

然后，每次点击它都会在网格中放置一个新按钮。如果您对此有任何其他问题，请告诉我:)

如评论所述，如果您未在 xaml 中指定，Uwp 不包括 UniformGrid。如果你想使用它，只需包括这个：

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

你的 UniformGrid 将是这样的：

<controls:UniformGrid...../>

Answer 2

根据我的评论，也可以使用 Grid。要获得所需的布局，您可以使用以下内容：

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>

我用 Grid 替换了你的 StackPanel 并添加了四行和第一列的定义。

CS:

首先我们需要添加一个计数器：

public int buttonCounter = 1;

然后我们需要改变Button_Click方法：

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++;
        }

在这个方法中，新按钮的位置是自动计算的，如果需要，一个新列被添加到网格。

UWP C# 动态添加按钮并在 StackPanel 上组织

UWP C# Add Button Dynamically and Organizing On StackPanel

c#

xaml

uwp

windows-iot-core-10