Infinite Scroll with Xamarin.Forms CollectionView

one of the questions i got under my video is how to implement infinite loading with collection view without using any mvvm stuff so in this video we're going to see just that so here we are in a final new xamarin forms application running in visual studio for mac on the left you can see the main page running in example on the right i thought i'd do something different for today and i have the android simulator the android emulator i should say i'm running this actual application so as always let's update the title and let's say collection view loading sample something like that save it and with the power of hot reload you can see it automatically updates on the right so that is very cool now for this demo i'm going to implement it mostly in the code behind so if you were using mvvm you should do it a little bit different i will give you some tips and pointers on how to do that if you really want to me to show you how to do it in mvvm please let me know in the comments and i'll be sure to make another video or let me know if you have a nice sample that you know already does that and that we can share to everyone else so let me just dive right in i'm going to remove all these labels right here and i'm going to put in a collection view i'm going to give that a name because we are going to you know work with the code behind so my collection view let's do that there we go save it and well you're not seeing anything because this collection view does not have any items so actually i'm going to have to stop and restart the application in a little bit because i'm going to add a little bit of code here so let's go to the main page and go to the code behind right here so first let's add some things that i'm going to use so first here at the top i'm going to do private it's going to be read only random because i'm going to get some random values so let's call it randomizer there we go is new random so there's that and what i want to have is a observable collection and an observable collection observable collection is really cool because that automatically lets the collection view or if you're still using a list view lets it know that there is new item so that it should update i'm just going to put simple strings in here um obser observable collection string oh it's messing this up because it doesn't know this type yet so i'm going to let intellisense solve this click the little light bulb and then say import or write using um new observable collection string oh i totally forgot the name okay well um let's give it a name my items here we go that's better so i've got a randomizer which will create random values for us and i got my items which will be the item source of our collection view so actually you know let's just do that right now so i'm going to say my collection view dot item source is my items there we go so i've got that hooked up and let's actually you know private let's get that random value thing going private let's make it a list of string and get items and let's give this an integer number of items there we go and right here what we're going to do is result list new list string um so there might be a couple of things in here that you you know might not want to do um in production code but you know this is this is sample code so i can i can definitely get away with this so whenever i is less than or equal to number of items we're going to increment i and i'm going to do result list and randomizer dot next uh between you know let's just give our numbers a little bit of a body here we go does this add up one two three four five one two three four five uh there we go and dot to string because we wanted to have strings and let's return that one return results there we go okay so now we have something that can actually get us items and we have hooked up our item source to our observable collection um so what we want to do so the thing about an observable collection is you want to loop through it so for var s in get items um let's get 50 first so we're have gonna have to um oh for each sorry about that we're going to have to loop through that because the regular observable collection does not have any method to add a range or anything we just have to add all these things together so here we go my items dot at s so we're going to populate this with 50 items up front and then we set that to the item source so whenever we do this we should see 50 items i'm not going to rerun because that takes a lot of time you're just gonna have to believe me and whenever we do this so the thing that you can use to actually you know do that infinite loading is my collection view dot remaining item threshold so this basically says like hey if there are still um the the number of items that you configure here um are about to be hit like at the bottom um then it's going to um trigger this event right here or the command right here if you're actually using mvvm so this is also like the difference between the two things we're going to show it with the event right now but if you want to do it you know you can just do it with data binding on your view model and do it with that command so that's right here as well it's not that too much of a difference just some nuances so let's do it with the event here and let's add that event handler this looks a little bit funny because my font is zoomed in but i'm going to press tab here and it's going to add that event handler for me right here so here we are and of course i need to actually you know configure that value i'm not sure what the default value is actually but remaining item threshold so you know whenever you want to start loading early on you're going to have to make this number bigger because then it starts loading earlier in the process um and whenever you know you you're getting like closer to the end um and you just maybe want to set it to one and only then start loading things um it all kind of depends on like how what your layout looks like because if your items are really big then you know you can maybe make this item this this number smaller or if you're just going to load one more item then you can also make this item a little bit this this number a little bit lower um it's it's a bit hard to explain just talking to you about it but hopefully you will get it and it will become clear whenever we um actually start doing this so i'm gonna set this to five which is just an arbitrary number so basically whenever it sees like hey we only have five items left scrolling down i'm going to trigger this event right here that we're going to write right now um and um here is our code going to live that actually loads more items so what we're going to do here is basically you know just duplicate this thing uh where we're going to get all these and but we maybe want to have less items we just want to load 15 at a time of course you want to do some pagination whenever you are maybe loading something from the server so you want to say hey skip all the items i already have and just get another 10. and also something that's not that's an an entire topic entirely a big topic is async await which is not incorporated in here so you probably want to you know loading items like this is probably a bad idea because this is going to block the ui but usually whenever you get items through http it's going to be async anyway so that will be solved like almost automatically for you but you definitely do not want to block the ui with this but this should you know at least get the point across on how to load more data so let me just stop this right here and restart it for you and then we will see um our app coming up actually let me get myself out of the way here and we should see the first 50 items which are just you know random items and whenever i start scrolling um you should never see the end because you know it just loads that event whenever it sees we just have five left so you can see i'm well past the 50 by now right so i can just keep scrolling keep scrolling and of course whenever i go really crazy like this i should reach the end but it's pretty quick loading some new stuff ah you can see it i could do it once it's not i can't even do it again so this is this is pretty good um so you can just keep scrolling keep scrolling um new stuff will come in and that is how you implement the infinite loading with a collection view um through an event so if you want to do this with the actual mvvm thing actually only the only thing that you need to change is change this into the command and then you just you know hook up that command through data binding and it will trigger that command but you know you can still have in your view model the observable collection that should be the same only you should data bind it to the item source instead of assigning it this way so if you can't figure it out for mvvm please let me know i got this specific question for doing it the code behind so i thought i made a video about that if you want to do it in mvvm and you can't figure it out please let me know in the comments or if you want to see something else about the collection view maybe something together with the swipe view to get those contact actions going let me know in the comments and i'll be sure to record something for you now you know how to keep your users hooked in your application just you know whenever they maybe you reach the bottom almost just load those new items in and keep those people hooked in your application by infinitely loading new data now you know how if you want to do it in mvvm i said it multiple times i'll say it again please let me know in the comments and i'll be sure to make a video on that as well or you know just take this sample and try to do it yourself let me know how it goes and if you have any questions just reach out and i will do my very best to answer you or if you want to see any other topic please let me know for this video i hope you liked it and if you did please click that like button click that subscribe button to be part of this wonderful growing community and i can just you know have that plus one we can grow in numbers it will be totally amazing and for everything else i will see you for the next video and keep coding

Channel: Gerald Versluis

Views: 4,653

Keywords: xamarin forms tutorial, xamarin, xamarin forms collectionview, xamarin forms collectionview infinite scroll, Xamarin Forms CollectionView infinite loading, infinite scroll xamarin forms, infinite scroll, infinite scroll xamarin, xamarin 101, xamarin forms 101, collectionview xamarin forms, xamarin forms tutorial for beginners, xamarin tutorial, xamarin tutorial for beginners, xamarin collectionview, xamarin collectionview example, XAML, xamarin forms ui design, xamarin forms

Id: sZq8K_64bc0

Length: 11min 26sec (686 seconds)

Published: Thu Feb 18 2021