Xamarin Forms Add View to page on button press?

Question

Hi I have a view which is a collapsible list and I want to be able to press a button which says add another then it adds another view underneath the current one. is this possible to do in Xamarin Forms?

so every time a button is pressed add another one of these:

<local:TimeSheetAccordion HeaderText="Customer #1" BackgroundColor="#FAFAFA" Padding="20, 20, 20, 20" />

page code:

<ScrollView>
        <StackLayout Padding="20, 20, 20, 20">
            <local:TimeSheetAccordion HeaderText="Customer #1" BackgroundColor="#FAFAFA" Padding="20, 20, 20, 20" />
            <local:TimeSheetAccordion HeaderText="Customer #2" BackgroundColor="#FAFAFA" Padding="20, 20, 20, 20" />

            <StackLayout Margin="0, 30, 0, 0" Orientation="Horizontal" HorizontalOptions="End">
                <Button Text="Reset" BorderRadius="6" />
                <Button Text="Submit Time Sheet" BackgroundColor="Blue" TextColor="White" BorderRadius="6" />
            </StackLayout>
        </StackLayout>
    </ScrollView>

page.xaml.cs Code:

private void AddAnotherButton_Clicked(object sender, EventArgs e)
    {
        mainTimeLayout.Children.Add(new TimeSheetAccordion() {
            HeaderText = "Customer #1",
            BackgroundColor = Color.FromHex("#FAFAFA")
        });

    }

is there a way I can set it so the HeaderText is incremented?

If you are talking about adding a new element to your list, the solution is actually to add an element to an ObservableCollection, on which your ListView would be binded. But I'm not quite sure that's what you want — Miiite
Depending on what it is you want exactly this should be possible. But please provide us with some code of what you've tried so far and why that behaviour is not what you're looking for. — user10608418
@Knoop I haven't really tried anything as of yet but basically, I have the above view so on the function for the AddButton_Clicked{} i just want it to basically add it above the button — SodiKZ125
Can you post the entire code of your page? Is this view, to be added in a Listview? — Bruno Caceiro
Updated my code above to show the page code. its not in a listview just on its own — SodiKZ125

Bruno Caceiro Bruno Caceiro · Accepted Answer · 2019-01-16T15:13:13

You can add a name to your StackLayout, to be referenced in your code-behind.

<ScrollView>
        <StackLayout x:Name="mainLayout" Padding="20, 20, 20, 20">
            <local:TimeSheetAccordion HeaderText="Customer #1" BackgroundColor="#FAFAFA" Padding="20, 20, 20, 20" />
            <local:TimeSheetAccordion HeaderText="Customer #2" BackgroundColor="#FAFAFA" Padding="20, 20, 20, 20" />

            <StackLayout Margin="0, 30, 0, 0" Orientation="Horizontal" HorizontalOptions="End">
                <Button Text="Reset" BorderRadius="6" />
                <Button Text="Submit Time Sheet" BackgroundColor="Blue" TextColor="White" BorderRadius="6" />
        </StackLayout>
    </StackLayout>
</ScrollView>

After this, in your Page.xaml.cs

mainLayout.Children.Add(new TimeSheetAccordion());

Xamarin Forms Add View to page on button press?

1 Answers