I have one ListView on my page having ItemSource as List<AssetModel> as shown below:
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; }
}
How can I bind TaskDetail list in my parent list?
Desired Layout:
It seems like a classic grouping listview use case. James Montemagno wrote an article about this kind of need that should help you a lot.
In summary, the grouping feature expects an object of type 'List of List' (IEnumerable<IEnumerable<>>), where each 'master item' is a list of 'detail item'.
To make it easy, you can use the class provided at the above mentioned article:
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);
}
}
Then, the list property you must change its type to, for example, this:
ObservableCollection<Grouping<AssetModel, TaskDetail>> AssetsList { get; set; } =
new ObservableCollection<Grouping<AssetModel, TaskDetail>>();
This AssetsList is what you should bind to the ItemsSource of ListView
To fill this property, you'll need, for example, do this:
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);
}
Then in your XAML you define your ListView Grouping properties:
<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>
ListView inside a ScrollView(see the Note). Maybe worths for you to search/create a custom view that handles inner collections with only one scroll handler.