Xamarn forms: How to show a listview under a listview item?

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);           
    }
}

Share

Improve this answer

edited Aug 16, 2021 at 16:12

Junaid Pathan

3,80211 gold badge2323 silver badges4646 bronze badges

answered Apr 30, 2020 at 12:52