Xamarin Forms - Implementing a nested list

Question

I have a list of details (Basket) and in each of those details, is another list (Fruits). I want to display these details and the very first thing I thought of, was a ListView inside a ListView. But when looking through suggestions, gave me results such as this and this which mostly suggests that it is not a good idea to implement in Xamarin Forms.

At the moment, I'm using FreshMvvM as my MvvM Framework. As for the data that I want to display, I have a set of baskets and each basket has several fruits. I want the images of those fruits to be displayed as well, which belongs to a particular basket. Please refer the image.

I would like to know if there are improvements to this or else, any other ideas of layouts as to how to implement my list or any other way to implement the above behaviour. Thank you.

My code so far:
XAML:

<ListView ItemsSource="{Binding Baskets}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding BasketID}" />
                    <ImageCell 
                        Text="{Binding FruitID}" 
                        Detail="{Binding FruitName}" 
                        ImageSource="{Binding ImageURL}">
                    </ImageCell>
                </StackLayout>
             </ViewCell>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Classes:

public class Basket
{
    public string BasketID{ get; set; }
    public string BasketName{ get; set; }
}

public class Fruit
{
    public string FruitID{ get; set; }
    public string FruitName{ get; set; }
    public string ImageURL{ get; set; }
}

Answer 1

You can use ListView to iterate through baskets collection, while using a custom control like ItemsControl to iterate through fruits collection.

It basically is a custom control that allows you to add dynamic children support to a StackLayout through ItemsSource and ItemTemplate properties. You can use the control as it is - except you will need to set the Orientation property to Horizontal on its StackLayout at this line.

Sample Usage:

<ListView ItemsSource="{Binding Baskets}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding BasketID}" />

                    <local:ItemsControl ItemsSource="{Binding Fruits}">
                        <local:ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Image Source="{Binding ImageURL}" />
                            </DataTemplate>
                        </local:ItemsControl.ItemTemplate>
                    </local:ItemsControl>
                </StackLayout>
             </ViewCell>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Note: ItemsControl is good for usage with only small collections, as the virtualization/recycling support is not very sophisticated. I am assuming, as the layout is horizontal, number of items in Fruits collection will be relatively a low.