使用动态和编程方式单击按钮在 UWP 中重复一组控件

Question

我试图在用户每次单击 add 按钮时动态添加一组控件，并在他们单击 delete 按钮时删除。 Controls to be repeated

Before

After clicking Add Item

XAML代码

<StackPanel Name="itemStack" Orientation="Horizontal" VerticalAlignment="Bottom" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4">
    <AutoSuggestBox Name="itemCategory"
                PlaceholderText="Ring"
                Header="Item Category" 
                Grid.Row="3" 
                Grid.Column="0"
                HorizontalAlignment="Stretch" 
                QueryIcon="List"
                Margin="10,10,10,0"
                />
    <AutoSuggestBox Name="itemDescription" 
                PlaceholderText="3 White Stone Ring" 
                Header="Description of the Jewels"                          
                Grid.Row="3" 
                Grid.Column="1"
                Grid.ColumnSpan="2"
                HorizontalAlignment="Stretch" 
                QueryIcon="List"
                Margin="10,10,10,0"
                />
    <TextBox Name="qty" 
        Text="1" 
        Header="Quantity"
        Grid.Row="3" 
        Grid.Column="4"
        HorizontalAlignment="Stretch"
        Margin="10,10,10,0"
        />
    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Grid.Row="3" Grid.Column="5">
        <AppBarButton Name="addItem_button"
                    Icon="Add"
                    Label="Add item"                                    
                    LabelPosition="Default"
                    VerticalAlignment="Bottom"
                    Click="addItem_button_Click"
                    />
        <AppBarButton Name="deleteItem_button"
                    Icon="Cancel"
                    Label="Del item"
                    LabelPosition="Default"      
                    VerticalAlignment="Bottom"
                            />
    </StackPanel>
</StackPanel>

我想重复整个堆栈面板，包括应用栏按钮。

Answer 1

使用 MVVM（模型-视图-视图模型）数据绑定 ListView 将是这种情况的理想选择。

您需要做的是创建一个 ListView，其中将包含 StackPanel 作为其 ItemTemplate。然后你将需要一个 ViewModel class，它将以 TwoWay 方式数据绑定到控件，这将确保控件中选择的值将投影到 ViewModel classes。最后，要创建按钮功能，您需要将操作绑定到 Command 属性.

由于一开始需要做的事情很多，我建议您先查看一些有关 UWP 中数据绑定的简单教程：

Answer 2

正如@Martin 在他的回答中所说，实现所需内容的常用方法是使用带有 ItemTemplate 的 Listview。

如果您想将其插入网格行，这意味着您必须以编程方式进行大量工作：创建控件、更新网格行和插入控件。您还必须监控何时删除控件以更新网格。

如果您想这样做，请将 xaml 包装在自定义控件中，以便您可以重复使用它。然后在代码隐藏中操作网格的 Children 属性...您将使用附加的网格属性 Grid.SetRow 将行分配给您的控件。

如你所见，很多

使用动态和编程方式单击按钮在 UWP 中重复一组控件

Repeat a set of controls in UWP using button clicks dynamically and programmatically

c#

xaml

uwp

uwp-xaml