Several SfListView inside a ScrollView

[Daniel Serrão]

Hello all,

First post here. Today I just discovered this tool of Syncfusion and I'm trying to construct several horizontal Listviews inside a major vertical ScrollView in Xamarin.forms.

Here is what I was trying to do but with no success:

<ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<syncfusion:SfListView x:Name="ListView" ItemsSource="{Binding BusinessRegList}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" MinimumHeightRequest="200">

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

<Grid Padding="2">

<Image Source = "NoImage.png" HorizontalOptions = "Center" WidthRequest = "200" VerticalOptions = "Start" />

<Label Grid.Row="1" Text="{Binding BusinessName}" TextColor="#292a60" FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

</Grid>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

<BoxView Color ="#D4D94B" HeightRequest ="5" WidthRequest="100" />

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<syncfusion:SfListView x:Name="ListView2" ItemsSource="{Binding BusinessRegList}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" MinimumHeightRequest="200">

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

<Grid Padding="2">

<Image Source = "NoImage.png" HorizontalOptions = "Center" WidthRequest = "200" VerticalOptions = "Start" />

<Label Grid.Row="1" Text="{Binding BusinessName}" TextColor="#292a60" FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

</Grid>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

<BoxView Color ="#D4D94B" HeightRequest ="5" WidthRequest="100" />

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<syncfusion:SfListView x:Name="ListView3" ItemsSource="{Binding BusinessRegList}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" MinimumHeightRequest="200">

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

<Grid Padding="2">

<Image Source = "NoImage.png" HorizontalOptions = "Center" WidthRequest = "200" VerticalOptions = "Start" />

<Label Grid.Row="1" Text="{Binding BusinessName}" TextColor="#292a60" FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

</Grid>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

<BoxView Color ="#D4D94B" HeightRequest ="5" WidthRequest="100" />

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<syncfusion:SfListView x:Name="ListView4" ItemsSource="{Binding BusinessRegList}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" MinimumHeightRequest="200">

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

<Grid Padding="2">

<Image Source = "NoImage.png" HorizontalOptions = "Center" WidthRequest = "200" VerticalOptions = "Start" />

<Label Grid.Row="1" Text="{Binding BusinessName}" TextColor="#292a60" FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

</Grid>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

<BoxView Color ="#D4D94B" HeightRequest ="5" WidthRequest="100" />

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White">

<syncfusion:SfListView x:Name="ListView5" ItemsSource="{Binding BusinessRegList}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" MinimumHeightRequest="200">

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

<Grid Padding="2">

<Image Source = "NoImage.png" HorizontalOptions = "Center" WidthRequest = "200" VerticalOptions = "Start" />

<Label Grid.Row="1" Text="{Binding BusinessName}" TextColor="#292a60" FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

</Grid>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

</ScrollView>

The problem is when I do this, the first horizontal ListView cover all the others bellow it.

Is there a way to achieve something like that that I am explaining?

Thanks in advance.

Daniel

[Rawoof Sharief Muthuja Sherif]

Hi Daniel, 

 

We have checked the reported query “Listview covers the whole screen” from our side with our sample. We have loaded the given template in our sample and found that you have added many stacklayout in the scrollview. We can load only one children in the ScrollView, So I have put the whole code inside the Stack layout like below code snippet. 

 

Code Example[XAML]:   

  

 <ContentPage> 

    <ContentPage.BindingContext> 

        <local:ContactsViewModel x:Name="viewModel" /> 

    </ContentPage.BindingContext> 

     

    <ContentPage.Content> 

        <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions ="FillAndExpand" BackgroundColor="White"> 

            <StackLayout> 

 

                <StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White"> 

 

                    <syncfusion:SfListView x:Name="ListView" ItemsSource="{Binding contactsinfo}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" HeightRequest="200"/> 

 

                </StackLayout> 

 

                <StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions ="FillAndExpand" BackgroundColor="White"> 

 

                    <syncfusion:SfListView x:Name="ListView2" ItemsSource="{Binding contactsinfo}" Orientation="Horizontal" ItemSpacing="0,0,0,0" ItemSize="200" AutoFitMode="None" HeightRequest="200"/> 

                </StackLayout> 

            </StackLayout> 

        </ScrollView> 

    </ContentPage.Content> 

</ContentPage> 

 

If you place listview inside the scrollView then you need to set HeightRequest for listView, we have already mentioned this in UG documentation. 

 

UG link: https://help.syncfusion.com/xamarin/sflistview/working-with-sflistview#load-sflistview-inside-scrollview-within-stacklayout  

 

For your reference, we have attached the sample with above code example and you can download it from the below link.  

 

Sample link:  http://www.syncfusion.com/downloads/support/forum/136803/ze/ListViewSample-488253299  

 

Please let us know if you require further assistance.  

 

Regards, 

Rawoof M.