Infinite Scrolling using CollectionView In .NET MAUI / Xamarin Forms

[Music] hello guys welcome to my channel in this video i am going to show you demo about implementing infinite scrolling using collection view in dot net movie so here i just created a new project in finite scrolling using collection view project and here i just created an empty folder like views view models and the models so let me add here first view so i am just going to implement this free api public api so this api returning like lots of data so i'm just going to use this and this api response is like in this format like api description and some basic property available so i'm just going to display this in collection view user and also like implement the infinite scrolling here i just added a xamarin page xamarin.homepage so let me again add dotnet mavi content page animal list [Applause] view okay and in view model i'm just going to create this animal list view page view model so also i am just going to install one plug in mvvm community toolkit [Applause] so that will be that has observable property and all stuff so that will be easy to create a observable property okay and services in services i'm just going to create one class and here i will add api call so before that i am just going to create one model so that model will be in this format like this api returning data like one is account and another is the entry so let me create a class so api main response format is one is account so i'm just going to add here count property and another is list of entries so that entry will be in this format like api description so i am just going to use here link category and the description also i will use this api so let me add that property here so i'm just going to create one class okay so let's use this tree property only and so now that api response class is ready so api going to response data in this format and in that it's going to written list of entries so now let me here at an api [Applause] okay so this is the url of this entry so i'm just going to use this okay so i'm just going to read contain like whatever the api response scheme that i'm just going to read in a string format now i here i need to deserialize that contain so for that i need to install newton's shop json plugin so let me install that [Applause] so this api going to written data in this main response i'm just going to convert this into this main response here is a readeth string guessing so i need to add here a weight then it's going to work here now i will check here like if entry count greater than 0 then i am just going to return entries from this api so let me here create another object [Applause] [Applause] okay so now this get animal list api is ready so this i am just going to use here in animal list view model so before that i am just going to register now view and view model in program my program myprogram.cs so here [Applause] also i am just going to register service also here [Applause] so that service name will be this animal service now let me bind this animal list view model in animal list page so [Applause] and here in sorry here in animal is view model i'm just going to create constructor in that i will access this animal service so [Applause] okay so now in view model i can access this animal service and from that i will call this animal list get animal list api so in a constructor i'm just going to call this get animal list matter and here [Applause] okay so here in this animal list let me create here observable object [Applause] type of so this api returning data in android detail format so this observable collection will be the type of entry details [Applause] okay now another list of entry detail i'm just going to create object so whatever the response came from this get animal list api that i am just going to add in all animal list object and from that i will display in this observable object means i mean add like 10 or 20 record in this animal list observable object so let me create here page size so right now i'm just going to set as a 20 or here in this observable collection right now like i need to add data here like only add method exist so i i need to add like a data in for each loop i need to try traverse to for each loop like if i want to add drag code but you can also use mbvm helper plugin plugin in that you can find the ad range method that i using that you can add multiple record in that so right now i'm just going to take [Applause] okay so this get animal list like on a constructor so when the page is open that time it's going to call get animal list method and here i will fetch all the animal list from the api and i will add that in this all animal list object after that i will just take 10 20 record and i'm just going to add in animal list now let me design ui so here i am just going to use collection view [Applause] [Applause] okay and this data template also so for that i need to add here models class okay so this data template will be the type of entry detail now let me display some data so here i'm just going to okay so ap category and description i am just going to display okay now let me run the app and let's see it's displaying data or not so before i'm just going to set here animal list page in app cell so our animal list page exists in this views folder so i'm just heading here views and here will be the page name okay now let me run the app okay so it's displaying animal list here it's like a scrolling is not working on this page so let's see i'm just going to add vertical option plan x1 so let me just read in the app and let's see that scrolling is working or not okay so now scrolling working and it's now displaying 20 records so now let's implement in finite scrolling so before that i'm just going to add here loader so when the data is patching from api so till that it will display here loader so let me add that so in a view model animal list view model i'll just create i will create one observable property [Applause] okay and this here i'm just going to use okay now here in a collection view for implementing infinite scrolling uh here one property called remaining threshold so remaining item stressful in this you can specify the number of items that remain in collection so i'm just going to set like a one so when when you perform like a scrolling and there was like a one item left in a scrolling that time you can hire the command so for firing command you can use remaining item threshold reach command so when the one item is remain in collection that time this remaining item threshold which command is going to execute so let me create command here [Applause] so here load more data command i'm just going to specify here okay now let me run the app and let's see like when the last item remain in collection that time this load more data method is invoking or not okay so here now the load more data command is firing when the last item is available in a collection so let's see here now when i scroll and when i reach the last item then this load more data command is executing now let me add here logic related to like adding record [Applause] so here i will check like if the all animal list count greater than 0 then this load more data going to patch page size and it's going to skip record that are loaded okay so here so these structure you can use like when you have like not like lots of data like 500 or 400 data then you can just store in local object like this and from that you can fetch data so that will be work faster and other case like if you have a more than 500 data then in that case here like we call ap i get an email list so same api like the api that has a pagination implementation so here you can call the api that's going to skip some record and going to have some record and once the response came from api then that record you can add in our like whatever the observable object in that you can add the record now here in a collection view let me add footer and here i'm just going to add activity indicator so this property like is loading so when the record is loading then this will be visible so same thing i'm just going to add in collection view header also i am just going to remove this activity indicator from here and i will add that here okay now let me run the app okay so now it's displaying data now let's see so it's loading more data but we cannot see that loader effect because it's loading uh too much fast so let me add here delay so we can see that data is loading or not so here i'm just going to add task delay for one second this for only loading effect i'm just using actually like if you call api here then you no need to use this okay so now the loader is displaying and data also adding okay now if you see here i'm i need to use for each here for each loop and after that i'm just adding record individually in this animal list like i need to add single recording so let me install another plugin so you can use add range method so here from the manage new guide so this refactor mvvm helper plugin you can use in your project so this plugin has a observable range collection so that observable range collection you can use let me use that so now you can here use some matter like add range then replace range so i'm just going to use now when the first time application load the data that time i will use like replace range and here i will use add range and this okay now let me run the app so using observable length collection like you no need to use okay i think that method okay so here i will set this observable object like this because i think this observable object also exists in this observable range collection so because of that it's throwing that error ok now let me run the app okay so now it's displaying data and also it's loading more record okay so that's all for today i hope you like this video please subscribe my channel and thank you so much for watching

Channel: Programming With Pragnesh

Views: 5,404

Keywords: .NET MAUI, Xamarin Forms, Infinite Scrolling, Endless Scrolling, Colleciton View in .NET MAUI, .NET MAUI Collection View, Infinite Scrolling With Collection View, Infinite Scrolling Using Collection View

Id: nSdQaaaLjUY

Length: 31min 25sec (1885 seconds)

Published: Sat Jul 09 2022