https://stackoverflow.com/questions/61521479/xamarn-forms-how-to-show-a-listview-under-a-listview-item
You can create the listview with group style ,and customize the GroupHeaderTemplate , modify the binding data when click on the group , check my sample .
XAML
<ListView x:Name ="lstView" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding LongName}" BackgroundColor="LightBlue" >
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Comment}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Model
public class VeggieModel
{
public string Name { get; set; }
public string Comment { get; set; }
public bool IsReallyAVeggie { get; set; }
public string Image { get; set; }
public VeggieModel ()
{ }
}
public class GroupedVeggieModel : ObservableCollection<VeggieModel>
{
public string LongName { get; set; }
public string ShortName { get; set; }
public bool IsExpand { get; set; }
}
Page
public partial class GroupedListXaml : ContentPage
{
private ObservableCollection<GroupedVeggieModel> grouped { get; set; }
private ObservableCollection<GroupedVeggieModel> groupedCopy { get; set; }
public GroupedListXaml ()
{
InitializeComponent ();
grouped = InitData();
groupedCopy = InitData();
lstView.ItemsSource = grouped;
}
ObservableCollection<GroupedVeggieModel> InitData()
{
ObservableCollection<GroupedVeggieModel> grouped = new ObservableCollection<GroupedVeggieModel>();
GroupedVeggieModel veggieGroup = new GroupedVeggieModel() { LongName = "vegetables", ShortName = "v", IsExpand = true };
GroupedVeggieModel fruitGroup = new GroupedVeggieModel() { LongName = "fruit", ShortName = "f", IsExpand = true };
veggieGroup.Add(new VeggieModel() { Name = "celery", IsReallyAVeggie = true, Comment = "try ants on a log" });
veggieGroup.Add(new VeggieModel() { Name = "tomato", IsReallyAVeggie = false, Comment = "pairs well with basil" });
veggieGroup.Add(new VeggieModel() { Name = "zucchini", IsReallyAVeggie = true, Comment = "zucchini bread > bannana bread" });
veggieGroup.Add(new VeggieModel() { Name = "peas", IsReallyAVeggie = true, Comment = "like peas in a pod" });
fruitGroup.Add(new VeggieModel() { Name = "banana", IsReallyAVeggie = false, Comment = "available in chip form factor" });
fruitGroup.Add(new VeggieModel() { Name = "strawberry", IsReallyAVeggie = false, Comment = "spring plant" });
fruitGroup.Add(new VeggieModel() { Name = "cherry", IsReallyAVeggie = false, Comment = "topper for icecream" });
grouped.Add(veggieGroup);
grouped.Add(fruitGroup);
return grouped;
}
void Click(GroupedVeggieModel model)
{
if (model.IsExpand)
{
var index = grouped.IndexOf(model);
var context = groupedCopy[index];
foreach (var m in context)
{
model.Add(m);
}
}
else
{
model.Clear();
}
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var label = sender as Label;
var model = label.BindingContext as GroupedVeggieModel;
model.IsExpand = !model.IsExpand;
Click(model);
}
}
