Create a list of dropdown lists in Xamarin.Forms(Xaml)

Question

If we have a model of... Let's say a pizza.

    public class Pizza
    {
        public int IdPizza { get; set; }
        public string? PizzaName { get; set; }
        public string? CountryOfOrigin { get; set; }

        public IEnumerable<PizzaIngrediens> PizzaIngredientsList { get; set; } /* List of pizza's ingredients*/
     }

Now if we got a list of pizza objects like

var Pizzas = new List<Pizza>();
/*
Add data for each Pizza and its ingredients list.
*/

How could we create dropdown list for Pizzas list, and each dropdown to contain the pizza name and on extending to get list of this PizzaIngrediens in xaml, Xamarin.Forms?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

How could we create dropdown list for Pizzas list, and each dropdown to contain the pizza name and on extending to get list of this PizzaIngrediens in xaml

To create a dropdown list to display pizza name for the Pizzas list, try using the Picker control with secondary linkage and populate the data using Binding. You could detect the SelectedIndexChanged event of the first picker to update the ItemsSource of the second picker. I created a basic demo for this function, here is the related code you could refer to:

Page.xaml.cs

   public partial class Page2 : ContentPage  
   {  
       PizzaViewModel viewModel;  
       public Page2()  
       {  
           InitializeComponent();  
     
           viewModel = new PizzaViewModel();  
     
           BindingContext = viewModel;  
       }  
     
       private void Picker_SelectedIndexChanged(object sender, EventArgs e)  
       {  
           var _picker = sender as Picker;  
           var collection = viewModel.pizzaCollection;  
           var index = _picker.SelectedIndex;  
     
           if (!picker_2.IsEnabled)  
           {  
               picker_2.IsEnabled = true;  
               picker_2.Title = "Select the PizzaIngredien";  
           }  
           picker_2.ItemsSource = new ObservableCollection<PizzaIngrediens>(collection[index].PizzaIngredientsList);  
       }  
   }  

Page.xaml

   <Picker x:Name="picker_1" Title="Select a pizza" ItemsSource="{Binding pizzaCollection}" ItemDisplayBinding="{Binding PizzaName}" SelectedIndexChanged="Picker_SelectedIndexChanged"/>  
   <Picker x:Name="picker_2" IsEnabled="False" ItemDisplayBinding="{Binding Content}"/>  

Model class and ViewModel class

   public class Pizza  
   {  
       public int IdPizza { get; set; }  
       public string PizzaName { get; set; }  
       public string CountryOfOrigin { get; set; }  
     
       public IEnumerable<PizzaIngrediens> PizzaIngredientsList { get; set; } /* List of pizza's ingredients*/  
   }  
     
   public class PizzaIngrediens  
   {  
       public string Content { get; set; }  
   }  
     
   public class PizzaViewModel  
   {  
       public PizzaViewModel()  
       {  
           pizzaCollection = new ObservableCollection<Pizza>();  
           //add the data  
       }  
     
       public ObservableCollection<Pizza> pizzaCollection { get; set; }  
   }  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Xamarin forms does not have a dropdown list.

You can try with grouped ListView xamarin-forms-listview-grouping or grouped collectionView grouping, or use Expander control from Xamarin Community Toolkit
expander