How to make the BindableLayout to be scrollable

Question

I have one list and i don't want to use listview inside it as how can i make it scrollable, data is binding but i am not able to scroll it.

<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
    <ScrollView>
        <StackLayout BindableLayout.ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="37,Auto">
                        <Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
                        <Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                        <Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
                        <BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
                    </Grid>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</Grid>

Answer 1

Although the BindableLayout technically can display your list of items via the StackLayout, and the StackLayout height is being restraint to your height request; the encompassing ScrollViewer has nothing to scroll since it fully contains your StackLayout.

To achieve what you probably want (a fixed 255 pixel StackLayout that scrolls your items) the ScrollViewer should be inside the StackLayout as the rendered ItemsPanel for you Items. Again, you could achieve this with custom BindableLayouts, but this is exactly what Xamarin Forms ListView does by default.

You probably simply want to change your BindableLayout implementation to a ListView:

<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
    <ListView ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid RowDefinitions="37,Auto">
                    <Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
                    <Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                    <Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
                    <BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Answer 2

The scrollview could not scroll as you set the HeightRequest="255" for the stacklayout in the scrollview. That because the display content's height is equal with the Scrollview, left content was covered.

Then I remove the HeightRequest in StackLayout, the ScrollView could scroll. But the scrollview will fill the whole page which I thought is not what you want. So you could add parent layout Stacklayout outside the scrollview which set the size of scrollview equal to 255 and let it scroll at the same time. I just made an example :

<StackLayout>
    <ScrollView HeightRequest="255">
        <StackLayout BindableLayout.ItemsSource="{Binding ItemCollection}" x:Name="SearchLayoutItemList" >
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="37,Auto">
                        <Image Grid.Row="0" Source=""searchingicon.png"" />
                        <Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                        <Image Grid.Row="0" Source="reload.png"  HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
                        <BoxView Grid.Row="1"  BackgroundColor="Yellow"/>
                    </Grid>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</StackLayout>

For more info, you could refer to Xamarin.Forms ScrollView.

Hope it works for you.