How to work with multilevel nested ListView in Xamarin.Forms (SfListView)?
You can load a multi-level nested ListView in Xamarin.Forms SfListView.
XAML
Define First and Second level ListView with AutoFitMode as DynamicHeight to re measure the size based on its child. Set IsScrollingEnabled as False for second level inner ListView. And define the ItemSize for inner most ListView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewSample"
xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
x:Class="ListViewSample.NestedListView">
<ContentPage.BindingContext>
<local:NestedListViewViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<local:HeightConverter x:Key="heightConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<listView:SfListView x:Name="listView" ItemsSource="{Binding ContactInfo}"
AutoFitMode="DynamicHeight">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="{Binding Location}" BackgroundColor="Beige" VerticalOptions="Center" FontAttributes="Bold"/>
<listView:SfListView x:Name="list1" Margin="5" Grid.Row="1" IsScrollingEnabled="False" ItemsSource="{Binding ContactDetails}" AutoFitMode="DynamicHeight">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" RowSpacing="1" BackgroundColor="#d3d3d3">
...
<listView:SfListView x:Name="SubListView" Margin="5" ItemsSource="{Binding Members}" Grid.Row="1" HeightRequest="{Binding Converter={StaticResource heightConverter}, ConverterParameter={x:Reference SubListView}}" ItemSize="50" BackgroundColor="Accent">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<Grid>
<Label Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</Grid>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</Grid>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</Grid>
</ContentPage.Content>
</ContentPage>
Avoid using AutoFitMode as DynamicHeight or Height for inner ListView. Since the inner SfListView does not return the actual measured size when measuring before layout. Please find the limitation document from here.
C#
Returns the height, based on the ListView.ItemSize and count of the items.
public class HeightConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var listView = parameter as SfListView;
var bindingContext = (listView.BindingContext as DetailsContactInfo);
if (bindingContext == null) return 0;
var items = bindingContext.Members;
return listView.ItemSize * items.Count;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Also, nesting ListView is not recommended in Xamarin.Forms. The Xamarin.Forms warns the usage of nested ScrollView controls. Please find the documentation from here.
Output
