.NET MAUI - All you need to know about CollectionView (according to me)

it has been time to talk about the most powerful control within.net maui the collection view [Music] welcome to another.net maui video in this video i will show you all you need to know about collection view according to me so collection view is what the name says it's a view for showing collection of data we had it already in summary forms where it replaced the list view that was much more limited than the collection view and less performance so dotnet maui collection view is what i will show you today so let's open visual studio so we can start to write some code so now we are inside of visual studio i have created a new project from the dotnet maui app template what i have done here is that i have added a city service i call it is a service that gives us name and positions of series so we have some data to work with inside of our collection view but we should not care that much about that because that's just some boilerplate that we need to have a good demo but i have also created a view model and we have a empty view and there is where we will work in this video so we can start to go to the view model and we can load some data and add it to a collection that we can bind the collection view to so i prepared with a loaded data method that is called when binding context is set so what we first do is that we fetch some data from the city service and we can use the get method and then we can fetch let's say 20 items for example then later in this video i will show you how you work with collection view to load more items because we have a lot of items in this data source that we can use for that then we need a observable collection a property so we create that public observable collection of cities let's see this make it a property and we give it a default value so and now we can either add items one by one to the observable collection or we can create a new instance and set that to the property i prefer to create a new instance because every time you call the add method of the collection view it will trigger an update of the ui and we won't avoid that especially in the first load of data when we add more data later we want to keep the old items then we can use the add method if you want to so we do like this cities is equal to new observer collection of city and then we pause the date object like this and then we need to call property changed because observer collection will only notify change when you add or remove or doing some manipulation of it not when you create a new instance so property changed dot invoke this new property changed event args name of if you use communitytoolkit.mvm you can remove some of this boilerplate code using source generators but in this demo i have not added anything else than what is in the box with dotnet maui so now we can go to the view and we can create a collection view collection view item source and binding to the cities property and now we also need to create a template how we want every item to look when it's rendered on the screen so collection view dot item template and inside of that we create a data template we can set a data type of it or if we want the bindings to be compiled so in this case models say i prepared and imported those namespaces before so then we can say let's do a content view we're padding 20 for example then we add a label text binding name and now we have created a collection view as simple as it is possible so let's see how this look in the app before we go and do some more advanced stuff so this is how the app will look when we have a simple collection view with with data and you can see we have all the 20 cd names here so if we want to change the layout of the collection view there is something we can do this is the default layout that is a linear layout but we can also use a grid layout or we can use linear layout in horizontal way so that is what i will show you now so we go here and use collection view and then we have the items layout property and here we can say linear items layout as in the default one but we can set orientation to horizontal and you can see it will be in this direction instead maybe not that usable with this type of data but for other scenarios it can be very usable so if we instead change to grid items layout and let's say vertical again it will look the same but then we can go and set span to 2 if you for example want to have two columns and we can also have a horizontal direction direction here we can set spacing vertical item spacing or horizontal item spacing let's try strength there and set it back to vertical and this is how it will look then so if you want to show some message for example if there are no available items in a collection view you can also easily do that to do that you can use the empty view property collectionview.mtv and you can see here that we have both an empty view and an empty view template if you want to use binding we can use the view template and create a data template and then we can set a data source via the empty view property but in most cases when you have an empty view you will just add a label so we do that label text and no items in the collection view and we can add a margin to make it look prettier so and now we also of course need to stop the data from loading so we can see it so sure and here we can see no items in the collection view so now to the big question can we have different data templates and load them based on the data yes we can and we will do that now and what we need to do then is we need to create a template selector so let's go and create a new class and make it a template selector we can have a template selector here based on country so if it's sweden for example we can make everything blue country template say lecture and then we add template data template selector as the base clause we implement abstract members and here we can write some code to handle this but we also need to have two properties or as how many different templates we want to use so we can create one for sweden called sweden temp plate for example and then we can have one for other template like this so now we can write some code here so first an if statement to shake the type of the item i if item is type city assign it to a city variable and then we can do like this and system.country is equal to se then we can return sweden template otherwise we return the other template it's not more complicated than this to write a template selector but now we need to use it so we go back to the saml and we create a resource dictionary content page.3 resources resource dictionary and here we can create the data templates so we can copy this one twice and we need a key attribute key like say sweden and key other and then we can do like this background color blue and then we import the template selectors and the template selector is in the same namespace right now as the view model so we can use that so we go here vm colon country template selector sweden template static resource sweden other template static resource other just like that and then we close it so and we need a key on this too of course come to select and now we can go here back and we can remove this item template from here and instead we use the same property here item template but now we say static resource and then country selector like this so let's run it and now we can see that we have some cities that has a blue background color and that is the swedish series maybe not look that good but you can do it as good as you want to but this is the technique that you will use to do it and now the time has come to talk about how you can load more cities because this data collection is huge so you don't want to load them all directly so instead we can load them when we reach the end of the collection view okay to do that we need to have a field in the view model for start index so we keep track on how much we have loaded start index is zero and it should be an integer like this and then we can add a command public i command load more and that returns a new command and then we pass an action to it like this and now we can take this code and we instead of zero there we put start index and then we load the next 20 items and we need an async keyword there like this and now we can do do it like this for each item in data and then we can just add them in the end of the cities collection view like this so now we can go to the saml and we can set the threshold so it will trigger the load of new items when we have five remaining items for example you can have two here also if you want to but i think five is good in this case and then we need to specify the command so we do that binding load more and now we can try so here we have city collection and we can start scroll through it wherever you stand it will load more you can set the breakpoint in the view mode to make it more obvious because it's hard to see in the simulator so scroll down scroll down scroll down and now we hit the breakpoint because we can now load more data but we did one mistake we did not update start index so we need to do that of course too after this like say start index and add 20 to it yeah okay so is is it to load more data to a collection view collection view itself is virtualized so it reuse the cells so it will be able to handle a lot of data but if you have a data that you fetch from a server you maybe want to load it in chunks instead of loading a big big blob on the start because maybe the user just want to see the first 20 items then you don't need to load 20 000 for example so that is like lazy loading collection view with collection view we also have the option to add a header and footer that you can use in the top box collection view and in the bottom of the collection view and i think that is better to use the header then for example use a grid and have the content above the collection view because collection view works best if it's in a full page so let's add it like this and it's very similar to how you did with the mtv so collectionview.header content view padding 20 label text this is the header we can copy this and then we replace header with footer this is the footer and we run to see if it works and here we can see the header footer and we can still see the empty collection view because the item has not loaded yet you can handle this amp view with a if statement if you want to you can have a sbc property that you can bind to and not show any content in the mtv if you don't want to okay that is how you use header and footer now there are just one thing left to show and that is the grouped collection view to do that we need a new data type so let's go to the view model we can use that in the same file we create a new class let's say situ group and as a base class it will have a list of city then we can add a property string name like this and then we can add a constructor a city group we can have in string name and list of city items like this and we pause the items to the base constructor a name is equal to name okay now we're ready to go but now we also need to group this of course so now the data is grouped then we need to change the observable collection to use citygroup instead so we changed it there we changed property and we pause list there instead that is the list of the city groups and then we are ready to go and edit the sample so the first thing we need to do here is to set is grouped to true and then we need to create a group template header so collection view dot group header template add a data template set the data type so it will be compiled city group add a content view with the background color let's say light grey and padding 20 and inside there we add a label text binding name so it's not harder than that now we're ready to try it so now we have a grouped collection view with the country as the group header so we can scroll it down here so that was everything for today i have shown you all you need to know about collectionview at least according to me so there will be more content about the.net maui my plan is to put out at least a new video every week so please subscribe to my channel like this video and we'll see you next time

Channel: Daniel Hindrikes

Views: 6,792

Keywords:

Id: J5wC87xE9Qg

Length: 21min 8sec (1268 seconds)

Published: Wed Aug 10 2022