Skip to content

Sample showcases how to load horizontal listview inside the vertical xamarin.forms listview

Notifications You must be signed in to change notification settings

SyncfusionExamples/Load-horizontal-listview-inside-vertical-xamarin.forms-listview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

Horizontal ListView inside vertical Listview

The SfListView allows you to layout the items in horizontal list inside the vertical list. You can load the nested SfListView by customizing the ItemTemplate of outer SfListView.

You should define the size for each inner SfListView or set the AutoFitMode of inner SfListView as Height, and define the ItemSize for outer SfListView.

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
   <ContentPage.BindingContext>
    <local:ListViewModel x:Name="viewModel"/>
  </ContentPage.BindingContext>
    <Grid>
        <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding OuterList}" ItemSize="100">
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Label Text="{Binding Label}" />
                        <syncfusion:SfListView ItemsSource="{Binding InnerList}" ItemSize="100" Orientation="Horizontal">
                            <syncfusion:SfListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Image Source="{Binding Image}"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:SfListView.ItemTemplate>
                        </syncfusion:SfListView>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>
    </Grid>
</ContentPage>

To know more about ListView appearance, please refer our documentation here.