xamarin 形式的多级列表视图 [英] Multilevel Listview in xamarin forms

问题描述

我需要以 Xamarin 形式制作多级列表视图.

目前，我在菜单页面中将其用于单级分组

谢谢

解决方案

您可以使用 Xamarin Community Toolkit 的 Expander 来做到这一点.

从 NuGet 安装 Xamarin Community Toolkit:

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

解决方案

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}

        };

    }
}

这篇关于xamarin 形式的多级列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！