按下按钮后将 UI 元素动态添加到 StackPanel [英] Dynamically add UI elements to StackPanel after button pressed

问题描述

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

This is my first question here :) I'm not a professional programmer, I'm only 18 and I haven't studied at university or anything, so please don't hate me if I say something stupid :p

我正在制作(或者更确切地说是尝试制作...)一个适用于 Windows 10 UWP 的应用程序，我的一段 xaml 代码如下所示:

I'm making (or rather trying to make...) an app for Windows 10 UWP and a piece of my xaml code looks like this:

<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 来完成，但是我不知道如何实现.

I also have an app bar at the bottom with Add and Delete buttons. I'd like to be able to dynamically add another line of TextBoxes to both StackPanels every time the user presses the Add button and Delete one every time they hit the Delete button. Unfortunetely I have no idea how to achieve this. I've tried to find an answer and I think this can be done by using UserControl, however I have no idea how to implement this.

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

I hope it's not too comlicated to do, because I don't want to seeem like a person that asks other people to do all my work for me...

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

If it's a big problem, then it doesn't even need to support deleting the TextBoxes.

我希望你明白我的意思.我不是英语母语所以很抱歉有任何错误;)

I hope you understand what I mean. I'm not native english so sorry for any mistakes ;)

推荐答案

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

Welcome to XAML, it's well worth the time learning it!

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

For displaying data XAML has something smart called DataBinding. The general concept is you bind a List (for example all strings you want to display in your StackPanel) to an element in the view. Now whenever you modify that list, the view automatically adapts. StackPanel does not support Binding, but for example ListView does (as seen below)

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

How about you take a look at this for basic informations about databinding: https://blogs.msdn.microsoft.com/jerrynixon/2012/10/12/xaml-binding-basics-101/

考虑到这一点，您可以执行以下操作:

With this in mind, you can do something like this:

<!-- 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，但我相信您可以使用上面的教程来完成；)

The only hard part for you will be to bind the list to the ListView, but I'm sure you can do it with the tutorial from above ;)

或者，您可以使用 x:Key="MyStack" 命名您的 StackPanel，并手动添加项目:

Alernatively, you can name your StackPanel with x:Key="MyStack", and add the items manually:

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

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

However, I can really recommend you to do the DataBinding approach, as it makes interacting with the UI so much easier in bigger projects.

这篇关于按下按钮后将 UI 元素动态添加到 StackPanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！