Collection of views within a view (nested) // Design

Hello Community!

So this is an issue that I've tried to figured out but no avail. I was hoping you guys can help me out

(class are written here as an example compared to screenshot I'm about to share. you get the gist)

I have a collection of models that within a model has an array of a simpler model.

public class Spider : Animal {
    public int Id { get; set; }
    public bool IsFriendly { get; set; }
    public IEnumerable<LegComponent> Legs { get; set; }
}

public class LegComponent {
    public int Count { get; set; }
    public float Speed { get; set; }
}

and in ViewModel class i have something like this:

public class SpiderInfoViewModel : ViewModelBase {
    public IEnumerable<Spider> Spiders { get; set }
    ... //remaining viewmodel components
}

Now from given these classes, in View class (xaml), I wanted to create a list of views that displays the spider model. Also, within that individual view of that said spider, i wanted to display a collection of chips of the leg component as well. these leg component varies on each spider, some only have one, some have 4, some 6 and could even have 28. The spider list could be as many as 200+ items.

Now most of you who managed to catch this quick, this implies that I may need to create a nested collection of views within the main collection of views. before anyone going to shout "nested views is bad design!" . I have weighed in that scenario, and unfortunately the model structure, (a collection within a collection) is by design.

so i have tried the following.

• Listview (Recycle caching) and a ItemsControl by XamarinHq ([github dot com]/xamarinhq/xamu-infrastructure/blob/master/src/XamU.Infrastructure/Controls/ItemsControl.cs) (can't post github links smh)
• ListView (Recycle caching) and a BindableLayout
• ListView (Recycle caching) and a CollectionView
• CollectionView and CollectionView
• CollectionView and BindableLayout
• CollectionView and ItemsControl

so actual Result.

[https //] i.imgur .com/TA0zuSj.gif

So yikes, the first one (CollectionView and BindableLayout) is a performance nightmare. even with an emulator, this has a significant performance draw calls, which I like to avoid it.

[https //] i.imgur .com/1lUUpXE.gif
The second one is using (ListView and CollectionView) seems to improve the performance but now there is an issue where the view is disappeared. my best guess is that the collectionview is being recycled.

I would really want to solve this problem, as this has been a performance hog for a while now. i'm open to any examples or references on any use case , libraries at this point. just to see if anyone has solve this before.

Thanks for hearing me out community

(p/s: anyone wants to fix my links? 1st post link prevention thingy)