xamarin 表单中的多级列表视图

Question

我需要在 Xamarin 表单中创建一个多级列表视图。

目前，我在我的菜单页面中使用它进行单级分组

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

我需要更新附件中的图片。我已经尝试了一些解决方案，但都是徒劳的。

任何人对此有任何想法。

谢谢

Answer 1

您可以用 Xamarin Community Toolkit 中的 Expander 来做到这一点。

从 NuGet 安装 Xamarin Community Toolkit：https://www.nuget.org/packages/Xamarin.CommunityToolkit/

用法：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>

型号：

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

视图模型：

 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 表单中的多级列表视图

Multilevel Listview in xamarin forms

expandablelistview

xamarin.forms