Infinite Scroll with Xamarin.Forms CollectionView
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- The Xamarin Forms CollectionView makes it infinitely easier to implement err.. Infinite loading! In this video we will see how we implement infinite loading by using 1 property; RemainingItemsThreshold and 1 event; RemainingItemsThresholdReached.
This sample targets using CollectionView from code-behind but also gives you information on how to do it with MVVM.
💝 Join this channel to get access to perks:
/ @jfversluis
🛑 Don't forget to subscribe to my channel for more amazing content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🔗 Links
Sample code Repo: github.com/jfversluis/XFColle...
CollectionView Docs: docs.microsoft.com/xamarin/xa...
Infinite Loading Blog Post (MVVM): doumer.me/infinite-scroll-wit...
Xamarin Forms Repo: github.com/xamarin/Xamarin.Forms
⏱ Timestamps
0:00 Intro
0:17 Sample App Outline
1:15 Implement CollectionView
1:50 Implement Code-Behind Loading Random Data Code
5:40 Implement Infinite Scroll on CollectionView
8:50 Run Sample App
10:24 Outro
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Twitter: / jfversluis
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#XamarinForms #CollectionView #InfiniteScrollxamarin forms collectionview - วิทยาศาสตร์และเทคโนโลยี
You deserve some type of
teaching award.
Thank you so much Shahan 😄
Thank You Very Much!!!!, as clear as water this explanation, i wonder how to implement using MVVM
Great! I’ll see to it that I make the MVVM one too :)
@@jfversluis Hi, how would you go about doing this for map tiles?
Very helpful, thank you.
My pleasure! Thanks for watching!
Thanks from Brazil my friend
Amazing! Thank you!
Great video
Thanks for your effort
So nice of you! Thank you!
Thanks . ❤️
You’re very welcome!
Is it also possible to do infinite scroll from bottom to up/both directions? Does the control gets slower on rising item count? Can we also remove not visible items again to reduce memory usage?
Not sure, I don't think CollectionView has the capability to scroll in other directions (yet), but not 100% sure. It should not become slower, it can use virtualization, check out the cell reusable/recycling options on the CollectionView.
You are just awesome.
You’re not too bad yourself! 😏
@@jfversluis glad to hear brother. I am your regular viewer.
And can you provide a way/idea to:
How to load data from the remote database whenever new data is inserted into the database online(in real-time).
maybe Inotifier or data changed property. I don't to how to achieve this (How to load data from the remote database whenever new data is inserted into the database online(in real-time))
Hi Gerald! I implemented Infinite Scrolling using MVVM. It works OK when there are more items to display than can fit on the screen. But when I filter my list down to having less records than the page size, the code goes into an infinite loop, calling the ItemSource over and over. I tried stepping through the code, but cannot figure out why it's doing that. In my xaml I have RemainingItemsThreshold="3" and it does this looping when the list size is 4 records. Maybe I need to add some checking into my ItemSource code?
Hi, Bryan! Any update about this? i have the same problem
@@williand.529 I was hoping Gerald would see my comment, but maybe the video is too old? I'll have to check and get back to you, but I don't think I ever resolved the issue and so I just load all of the items at once. I'll go back and take a look and see if maybe I did something wrong back then -- coding mobile apps is all new to me. 🙂
Thanks Gerard
How can I add filtering and sorting to this collectionview ?
That might be a good idea for a video :)
Thank you!! What about growing memory usage while doing infinite scroll, is there any inbuilt way to tackle that.
I like how Facebook mobile did it.
You probably want to look into cell reuse and the recycle strategy. I think there is are some built-in properties for that
parabéns pelo vídeo, gostaria de uma ajuda, o meu collectionview ao clicar abre outra tela, quando eu volto se eu tentar clicar novamente no mesmo item ele não abre.
I don't know how to describe my feeling
I'm sure you know، thanks alot
🦧🥂☄🔥🦧🦍🐒🐵🍃
Haha glad you liked it!
@@jfversluis Of course
I will give it a try with real data and share the joy with you 🥂
thanks again 🍃
Woo >>> very good , is this way like pagination (using Xamarin.Forms.Extended nuget) or or lazy loading or what ???
If done right, this can definitely be used as lazy loading and pagination :)
Hiya, awesome vid once again! I'm a huge fan :) I have ONE question.....my row heights are different sizes, so when loading more rows, the Y scroll sometimes makes the page 'jump' / 'jitter' upwards (only in iOS). Do you know how I can fix this? Thanks!
Hm doesn't ring a bell, sorry about that! Have a look at the repo if there is already an issue for it and if not open one to see if it's something that can be fixed :)
@@jfversluis okay thanks so much for the reply! Love how you reply to your fans 😊
@@loubarr1957 Aww thank you! I try to! But it's a lot sometimes, so it might take a little longer but I try to respond to anything and everything. Thanks for noticing!
Great Work my man. This works on IOS?
Yes absolutely! This is pure Xamarin.Forms code so each platform that supports CollectionView this works on :)
I just want to ask is this possible to replicate this but the infinite scroll will be upward? (not scrolling to bottom but scrolling to top) like the way Facebook Messenger does it.
I don't think that is supported out of the box right now, there are some hacks with flipping the whole control upside down, but that will probably be a performance hit
@@jfversluis I see. I hope they would have support for it soon. Thank you so much! More power!
Hi Gerald, thanks for that tutorial. I have one problem... When it loads more data the collectionview goes back to the first element... What can i do?
Do you reload all the data? I don't think it should do that
@@jfversluis I have figured out what was wrong. Basically I created a ObservableCollection and every time the threshold command was called I cleared the ObservableCollection and assigned new values. Now instead of the ObservableCollection I have used the ObservableRangeCollection and I add some new values with AddRange.
I have loading big data about 10k entries and data waiting to show about 2 minutes. But i don't know how to use this scrolling to optimize showing first elements?
Load first only 20 items and as people scroll load the rest :) skip the amount that you already have and take the amount of new items you want to load
Can u add link for some code?
Can u make a video i'm so confused:D
@@razorgmx4390 Basically it's this exact code but you don't load all the data from your backend all at once :)
I fixed it tnx
You could also do a Demo with a similar thing. Using a circular list. I know in this case you are not repeating the elements. But it would be nice to have a fixed size list we could infinite scroll as circular list.
That sounds more like something a CarouselView would do?
@@jfversluis I think so. Thanks. BTW, is there a way to keep flyout menu open on tablets but not on phones (Like IOS Email app)? Can you do a video about?
You should be able to use the FlyoutLayoutBehavior for that docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#control-the-detail-page-layout-behavior
@@jfversluis yeah, solved it with this line: FlyoutBehavior="{OnIdiom Phone='Flyout', Default='Locked'}" Thanks
@@Aliensfcul glad you figured it out!
in the collection view, i add image when click to the image to move too the next one the app is crashed any idea
I need a lot more information than this to be able to have an idea about that, sorry :(
@@jfversluis thank you for your answer
this is the code that I am using when I want to navigate to the next crash
is that help ?
@@anassnassim what is the error message?
@@jfversluis no error just the phone crush
@@anassnassim there probably is an error in the application output. Join my Discord server here discord.gg/2z6UKCnX
We can discuss a bit easier
How to create a circular list with two items?
In that case you might want to look at CarouselView maybe. That has looping functionality built-in
@@jfversluis got it. thank you
How to load data from the remote database whenever new data is inserted into the database online(in real-time).
maybe Inotifier or data changed property. I don't to how to achieve this (How to load data from the remote database whenever new data is inserted into the database online(in real-time))
I think there is special frameworks to do that, but you probably want to look at SignalR which can keep the connection open and get data real-time.
Realm was one database provider who also did things like this th-cam.com/video/T4A93-qmqyA/w-d-xo.html