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



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


Comentarios

Publicar un comentario

Entradas populares de este blog

Entry Show/Hide Password on Xamarin.Forms

Imagen
Hello, in this post i will talk about a way of how to implement a Show/Hide password on Entry control. In our Xamarin.Forms project, we add  a CustomRender for iOS, and  for Android we are using a Effects in order of have a result almost equals. I'm gonna start with the iOS functionality, so I will add a class render: using System ; using Xamarin.Forms ; namespace ShowHidePasswordEntryXF { public class ShowHidePasswordEntry : Entry { public ShowHidePasswordEntry () { } public string EntryText { get ; set ; } } } After that, in the iOS project, i will create the renderer, in which I add a UIButton and add a EventHandler in order to know if the user want to look the password or not: buttonRect . TouchUpInside   +=   ( object   sender ,   EventArgs   e1 )   = >                  {                      if   ( Control . SecureTextEntry )                      {                          Control . SecureTextEntry   =   false ;               
Leer más

Xamarin.Forms Frame

Imagen
Hello, in this post we gonna be look how we can use a Frame in Xamarin.Forms This simple rectangular view sometimes is very usefull for presentation purposes. The first, we add a new Page, called FramePage. in the constructor we add a new View, the Frame View, also we declare some properties, like OutlineColor, and if we want that has Shadow around of the frame:              this . Content   =   new  Xamarin . Forms . Frame   {              // It   has   a   few  properties                 OutlineColor = Color . Blue ,                 HasShadow = true , } So, to avoid that the frame fill all the page, we add the properties to center the frame inside of the page:                 HorizontalOptions = LayoutOptions . CenterAndExpand ,                 VerticalOptions = LayoutOptions . CenterAndExpand , And for last, we add the content of the frame, in this case we add a single Label, Content =   new   Label {                     Text = " This   is
Leer más

Xamarin.Forms Picker

Imagen
In this post, we gonna be see, the Picker Control in Xamarin.Forms The picker is a control that allows select one element from a predetermined list of options. The first thing that we need to do, is create a instance of Picker:             Xamarin . Forms . Picker   picker   =   new  Xamarin . Forms . Picker              {                 Title  =   " Chose   one   country " ,                 VerticalOptions  =   LayoutOptions . CenterAndExpand ,                 BackgroundColor = Color . Aqua              } ; Next, we need to asign the values for our Picker control, and we do it, on the next way:             picker . Items . Add   ( " Canada " ) ;              picker . Items . Add   ( " USA " ) ;              picker . Items . Add   ( " Mexico " ) ;              picker . Items . Add   ( " Brasil " ) ;              picker . Items . Add   ( " Argentina " ) ;              picker . Items . Add   ( &q
Leer más