Pull-To-Refresh, EmptyView and Layouts with CollectionView - .NET MAUI Tutorial Step-by-Step

we've already seen a little bit about the collection view but it's time to dive in a little bit deeper in this part of the dot at maui crash course [Music] just to be sure you came here through like the rest of the course right if not this video is part of a crash course the playlist should pop up on your screen right now make sure to follow it from start to finish that way you will miss nothing so let's talk more about the collection view because face it the collection view is going to be a big part of any application basically because almost all applications show data in some shape or form um that is listed like if you're getting records from a database about people then you will add them in a list or if you have a list of monkeys for some reason and you add them in a list with a little image you can do all kinds of crazy stuff now before i go deeper into the collection view there's also the carousel view which is literally an inheritance from the collection view it's just a specialized implementation if you go look at the code like the carousel view is actually inheriting from collection view bits and the carousel view is kind of like you know the applications where you have this horizontal scroll thing with a little dodge usually at the bottom where you see an image flipping over or you just have a list of data and you can endlessly loop through that list maybe just like from the netflix application something like that you scroll through all the tv shows that is the carousel view that's very specialized in looping and showing data in a horizontal way i think it has options for vertical as well but um a lot of the options that you're going to see today for the collection view also work for the carousel view the carousel view has a couple of extra things so for the collection view we also have a lot of options and uh we're just using the basic features actually right now but for this video what we're going to see is how to actually use pool to refresh which is not specifically for the collection view but you can definitely use it for the collection view as well we'll see a couple of different layouts for the collection view and in the end we'll see how to actually add some nice image or message for the user whenever the list is empty so that the user actually knows that you know everything shows up nicely but there's just no data so with this actually let's just switch over to my screen and see how to do all of this awesomeness to follow along with all of this uh make sure to open the folder on your local disk you've cloned the repository the link you can find down in the video description below um this is all part of a workshop that i'm following here so be sure to have a look at that here we have part five collection view that has the solution that has the code for like where we left off in the previous video so um you know or if you have followed along with a single solution that's fine as well but you can open the solution and you should end up with kind of like the thing that we have here so i have it here running on the android emulator this is where we ended up with we can do get monkeys then we will get our list of monkeys we have implemented this find closest button so we can find the closest monkey here it's still henry phoenix and if we go to the details of one monkey we can click here on show on map and it will open the default maps application for this monkey and it will show it on the map with a little pin now what we want to do is you know this list and the get monkeys that's nice but what is a very common user experience pattern is that we can pull this down this list and we can actually refresh the data like that that is what you can do with a refresh view now i already mentioned the refresh view is not specifically for a collection view you can also use it on a lot of other visual elements that kind of like have the scroll you can use it on a scroll view if that's what you want so you can implement it many different ways but the collection view is definitely one of them if you're using the list view so the list view is kind of like the predecessor for the collection view you shouldn't be really using it anymore it has the pool to refresh built in so you don't need to worry about that you can use other things right there but for this collection view we can definitely use it so actually let me stop running this here for a little bit and we have this collection view here so this is in our main page right this is our list of monkeys and we have this collection view here with the item template and all the things that we've implemented earlier now here what we can do is add a refresh view so you can see it comes up nicely it will automatically add this closing tag here and we're going to cut that out and go to the bottom of our collection view and put it in here so that you know it's nicely wrapped in our collection view and then we can indent this a little bit nicer and we have a refresh view but what we want to do because we are making this like wrapping our collection view we want to move this grid.column span one level up so that it you know spans across the two columns that we have from our grid right here so we have that and the other thing that you want to do is set the command so we already have the command to get the monkey so we can just say command which is going to be the command whenever it is going to be fired whenever we do the pull to refresh and we can say binding get monkeys command that was it so we have that in place this actually already works but what is happening we also have this property here is refreshing that is a property of the refresh view and you can say like you know if we pull down the collection view it's going to set this is refreshing to true but you have to set it to false because you know else it will just show a little loading indicator all the time and we have to let the refresh view know that we're done loading our data and and we're done for the normal ui flow to continue so what we want to do here is also set this to a binding and i'm going to set this to is refreshing which is something that i still need to implement so it doesn't know it binding is refreshing we got that in place now let's go over to our solution explorer and i'm going to go to my view model and go to the monkeys view model and in here we can see that we have oh we don't have the observable collection things here or the observable object things here for oh that was in our base view model right from the toolkit mvvm which is handled in a previous video so go check that out so here we have all of this the observable property etc i can just actually it's more like the is busy so let's just copy that one i'm a lazy developer i like copying things um do that we don't need to also notify change4 and this we're going to say not is busy but is refresh and now we should automatically end up with a property that we can use for the is refreshing um so whenever when are we done with loading our monkeys we do that in our get monkeys async and we're going to go all down here and in our finally we're also going to say is refreshing is false and because this is this observable property and it's automatically going to be hooked into from the example with the inodified property change all the things that we've seen in the previous video and our ui will update nicely and actually this is all we need to do so let's just run this for android because there's something interesting while this is loading this kind of only works for android and ios because there you have like your touch input right for windows this isn't really implemented as far as i know um because the the kind of like swipe to refresh is not really a thing there at least if we are looking like the desktop environments and for mac os i think kind of the same thing although i'm not really sure how that works but this is mostly you know intended for use on the mobile platforms so now even if it doesn't show we can already do the pool to refresh we can pull it down you can see that little loading indicator we can cancel it if we go back up then it doesn't do anything but if we pull it down and we keep it that way then it will start loading it will go through the flow and it will disappear whenever our monkeys have loaded so that's how easy it is to implement pull to refresh with the refresh view and we can do this over and over again i can just pull to refresh this again and it will load all the stuff again so you know that's how this works now let's go over to the next thing which is like the grid well we're going to see a grid but the collection view other layouts and for that we're just going to keep the application running i already mentioned it in a previous video we have this example live preview here that just mirrors the screen from our emulator so that's really cool we can see the exact same thing going on here and we can go to our main page and if we go to our collection view so now this this layout here is a little bit messed up sorry about that but what we can do here with our collection view is say collection view dot items layout and the items layout is something with which you can influence the layout and by default it's set to a linear items layout with a orientation of vertical so if we set that we will see nothing new this is just our regular list as it is right now um but you know we can also set this to horizontal and while while preparing this i noticed that the horizontal it does something weird so i'm not sure if this is a bug in the hot reload because you know you can see it i can just change these things it will show up the changes automatically which is really amazing real productivity boost here um or if this is a little bug that snuck into the collection view because i'm still running on the preview while you're watching this so um something is going on here but you should be able to use this linear items layout with horizontal um you can do that but there's other layouts as well and you can actually of course also implement your own layout right so that's pretty cool as well we can also switch this to the grid items layout and we also can set the orientation for this i think if we set it just to vertical without anything else then it will go back to our kind of like default layout as well but if we set the span here which is really cool we can set the span to three and you can suddenly see that it goes to this grid layout with a span of three so we have three rows of columns that is pretty neat and whenever we set it to horizontal i'm not sure if we're going to see much changes here well it did i think we have to fiddle with like the um layout here that we've set some properties where it kind of like shows weird right now um but now it would scroll kind of like horizontal and we still have that grid with a couple of columns right so this is the something very powerful where you can create all kind of own cool crazy layouts um that you can do with this so that is pretty amazing as well um now let's do let's let's reset this to whatever it was so just to you know make sure that we have seen this let's set this to a linear layout and an orientation of vertical just so we um you know have this bank again this is like our default thing and makes the most sense for our monkeys right so let's just stick with that and that's just the layout right like i mentioned the collection view has a ton of options so uh we kind of skipped over that in another video we have this selection mode um so right now we've kind of implemented this um let's see if i can find it here on the frame this gesture recognizer for the tab on which monkey we tab but you can also work with the collection view and then set the selection mode i think you can set it to single or multiple so you can just select one or you can even select multiple and then we also have like commands and events for um selection changed so whenever the selection change then you can get the selected items or you can set the selected items so there's all kinds of options here for selecting things in this collection view as well it will be a nice exercise for you to go check out what is all available here now another cool thing actually let me stop the application for a little bit i'm not sure well actually i am sure it works with hot reload but what is happening is we've now loaded the data and we do not have any way to unload the data except for restarting the application and i want to show you the empty view so let's stop the debugging right here and we can set the empty view in a couple of different ways so if you're unaware kind of like setting properties like this is preferred whenever you're going to do complex things like this right but you can also definitely set the the exact same thing here with the items layout like this as an attribute right so if you have a easier way of notating things then you can definitely do it as well and that's the same thing for our empty view so our empty view you can say set the empty view like this or you can set it with an empty view template so you can provide a template for that and then you have and again a couple of options you can just specify a string and that will show up as a string in the center of the screen as a message to the user so no monkey business here and whenever we now load kind of like the initial thing here for android we're going to see that label first because there is nothing to see yet and it will show that to the user so whenever you have this scenario where you don't have any data whether it's because you're filtering through your collection view and there is no results it will show this little message or you didn't just didn't load the application the data yet it will show this message as well so this is like a nice easy way to get started but what you can also do is if we go back to our example live preview here and we remove this one and i bring in a little bit of extra code here you can again do this in a more complex way so let's add this and you can see whenever you're going to specify properties like this um you can have multiple things like like like these blocks here right you can say collection view dot and then the property name and in between you can specify like your complex things and while i was talking you have a little spoiler alert here you can see that it now has this empty view with a nice image that we've already had in our project which we are centering like in the middle of our screen and you can see that we have this nice little graphic you can put any complex layout in here while the application is well the data is empty so whenever you know we end up with empty data it's going to not show the records anymore or the layout that you have set up but it will now show this empty view to make clear to the user that it is actually empty and um you know so let's switch to actually windows so let's stop this for a little bit and see and prove to you that this actually also just runs on windows so let's just do that we're going to go to windows and here it's kind of like interesting right you might also this is also a nice exercise for you because the items layout might make more sense to make it a grid on kind of like a bigger screen whenever you're running on the desktop right to have the little grid and that shows a little bit nicer than the long kind of like bars that you would see on on mobile so that's a nice exercise for you how to figure out how to make the difference between windows and android and and make it happen between those but you can see this empty view also works here for windows and then whenever we we get the monkeys you can see the little loading loading indicator and now the empty view disappears and we have our data back here so that's also a nice little ux feature um so that you can show to your users that actually there is no data the component is there everything is in order that's always very important for users like hey there's nothing wrong but you just don't have any data right now so this is kind of like a deeper dive into collection view and all the possibilities there but you know you're becoming a little bit of a don value expert right now so feel free to experiment a little bit with this on your own so how did you like that there is a lot to unpack in the collection view i already mentioned there's also the carousel view that kind of like is a specialized way so you can also show the monkeys in kind of like a carousel way and scroll through that so like i said you're becoming a.net value expert right now we're just progressing through this course there's not many parts left we just have the one on application themes after this and then i have a little wrap-up application to you know set you free we spend so much time together um and and point you to a couple of resources that will help you learn even more and how to get started with a real world application the billion dollar application that's going to make you rich so we're almost at the end you're almost a done at maui expert and i have a nice little surprise for you to actually prove that to the world so make sure to stay tuned so feel free to experiment with the collection view the carousel view all the things here um so i already mentioned the next video is going to be about the app themes make sure to go to the video here and review the playlist for the full course here and of course make sure to subscribe do that here see you for the next one [Music]

Channel: Gerald Versluis

Views: 10,525

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, dotnet maui tutorial, .net 6 xamarin, dotnet maui getting started, .NET MAUI crash course, .NET MAUI workshop, dotnet maui workshop, dotnet maui full course, .net maui full course, learn .net maui, learn dotnet maui, net maui, crash course, .net maui tutorial, c# maui, what is .net maui, .net maui collectionview, dotnet maui collectionview, collectionview emptyview, pull-to-refresh .net maui, maui collectionview grid

Id: invsT4ST1SI

Length: 16min 20sec (980 seconds)

Published: Fri May 20 2022