xamarin forms C#

Question

Currently following tutorials and learning xamarin forms to create my first app. I'm not sure what the correct name of the tool is for what I am looking so any guidance would be great thank you.

So I want a button...'Groceries'....When it is clicked it will show 3 buttons below the groceries button 'Bread', 'Milk, 'Sweets'...From here if user was to choose sweets for example existing, then 'Chocolate', 'Candy','Gum' would appear.

So everytime the user selects an option it will indent showing new buttons, with new options, but also still displaying the previous selected buttons, allowing the user to go back, if they change their mind.

I reailse this is not a programming specific Q, but I am not sure of the tutorial I should be looking for, for this. Thank you

Answer 1

Actually, there are many different solution which can implement it. As @Hobby Dev said you can set the property IsVisible (maybe will use MVVM). Since you are new to Xamarin, I provide one of the solutions which is easy to understand.

in xaml

<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
            <Button Text="Groceries" Clicked="Button_Clicked"/>
        </StackLayout>

        <StackLayout x:Name="stack1" Grid.Row="1" Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

        </StackLayout>

        <StackLayout x:Name="stack2" Grid.Row="2" Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

        </StackLayout>


    </Grid>

</StackLayout>

in code behind

using System;
using System.Collections.Generic;
using System.ComponentModel;
using Xamarin.Forms;

namespace xxx
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();         
        }


        private void Button_Clicked(object sender, EventArgs e)
        {


            List<MyButton> myButtons = new List<MyButton>() { new MyButton("Sweet", MyButton_Clicked), new MyButton("Candy", MyButton_Clicked), new MyButton("Gum", MyButton_Clicked) };

            stack1.Children.Clear();

            foreach(MyButton myButton in myButtons)
            {
                stack1.Children.Add(myButton);
            }


        }

        private void MyButton_Clicked(object sender, EventArgs e)
        {
            var mybutton = sender as MyButton;
            var title = mybutton.Text;
            List<MyButton> myButtons = new List<MyButton>();

            if (title=="Sweet")
            {
                 myButtons = new List<MyButton>() { new MyButton("111", MyButton_Clicked), new MyButton("222", MyButton_Clicked), new MyButton("333", MyButton_Clicked) };              
            }
            else if (title== "Candy")
            {
                myButtons = new List<MyButton>() { new MyButton("444", MyButton_Clicked), new MyButton("555", MyButton_Clicked), new MyButton("666", MyButton_Clicked) };
            }
            else
            {
                myButtons = new List<MyButton>() { new MyButton("777", MyButton_Clicked), new MyButton("888", MyButton_Clicked), new MyButton("999", MyButton_Clicked) };
            }
            stack2.Children.Clear();

            foreach (MyButton myButton in myButtons)
            {
                stack2.Children.Add(myButton);
            }
        }
    }

    public class MyButton:Button
    {
        public MyButton(string title,EventHandler clicked)
        {
            this.Text = title;
            Clicked += clicked;
        }


    }
}

I used static data just for demo, and you can get the data from database or webservice.