微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

xamarin 形式的多级列表视图

如何解决xamarin 形式的多级列表视图

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

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

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

我需要更新附加图片之类的内容。我尝试了一些解决方案,但都是徒劳的。

任何人都对此有任何想法。

enter image description here

谢谢

解决方法

您可以使用 ExpanderXamarin Community Toolkit 来做到这一点。

从 NuGet 安装 Xamarin Community Toolkithttps://www.nuget.org/packages/Xamarin.CommunityToolkit/

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

XML:

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

        };

    }
}

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。