ListView Inside ScrollView Xamarin.Forms WorkAround

Xamarin.Forms does not support Listview inside the Scrollview. But Native Platforms iOS and Android does support it. So, here we will see a workaround.

This workaround works for Android API 21 and later. For lower API, see this.

Xamarin doesn't recommend using the ListView, WebView, or ScrollView inside a ScrollView.

 

Microsoft Xamarin.Forms Official Documentation says that ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView. 

Some of the Xamarin Experts advise that you shouldn't put a ListView inside a ScrollView because the ListView class implements its own scrolling and it just doesn't receive gestures because they all are handled by the parent ScrollView. 

 

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.

 

Let's prepare the XAML first.

 

MainPage.Xaml 

<ScrollView Padding="20">
        <StackLayout>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Panda Family"></Label>

            <controls:NestedScroll x:Name="listview"
                                   MinimumHeightRequest="96"
                                   Margin="16,0">
            </controls:NestedScroll>

            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
            <Label Text="Hello!!! Welcome to Smiley Panda"></Label>
            <Label Text="Hello!!! Smiley Panda Loves you"></Label>
        </StackLayout>
</ScrollView>

Create NestedScroll class 

Now, create a new class for the Custom Renderer in .NET Standard project.

public class NestedScroll : Xamarin.Forms.ListView
    {
        public static readonly BindableProperty IsNestedScrollProperty = BindableProperty.Create(
            propertyName: "IsNestedScroll",
            returnType: typeof(bool),
            declaringType: typeof(NestedScroll),
            defaultValue: false
            );

        public bool IsNestedScroll
        {
            get
            {
                return (bool)GetValue(IsNestedScrollProperty);
            }
            set
            {
                SetValue(IsNestedScrollProperty, value);
            }
        }
    }

Add Namespace in Xaml

Add reference to the XAML for newly created Custom Renderer class.  

xmlns:controls="clr-namespace:NestedScrollTest.CustomRenderer; NestedScrollTest"

Create CustomRenderer for Android 

Now, create another Custom Renderer class for Android in the Android project solution. Override the native view ListViewRenderer of Android and make the NestedScrollingEnabled property true. 

public class NestedScrollDroid: ListViewRenderer
    {
        public NestedScrollDroid(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;
            }
        }
    }

Now, let us add some items in Listview in xaml.cs

public partial class MainPage : ContentPage
   {
       public MainPage()
       {
           InitializeComponent();
           listview.ItemsSource = AddPandaFamily();
       }
       List<string> pandaFamily = new List<string>();
       public List<string> AddPandaFamily()
       {
           for(int i=0; i<10; i++)
           {
               pandaFamily.Add("Smiley Panda");
               pandaFamily.Add("Red Panda");
               pandaFamily.Add("Qinling Panda");
               pandaFamily.Add("Oleosa Panda");
               pandaFamily.Add("Ailuropoda Panda");

           }
           return pandaFamily;
       }
    }

Demo

 

 

Source Code

 

Available here