如何在 Xamarin.Forms 中的 ListView 内绑定列表

Posted 2023-02-23

【中文标题】如何在 Xamarin.Forms 中的 ListView 内绑定列表

【英文标题】：How to bind list inside ListView in Xamarin.Forms

【发布时间】：2018-08-05 22:10:38

【问题描述】：

我的页面上有一个 ListView，其 ItemSource 为 List<AssetModel>，如下所示：

public class AssetModel

    public string AssetId  get; set; 
    public string Description  get; set; 

    public List<TaskDetail> TaskDetailList  get; set; 


public class TaskDetail

    public string Description  get; set; 

如何在我的父列表中绑定TaskDetail 列表？

所需的布局：

【问题讨论】：

这取决于您希望如何显示数据。你能分享你想要的演示文稿布局吗？

@DiegoRafaelSouza 请检查我上传的图片

您似乎有一个嵌套的列表视图。所以你必须将嵌套列表视图的 ItemSource 设置为“TaskDetailList”。

【参考方案1】：

这似乎是一个经典的分组列表视图用例。 James Montemagno wrote an article about this kind of need that should help you a lot.

总之，分组功能需要一个“列表列表”(IEnumerable<IEnumerable<>>) 类型的对象，其中每个“主项”都是“详细项”列表。

为方便起见，您可以使用上述文章中提供的类：

public class Grouping<K, T> : ObservableCollection<T>

    public K Key  get; private set; 

    public Grouping(K key, IEnumerable<T> items)
    
        Key = key;
        foreach (var item in items)
            this.Items.Add(item);
    

然后，您必须将列表属性的类型更改为，例如：

ObservableCollection<Grouping<AssetModel, TaskDetail>> AssetsList  get; set;  = 
    new ObservableCollection<Grouping<AssetModel, TaskDetail>>();

这个AssetsList是你应该绑定到ListView的ItemsSource的东西

要填充此属性，您需要执行以下操作：

for (int i = 0; i < 5; i++)

    var asset = new AssetModel();
    asset.AssetId = new Guid().ToString();
    asset.Description = $"Asset  i + 1 ";
    asset.TaskDetailList = new List<TaskDetail>();

    for (int j = 0; j < 3; j++)
        asset.TaskDetailList.Add(new TaskDetail()  Description = $"Detail  (i + 1)  -  (j + 1) " );

    var group = new Grouping<AssetModel, TaskDetail>(asset, asset.TaskDetailList);

    AssetsList.Add(group);

然后在您的 XAML 中定义您的 ListView 分组属性：

<ListView ItemsSource="Binding AssetsList" 
          HasUnevenRows="True" 
          SeparatorVisibility="None"
          SeparatorColor="Transparent"
          IsGroupingEnabled="True">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="AssetId"
                               FontAttributes="Bold"/>
                        <Label Text=Binding Key.AssetId/>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Description"
                               FontAttributes="Bold"/>
                        <Label Text=Binding Key.Description/>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text=Binding Description/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

【讨论】：

bravo.. 非常感谢您抽出宝贵的时间深入解释。帮了我很多忙。再次感谢

@diego 如果我们还有一层嵌套列表视图会怎样。我的意思是项目模板中的列表视图。

@AbhinavRastogi 我不认为嵌套列表视图是个好主意。 Other agree with this。不鼓励主要是因为issues with scroll events handling，与ListView inside a ScrollView(see the Note) 相同。也许值得您搜索/创建一个仅使用一个滚动处理程序来处理内部集合的自定义视图。