How to work with multilevel nested ListView in Xamarin.Forms?
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
Conclusion
I hope you enjoyed learning about how to work with multilevel nested ListView in Xamarin.Forms.
You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
