Xamarin.Forms Scroll screen which contains a ListView

user_1309934 0
Viewed 427

I'm new to Xamarin.Forms and I started to implement a product screen which contains a Title, a SearchBar, some filtering controls and the main ListView.

Everything works fine, the ListView displays the items and they scroll as you would expect.

My goal is to have the entire screen scroll, not just the ListView item, and the reason is because the top elements occupy a pretty large amount of space.

How would this be possbile to implement in XAML? I tried adding a ScrollView to contain everything but of course there are issues adding a ListView inside a ScrollView.

Thank You.

xamarin.forms xamarin listview
4 Answers

Placing ListView inside a ScrollView is not a good idea but still, we are trying to achieve it by writing the Custom Renderer because such features are available in native platforms.

Create NestedListView class :

public class NestedListView: Xamarin.Forms.ListView  
{  
   
}

Create NestedListViewDroid in Androi project:

public class NestedListViewDroid: ListViewRenderer  
{  
    public NestedListViewDroid(Android.Content.Context context) : base(context)  
    {  

    }  
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)  
    {  
        base.OnElementChanged(e);  
        if(e.NewElement != null)  
        {  
            var listview = this.Control as Android.Widget.ListView;  
            listview.NestedScrollingEnabled = true;  
        }  
    }  
}

then use like:

<ScrollView Padding="20">  
    <StackLayout>  
        ...

        <controls:NestedListView  x:Name="listview">  
        </controls:NestedListView >  

    ... 
    </StackLayout>  
</ScrollView>
user_107686530

You can set the TranslationY of the listview then it is scroll, so it move the ListView.Header part up. Michael Ridland have a very good blog post about it, have a look: facebook listview scroll with translationY

user_130444280

Bindable layout could be useful

   <ScrollView>
            <StackLayout BindableLayout.ItemsSource="">
                <BindableLayout.ItemTemplate>
                    <!-- Your ListView DataTemplate -->
                </BindableLayout.ItemTemplate>
            </StackLayout>
   </ScrollView>
user_139830710

You can use StackLayout.

 <ScrollView>
            <StackLayout>
                <ListView>
                </ListView>
            </StackLayout>
 </ScrollView>
Admin1
Related