How to display ListView inside the ListView in Xamarin.forms

Question

My response data looks like this dummy data:

{
    "MsgCode": null,
    "IsError": false,
    "IsPartialError": false,
    "Message": [],
    "Data": {
        "TrackUpdates": [{
                "VersionId": 3,
                "VersionNumber": "15.2",
                "PublishedDate": "2020-01-20T00:00:00.000Z",
                "UpdatesName": [{
                        "UpdateId": 4,
                        "UpdateName": "Login issue fixes"
                    },
                    {
                        "UpdateId": 3,
                        "UpdateName": "Profile added"
                    }
                ]
            },
            {
                "VersionId": 2,
                "VersionNumber": "15.1",
                "PublishedDate": "2019-12-15T00:00:00.000Z",
                "UpdatesName": [{
                        "UpdateId": 2,
                        "UpdateName": "Token related changes"
                    },
                    {
                        "UpdateId": 1,
                        "UpdateName": "Design updates"
                    }
                ]
            }
        ]

    },
    "Pagination": null
}

How can I display this using xamarin forms ?

The major problem is to show inner list. Please check this image if there is formatting issue. JsonOutputImage

Answer 1

I guess you could use Listview inside a Listview as shown below.

<ListView x:Name="contactList" ItemsSource="{Binding PlatformsList}" SeparatorVisibility="Default"
             VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="150">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="Nested List" />
                    <ListView x:Name="contactNestedList" ItemsSource="{Binding BindingContext.PlatformsList, Source={x:Reference contactList}}" HeightRequest="300" BackgroundColor="Yellow" WidthRequest="150">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Horizontal">
                                        <CheckBox IsChecked="{Binding IsChecked}" VerticalOptions="Center" />
                                        <Label TextColor="Red" Margin="10,0" Text="{Binding PlatformName}" IsEnabled="{Binding IsChecked}" VerticalOptions="Center" />
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

However, using ListView inside a ListView is not recommended. If in case, if your nested list is a defined one with only a fixed set of items, then you could use BindableLayout instead of the nested Listview. i.e. Just replace the ListView inside the parent ListView with a BindableLayout.

If in case, if you have any doubts about using BindableLayout, please check my below blog to understand more about it.

https://xdevlogs.com/2020/01/04/bindable-layout-xamarin-forms/

I hope it helps...