Dynamically add UI elements to StackPanel after button pressed

Question

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

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>

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...

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 ;)

Answer 1

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

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)

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

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 ;)

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

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

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