Multilevel Listview in xamarin forms

Question

I need to make a Multilevel Listview in Xamarin forms.

Currently, I am using this for my Single level Grouping in my Menu Page

http://www.compliancestudio.io/blog/xamarin-forms-expandable-listview

I need to update something like the attached image. I have tried some of the Solution but all in vain.

Anyone has any idea about this.

Thanks

Answer 1

You could do this with Expander of Xamarin Community Toolkit.

Install Xamarin Community Toolkit from NuGet: https://www.nuget.org/packages/Xamarin.CommunityToolkit/

Usage: xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Xaml:

<ContentPage.BindingContext>
    <viewmodels:RootViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <ScrollView Margin="20">
        <StackLayout BindableLayout.ItemsSource="{Binding roots}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <xct:Expander>
                        <xct:Expander.Header>
                            <Label Text="{Binding Root}"
                               FontAttributes="Bold"
                               FontSize="Large" />
                        </xct:Expander.Header>

                        <StackLayout BindableLayout.ItemsSource="{Binding Node}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>                                        
                                    <xct:Expander Padding="10">
                                        <xct:Expander.Header>
                                            <Label Text="{Binding Key.Node}" FontSize="Medium" />
                                        </xct:Expander.Header>
                                        <StackLayout BindableLayout.ItemsSource="{Binding Value}">
                                            <BindableLayout.ItemTemplate>
                                                <DataTemplate>
                                                    <Label Text="{Binding SubRoot}"  FontSize="Small" />
                                                </DataTemplate>
                                            </BindableLayout.ItemTemplate>
                                        </StackLayout>

                                    </xct:Expander>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </xct:Expander>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

Model:

 public class Roots
{
    public string Root { get; set; }

    public Dictionary<Nodes, List<SubRoots>> Node { get; set; }        

}
public class Nodes
{
    public string Node { get; set; }
}
public class SubRoots
{
    public string SubRoot { get; set; }
}

ViewModel:

 public class RootViewModel
{
    public List<Roots> roots { get; private set; }
    public RootViewModel()
    {
        CreateMonkeyCollection();
    }
    public void CreateMonkeyCollection()
    {
      
        List<SubRoots> subRoot = new List<SubRoots>() { new SubRoots() { SubRoot = "SubNode" } };
        Dictionary<Nodes, List<SubRoots>> node = new Dictionary<Nodes, List<SubRoots>>();
        node.Add(new Nodes() {  Node="Nodo1"}, null);
        node.Add(new Nodes() {  Node="Nodo2"}, null);
        node.Add(new Nodes() {  Node="Nodo3"}, null);
        node.Add(new Nodes() {  Node="Nodo4"}, subRoot);

        roots = new List<Roots>()
        {
            new Roots(){ Root="Root1", Node=node},
            new Roots(){ Root="Root2", Node= null}

        };

    }
}