maui: Collectionview infinite scrolling upwards

Description

Collectionview is currenty only working top-down. I mean if you are using infininte scolling, this only works at the end of the list. We have a “chat-section” in our app. In chat applications the last message is being shown at the bottom of the list an if you scroll up, older messages are being loaded. Sorry, if this is already possible, we didn´t find a way to do so (except using 3rd party controls).

Public API Changes


var collectionView = new CollectionView();
collectionView.VerticalDirection = CollectionViewDirection.Upwards.

Intended Use-Case

We want to use this for a chat application. The last item is being shown at the bottom and if the users scrolls up, older items are being loaded.

About this issue

Original URL
State: open
Created 2 years ago
Comments: 36

Most upvoted comments

@FM1973 nice, works fine. I do not see anything rly suspicious. And visually it is rly fine.

Engisan on Aug 8, 2023

@angelru good question. At least there is no need for Maui to do the rotation calculation. I think we could enhance the sample using the ObservableRangeCollection. If I find time I will enhance the sample using this type of collection. But my vacation is near, so I´m not sure if I will find time to do the enhanced version. At least you can use this version for Android and IOS while the rotation trick doesn´t work on IOS at all. There are a lot of calculation errors on IOS which result in a crash.

FM1973 on Aug 8, 2023

@angelru I´m working on it.

FM1973 on Aug 8, 2023

ChatSample.zip

Just created the sample for you 😃

Engisan on Aug 4, 2023

@FM1973 Currently I have a chat with CollectionView and I use this trick:

rotation="180"
ItemsUpdatingScrollMode="KeepScrollOffset"

In android I had to put this renderer:

  public class ExCollectionViewRenderer : CollectionViewRenderer
     {
         private int dy = 0;

         public ExCollectionViewRenderer(Context context) : base(context)
         {
         }

         public override void OnScrolled(int dx, int dy)
         {
             this.dy = dy;
             base.OnScrolled(dx, dy);
         }

         public override bool Fling(int velocityX, int velocityY)
         {
             return base.Fling(velocityX, Math.Abs(velocityY) * Math.Sign(dy));
         }

         protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
         {
             base.OnElementChanged(elementChangedEvent);
         }
     }

I hope it works for you.

angelru on Nov 29, 2022