按下按钮后动态添加 UI 元素到 StackPanel

Question

这是我的第一个问题:) 我不是专业程序员，我才 18 岁，我没有读过大学什么的，所以如果我说了一些愚蠢的话，请不要讨厌我:p

我正在为 Windows 10 UWP 制作（或者更确切地说是试图制作...）一个应用程序，我的一段 xaml 代码如下所示：

<Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="12"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="12"/>
            </Grid.RowDefinitions>
            <Rectangle Margin="0" Grid.Row="1" Fill="White" RadiusX="7" RadiusY="7"/>

            <Grid Grid.Row="1" Margin="12,6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <StackPanel>

                        <TextBox x:Name="textProduct" Margin="0,6,6,6" TextWrapping="Wrap"  VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Produkt..." BorderThickness="1"/>

                </StackPanel>

                <StackPanel Grid.Column="1">
                    <TextBox x:Name="textAdditionalInfo" Margin="6,6,0,6" TextWrapping="Wrap"  VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Dodatkowe info..." BorderThickness="1"/>
                </StackPanel>

            </Grid>

我在底部还有一个带有添加和删除按钮的应用栏。我希望能够在每次用户按下添加按钮时向两个 StackPanel 动态添加另一行文本框，并在每次点击删除按钮时动态添加一行文本框。不幸的是，我不知道如何实现这一目标。我试图找到答案，我认为这可以通过使用 UserControl 来完成，但是我不知道如何实现它。

我希望这不会太复杂，因为我不想看起来像一个要求别人为我完成所有工作的人...

如果是个大问题，那么它甚至不需要支持删除文本框。

希望你明白我的意思。我的母语不是英语，如有任何错误，请见谅 ;)

Answer 1

欢迎使用XAML，值得花时间学习！

为了显示数据 XAML 有一个叫做 DataBinding 的智能工具。一般概念是将一个列表（例如，您要在 StackPanel 中显示的所有 strings）绑定到视图中的一个元素。现在，无论何时修改该列表，视图都会自动适应。 StackPanel 不支持绑定，但例如 ListView 支持（如下所示）

你看看这个关于数据绑定的基本信息如何：https://blogs.msdn.microsoft.com/jerrynixon/2012/10/12/xaml-binding-basics-101/

考虑到这一点，您可以这样做：

<!-- insert at the top -->
<Page.Resources>
    <DataTemplate x:Name="MyDataTemplate">
        <TextBlock Text="{Binding } />
    </DataTemplate>
</Page.Resources>

<!-- insert where you want the list to appear -->
<ListView x:Name="ListView" ItemTemplate="{StaticResource MyDataTemplate}" ItemsSource="{Binding MyCollection}" />

对您来说唯一困难的部分是将列表绑定到 ListView，但我相信您可以通过上面的教程完成它 ;)

或者，您可以将 StackPanel 命名为 x:Key="MyStack"，然后手动添加项目：

MyStack.Children.Add(new TextBlock() {Text = "myText"});

但是，我真的可以推荐您使用 DataBinding 方法，因为它使得在更大的项目中与 UI 的交互变得更加容易。

按下按钮后动态添加 UI 元素到 StackPanel

Dynamically add UI elements to StackPanel after button pressed

c#

win-universal-app

uwp-xaml