I am quite new to this, but I am trying to figure out how to dynamically add entries with a button click.

I am creating new entries with each button click but my issue is that the entries are placed under the button instead of ontop of it.

Here is how my app looks like:

[![enter image description here][1]][1]

By clicking the `Add Ingredient` button, I want to add a new entry.

This is what the front end looks like:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EasyChef.Views.AboutPage"
             xmlns:vm="clr-namespace:EasyChef.ViewModels"
             Title="{Binding Title}">
    
    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
        
        

    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackLayout BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                    <Label Text="EasyChef" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="10"/>
                   
                </ContentView>
            </StackLayout>
        </StackLayout>
        <ScrollView Grid.Row="1">
            <StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">
                <Label Text="Simply select ingredients!" FontSize="Title"/>
                <StackLayout x:Name="EntriesStackLayout">
                    <Grid VerticalOptions="CenterAndExpand" Margin="20" RowSpacing="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Entry Placeholder="Eg. Eggs" x:Name="EntryTag" Grid.Row="0"/>
                        
                        <Button Text="Add Ingredient"  Grid.Row="1" Clicked="Button_Clicked"/>
                    </Grid>
                </StackLayout>

                <CheckBox />
            </StackLayout>
        </ScrollView>
    </Grid>

</ContentPage>

And the back end()

public partial class AboutPage : ContentPage
{
    int x = 1;
    public AboutPage()
    {
        InitializeComponent();

    }


    private void Button_Clicked(object sender, EventArgs e)
    {
        AddEntry(EntriesStackLayout, "Ingredient "   x.ToString());
        x  ;
    }
    private void AddEntry(StackLayout sl, string name)
    {
        Entry entry = new Entry()
        {
            Placeholder = name,
        };
        sl.Children.Add(entry);
    }
}

My preferred solution would be to create new entries with each button click, but I am happy with having default entries and unhiding them in order with a click.

CodePudding user response：

A simple method is to move the Button to the outside of the StackLayout(StackLayout x:Name="EntriesStackLayout") and below the StackLayout.

Please refer to the following code:

     <ScrollView Grid.Row="1"> 
            <StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">
                <Label Text="Simply select ingredients!" FontSize="Title"/>
                <StackLayout x:Name="EntriesStackLayout">
                    <Grid VerticalOptions="CenterAndExpand" Margin="20" RowSpacing="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Entry Placeholder="Eg. Eggs" x:Name="EntryTag" Grid.Row="0"/>

                        <!--<Button Text="Add Ingredient"  Grid.Row="1" Clicked="Button_Clicked"/>-->
                    </Grid>
                </StackLayout>
                  <!--move button here-->
                <Button Text="Add Ingredient"  Grid.Row="1" Clicked="Button_Clicked"/>

                <CheckBox />
            </StackLayout>
        </ScrollView>