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

Create all the buttons and change their IsVisible property as per your needs from the code. — Paramjit, Nov 13 '19 at 10:20
Would a tree view perhaps be more appropriate? You're basically displaying hierarchical data here. — DavidG, Nov 13 '19 at 10:23
@LucasZhang-MSFT Yes apologises on the delay getting back. Only getting round to this now thanks for the time of help — John, Nov 18 '19 at 18:31

Lucas Zhang · Accepted Answer · 2019-11-13T12:03:46.633

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 .

Good anwser for people starting with Xamarin, but keep in mind that doing things in Code Behind is not ideal, MVVM should be the way to go, here are some links if someone wants to try it: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm https://stackoverflow.com/questions/32667408/how-to-implement-inotifypropertychanged-in-xamarin-forms https://forums.xamarin.com/discussion/82775/mvvm-when-using-code-behind-and-when-viewmodels — Ricardo Dias Morais, Nov 14 '19 at 13:08
Agree with you, but consideration of the actual , implement it in code behind is easily to undertand .Of course use MVVM is better :) — Lucas Zhang, Nov 14 '19 at 13:10
Ahh thanks @LucasZhang-MSFT thats a great start thanks for taking the time to get me up and running....hit a slight wall if you know what the trouble is...https://stackoverflow.com/questions/58920807/xamarin-forms-c-sharp-stacklayout — John, Nov 18 '19 at 18:31

xamarin forms C#

1 Answers1

in xaml

in code behind