web-dev-qa-db-ja.com

Xamarin.FormsのListView内でリストをバインドする方法

ページに1つの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リストをバインドするにはどうすればよいですか？

必要なレイアウト：

enter image description here

c#listviewxamarinbindingxamarin.forms
14
Neelam Prajapati

古典的なグループ化リストビューの使用例のようです。 James Montemagnoがこの種のニーズについて記事を書きましたが、これは大いに役立つはずです 。

要約すると、グループ化機能は「リストのリスト」（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は、ItemsSourceのListViewにバインドする必要があるものです_

このプロパティを設定するには、たとえば次のようにする必要があります。

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 Groupingプロパティを定義します。

<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>
11
Diego Rafael Souza