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

时间:2016-04-16 10:09:26

标签: c# win-universal-app uwp-xaml

这是我的第一个问题:) 我不是一个专业的程序员,我只有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动态添加另一行TextBox,并在每次按下“删除”按钮时删除一行。不幸的是,我不知道如何实现这一目标。我试图找到答案,我认为这可以通过使用UserControl完成,但我不知道如何实现它。

我希望这样做并不太复杂,因为我不希望看到一个人要求其他人为我做我所有的工作......

如果这是一个大问题,那么它甚至不需要支持删除TextBox。

我希望你理解我的意思。我不是英国人,对任何错误都很抱歉;)

1 个答案:

答案 0 :(得分:8)

欢迎来到XAML,非常值得花时间学习它!

为了显示数据,XAML有一些名为DataBinding的智能。一般概念是将List(例如,要在strings中显示的所有StackPanel)绑定到视图中的元素。现在,无论何时修改该列表,视图都会自动适应。 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,但我确信你可以使用上面的教程来完成;)

Alernatively,您可以使用StackPanelx:Key="MyStack"命名,并手动添加项目:

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

但是,我真的建议您采用DataBinding方法,因为它可以在更大的项目中更轻松地与UI进行交互。