https://github.com/syncfusionexamples/xamarin-forms-listview-inside-another-listview

Example for loading xamarin forms listview inside another listview (nested listview).
https://github.com/syncfusionexamples/xamarin-forms-listview-inside-another-listview

listview nested-objects sflistview xamarin xamarin-android xamarin-forms xamarin-ios xamarin-listview xamarin-uwp

Last synced: 7 days ago
JSON representation

Example for loading xamarin forms listview inside another listview (nested listview).

• Host: GitHub
• URL: https://github.com/syncfusionexamples/xamarin-forms-listview-inside-another-listview
• Owner: SyncfusionExamples
• Created: 2019-08-02T05:43:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-02-15T13:42:28.000Z (10 months ago)
• Last Synced: 2024-04-14T12:07:22.399Z (8 months ago)
• Topics: listview, nested-objects, sflistview, xamarin, xamarin-android, xamarin-forms, xamarin-ios, xamarin-listview, xamarin-uwp
• Language: C#
• Homepage:
• Size: 1.75 MB
• Stars: 1
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Working with Nested Xamarin.Forms ListView

ListView allows you to load another ListView inside its [ItemTemplate](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView~ItemTemplate.html). When the [AutoFitMode](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView~AutoFitMode.html) of the outer ListView is height, the size of the inner ListView will be allocated from the maximum screen size. Since the exact size for the inner list cannot not be obtained before loading the view.

To get a fixed height for the inner ListView, define a value in its `HeightRequest`. If the items inside the inner ListView are less, allocate the total extend of the inner list to its `HeightRequest`.

Follow the steps to set the size for the outer ListView based on the extend of inner ListView:

Define a property in the Model class and bind it to the HeightRequest of inner ListView, as the height for various inner ListView has to be identified while scrolling.

Hook the container’s `PropertyChanged` event. When the height of the container changes, set the value of `TotalExtent` to the property bound to the HeightRequest.

Call the `RefreshView` method asynchronously with few seconds delay in the `Loaded` event of the outer SfListView. The height requested for each inner SfListView will be set but the outer SfListView will not get any notification regarding the size change. So, call the RefreshView method asynchronously after loading the view.

```

    

        

            

                

                    

                        

                            

                                

                                    

                                        

                                        

                                        

                                    

                                

                            

                        

                    

                

            

        

    

 

```

```

public partial class NestedListView : ContentPage

{

    public NestedListView()

    {

        InitializeComponent();

    }

    private async void listView_Loaded(object sender, Syncfusion.ListView.XForms.ListViewLoadedEventArgs e)

    {

        await Task.Delay(2000);

        listView.RefreshView();

    }

}

```

```

using Syncfusion.ListView.XForms.Control.Helpers;

public class ExtendedListView : SfListView

{

    VisualContainer container;

    public ExtendedListView()

    {

        container = this.GetVisualContainer();

        container.PropertyChanged += Container_PropertyChanged;

    }

    

    private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)

    {

        Device.BeginInvokeOnMainThread(async () =>

        {

            var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container);

            if (e.PropertyName == "Height")

                (this.BindingContext as ContactInfo_NestedListView).InnerListHeight = extent;

        });

    }

}

```

To know more about MVVM in ListView, please refer our documentation [here](https://help.syncfusion.com/xamarin/sflistview/mvvm)