Nested ListView is not working in xamarin forms

Question

Nested list view is not working, I have a list which contains another list in it. To show it in View I am using Nested listview; But the code is not working,and i am not able to identify on where it went wrong... Below is my code

Main Page

<ContentPage.Content>
    <StackLayout>
        <ListView  x:Name="outerListview"   ItemsSource="{Binding lst}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell x:Name="outerListviewCell">
                        <ViewCell.View>
                            <ContentView>
                                <Label Text="{Binding ItemName}"/>
                                <StackLayout>
                                    <ListView ItemsSource="{Binding ItemList}">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell x:Name="InnerListviewCell">
                                                    <Grid>
                                                        <Label Text="{Binding stockQty}"/>
                                                    </Grid>
                                                </ViewCell>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </StackLayout>
                            </ContentView>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

ViewModel

public MainPageViewModel()
{
    lst = new ObservableCollection<A>()
    {
        new A()
        {
            ItemName="Item1", ItemList=new ObservableCollection<ItemDetails>()
                {
                    new ItemDetails() { stockQty="2"},
                    new ItemDetails(){ stockQty="3"}
                }
        },
        new A()
        {
            ItemName="Item2", ItemList=new ObservableCollection<ItemDetails>()
                {
                    new ItemDetails() { stockQty="3"},
                    new ItemDetails(){ stockQty="4"}
                }
         }
     };
}

Model ( Class A and Class Itemdetails)

class A:INotifyPropertyChanged
{
    public A()
    {
        ItemName = string.Empty;
        ItemList = new ObservableCollection<ItemDetails>();
    }
    private string _ItemName;
    public string ItemName
    {
        get { return _ItemName; }
        set { _ItemName = value; OnPropertyChanged(); }
    }
    private ObservableCollection<ItemDetails> _itemlist;
    public ObservableCollection<ItemDetails> ItemList
    {
        get { return _itemlist; }
        set { _itemlist = value; OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,
                new PropertyChangedEventArgs(propertyName));
    }
}
class ItemDetails:INotifyPropertyChanged
{
    private string _stockQty;
    public string stockQty
    {
        get { return _stockQty; }
        set { _stockQty = value; OnPropertyChanged(); }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,
                new PropertyChangedEventArgs(propertyName));
    }
}

When I Run the above code I am getting below output in screen

2
3

What is expected actually is

Item1
2
3
Item2
3
4

What is wrong in above code? could anyone can help me?

Answer 1

Nesting Listview inside another Listview is not a good idea and it is not a supported on Xamarin.Forms.

ListView is very "sensitive" and it can easialy cause problems with scrolling and of course there are problems with poor performance of your app.

So I strongly recommend you to rethink about your layout and take a look at Grouping with ListView more about it here, maybe you can achieve what you want with Grouping.

Answer 2

After checking your code , I found something need to modify in your code.

1. In order to show the ItemName , you should wrap Label inside StackLayout .

2. In order to get Uneven Row, you should set listview.HasUnevenRows = true.

Modify your code as below:

<ContentPage.Content>
    <ListView  x:Name="outerListview" HasUnevenRows="True" ItemsSource="{Binding lst}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell x:Name="outerListviewCell">
                    <ViewCell.View>
                        <ContentView>
                            <StackLayout>
                                <Label Text="{Binding ItemName}"/>
                                <ListView ItemsSource="{Binding ItemList}" RowHeight="20">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell x:Name="InnerListviewCell">
                                                <Grid>
                                                    <Label Text="{Binding stockQty}"/>
                                                </Grid>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackLayout>
                        </ContentView>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

Answer 3

That is absolutely wrong. You must use one ListView with IsGroupingEnabled set to True. Follow instuctions here to make it work correct: https://xamarinhelp.com/xamarin-forms-listview-grouping/