Xamarin.Forms Listview inside of ScrollView

Hello, in this post i will put a ListView inside, I know that do this is not recomendable, but if for someone requeriment you need to do that, this is one way of do 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."

Looking in the web, I found that one solution is using MotionEvent in order of detect wich event is happening.

To do that we need to make a render of the Xamarin.Forms.ScrollView.

in iOS do a custom render is not necessary, because it does automatically, we can look that on iOS:

iOS implementation

But, for Android, is necessary create the custom render, in order of do that, we add a new class for the implementation of this render, it would be like any other renderer, but in this one, we need override, the DispatchTouchEvent, to detect what kind of MotionEventActions the user is doing, and in that way move the parent scroll or the child:

public override bool DispatchTouchEvent(MotionEvent e)
        {

            switch (e.Action)
            {
                case MotionEventActions.Down:
                    StartX = e.RawX;
                    StartY = e.RawY;
                    this.Parent.RequestDisallowInterceptTouchEvent(true);
                    break;
                case MotionEventActions.Move:
                    if (ScrollIsHorizontal * Math.Abs(StartX - e.RawX) < ScrollIsHorizontal * Math.Abs(StartY - e.RawY))
                        this.Parent.RequestDisallowInterceptTouchEvent(false);
                    break;
                case MotionEventActions.Up:
                    this.Parent.RequestDisallowInterceptTouchEvent(false);
                    break;
            }

            return base.DispatchTouchEvent(e);
        }

Now in our Page, we need to add the reference to this render:

<local:AndroidScrollViewRender  Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout HorizontalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal">
                                <Label Text="Name" WidthRequest="100" TextColor="Black"></Label>
                                <Label Text="LastName" WidthRequest="100" TextColor="Black"></Label>
                                <Label Text="Age" WidthRequest="100" TextColor="Black"></Label>
                                <Label Text="School"  WidthRequest="100" TextColor="Black"></Label>
                                <Label Text="Country"  WidthRequest="100" TextColor="Black"></Label>
                </StackLayout>
                <ListView x:Name="myListView" VerticalOptions="FillAndExpand" ItemsSource="{Binding DataItems}">
                </ListView>
            </StackLayout>
        </local:AndroidScrollViewRender>

Android Implementation

Here is the url for the complete code on Github:

https://github.com/osvaldosantiago/ListviewInsideOfScrollViewXF

Follow me on Twitter

https://twitter.com/OsvaldoSan

Or find me in Linkedinhttps://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741

Some references that I used:
https://forums.xamarin.com/discussion/comment/37828#Comment_37828