Display Rich Data with CollectionView - .NET MAUI Tutorial Step-by-Step

this part of the.net maui crash course we're going to see how to display data in a collection view [Music] if you are following this course part by part then this might get boring but i just want to point out for all the other people that if you've landed here and not follow the entire course then this video is part of a course so make sure i would highly recommend that you start this course from the start and follow it all the way through in order because that will make the most sense i'm referring to other videos left and right so make sure to do that in this video before i explained everything about the single project approaching.net maui before that we've set up the dev environment that you will need for don and maui and in this video we're actually going to get some doing some code and i'm going to show you how to show data in a collection view in your dotnet maui app which is a big part of any mobile app basically now without any further ado let's just dive straight in here i first pull up the repository i already mentioned the repository for the workshop um so i forked it from the original one you can see that here just so i have you know a control over um what is going on here and i don't show you all these kinds of weird things that are suddenly updated in the uh original repository but you can see here it consists of multiple parts so i did the overview i stretched the overview in a couple of more videos but right now we're kind of like at part one displaying data and you can see all the parts here so whenever you're going through this the one part is going to be one video and whenever you go through here you can click it and you can also follow along here with all the readmes each part will have a readme and you can see exactly what we're doing here so whenever i skip over something which i'm not going to do i'm going to be amazing but you can kind of like reread review here what is going on and a little bit of background information and some links left and right so don't worry about what's here right now i'm going to totally show you and each folder each part will also have its own set of source so here you can see the monkey finder and it has blank files but whenever you get stuck or whenever you think like hey i'm going to start here from the mvvm part or you're wondering like hey what should be the end state then you can peek in like the next part because the end of part one what we're going to build is going to be the start of part two right so all the code should follow up like that and you can just easily pick up from the next part or have a little peek there what is going on so i'm going to assume that you know how to get the code from this github repository um i'm not going to go into too much detail but here in this green button you have code you have all these options i like the github desktop client so you can just click open with github desktop client clone the thing with your github account and you will have it on your disk or you can just say download zip you will get the whole thing in a zip package put that on your file system and unzip it you should end up with a folder like this and here you will see the part one displaying data with all the things and all the other parts and just open this monkey finder solution and you will end up with a visual studio like this here we can see the main page which is totally empty from a file new.maui application so we can see here actually on the right in the solution explorer that we've added a couple of things so you can see views and view models and models here so there's a couple of extra things whenever we hit something i will go over them but those files are mostly going to be empty and placeholders so we don't have to repeat all the things and and add all the files here constantly so this is where we're at one thing i want to point out here is this global usings which is also a c-sharp 10.6 feature where you can just have one file uh where you say global using and then the the namespace so you don't you don't have to repeat over and over again all the namespaces in all of the files so this is a very cool new feature just put all your usings in one in one file and it will pick up on that throughout your whole project so that's that's what's going on here now for the rest we have this main page.example we'll focus on that in a little bit but before we're going to display the data we actually need a model for the data that we're going to display right so we can use the different properties that we're going to display in that collection view so in this model folder right here we have a monkey because we're going to show a list of monkeys with some details that come together with a monkey now we're going to get this from a json file which is a file that is supplied locally with this project but we're also going to see how to get it from the internet from from a remote source which is very typical for a app scenario right and what is really cool we have it here in under the resources obviously and the raw folder and then we have this monkeydata.json i can open it here and this will be a json file it's actually formatted so you can read it nicely and it has all these properties right name location details all these things that we can show and use for different scenarios so you can go to solutions like quick type i think and json to c-sharp to generate the classes for us but actually it is built in to visual studio so if we just ctrl a and ctrl c if we copy this and we go to our monkey cs and i go here inside of this public class and we can go to edit and say paste special and i could say paste json as classes so if we do that well it's actually going to replace this this root object here so in this case it kind of like goes wrong maybe but because it's an it's a collection right so it's trying to create this object for the collection of things and this class one is actually our monkey object so we don't need the collection for this thing maybe it would have been better actually let me just show you i can just delete this thing again go here and then let's just take one monkey we just want to have this one object right so this is the representation of one object let's copy this one go to our monkey cs and actually edit paste special paste json as classes and now it's going to do our root object with all the properties that we can kind of see right so we still need that don't need that public class here so let's remove that one and boom now we suddenly have our monkey object without having to type a whole bunch of things right we just have this here let's see if we can format this a little bit nicer for the indentation here we are so we have this monkey object now what is a good thing to kind of like note is that it doesn't maybe infer all the types correctly so here it's a public float i think if you want to kind of like do this gps coordinates it's better to do that with a double so let's make sure that this is a double and we get everything correctly here uh maybe it doesn't really matter but double check the data that's coming in here that it makes sense for the data types that you actually want to do but right now they should be easy to serialize and deserialize between these two now with this in place actually it's time to go over to our main page example and implement our collection view now the collection view is something that kind of like takes up the whole screen because you know typically a list is shown as as part of the whole screen you can definitely you know downsize that and make it an element but in this case we want to show it as a full screen so inside of our content page i can just say collection view and boom there we are we have a collection view now obviously it's not as easy as this um so we want to do kind of like we want to feed it with items right and you can do that with the collection view dot items source and here we can feed it with items you can do that inside of this example right here but the more typical scenario of course would be to do that from code or even better through data binding through mvvm you just provide that data to a property and the collection view will automatically pick up the data that's coming in and show it nicely for now to get started just to get you the the hang of the collection view i'm going to do this example and show you how this actually shows up later on we will transform this code and make it a little bit more nicer and get the data elsewhere but for now we're going to set this data source and actually let me just paste a little bit of example here so you don't have to see me type all the things here so what we're actually going to do is put in here an array so this is the representation of example array of the type monkey so this this refers to our monkey model that we have right here and for each of these we're going to create monkeys and this will just add one thing to our array so this is one record to record three record so we copy and paste it a little bit here from um the the json file that we already have just like i said this is just some static data to to kind of like get the point across um you can see the model.monkey is not recognized here because we need to add a xml namespace and an xml namespace is kind of like a shorthand notation for not having to type the whole namespace and and model and then type name and whatnot so we can say xml and s monkey so that monkey is kind of like our short name and then here we should say clr namespace so we refer to the code and here we can say monkey finder dot model right so it will refer to our namespace like this and suddenly we can oh this shouldn't be monkey but model so here we have this model and this is now short for basically typing this all the time so that makes our example a little less verbose so you can see here this is actually model dot monkey so written out loud it would be monkeyfinder.model.monkey right but you can shorthand that to this and you can see that the intellisense now picks this up and it then also automatically knows about all the properties in here right so we can now say the details and the images and the latitude and the longitude so it can suddenly understand what kind of model we're actually expecting here so we have this array this is our item source this is going to be the data that we're actually going to see whenever we run this like one two three monkeys right so we have three in here um and actually i can just run this so if i click here this windows machine i will maybe switch to windows which you android and show you both in in other videos because that's the power of dot net value right we can just switch to another platform and run it on that and here we see our windows application and we can see our collection view with one two three monkeys but this is not really what we want to see right this just calls the tostring on our monkey model which prints out like the full namespace and the actual type of the name of our model of our object so this is this is nice we can see that it has picked up on the item source but this is not really nice for the user right so let's see how we can make that better of course if you're doing an array of simply strings then you can totally do this it will print out the strings it will do the simple types you can absolutely do that but for more complex types you want to maybe show it a little bit in a nicer way so we have this item source now right here let's go to the item template so we also have the collection view dot item template and with this we can provide a template and the template is applied to each of these monkeys so in this case three times basically and what we can do is we can make a complete full complex layout here which will be used for each record in the collection view and that will show up nicely for each of the monkeys so we first have to specify a data template each of these has to be a data template and we can actually specify here again like the x data type is a model monkey so that it knows the intellisense knows this is just a little helper so that the intelligence knows how to help us which properties are there for the monkey so be aware if you're inside of this item template we're suddenly dealing with one monkey whereas here with this item source like for the collection view um the the kind of like the whole backing thing is this collection we'll get to that in in the mvvm part which is the next video so don't worry about it too much but just remember that i said this basically so we have this data template and actually again let me just copy in here a little thing so you don't have to watch me type all of this i will go over this line by line you can see this horizontal stack layout so what we expect to see is something laid out horizontally right with a little bit of a padding here we're going to show an image which is going to be the image of our monkey and you can see here this already does a little thing with data binding and remember we're looking at one monkey model here so we have this image and probably when i remove this and go here i can actually see the image show up because we set this data type here the intellisense will know that we're looking at a monkey model here and it can help us with the intellisense and all the properties that are available inside of that monkey now we have this image and then next we have a label and because we're inside of a horizontal stack layout it will automatically know to place that image and the label next to each other so that's kind of like what we're expecting to see right and inside of this label we have a multi-binding now this is a more of a advanced thing where we can have multiple properties binding inside of the same text in the same label.text in this case a little bit more advanced go find the description and find the documentation link for this typically you would just have one binding like this and you would set the the image so in this case the url that's in here to the source of this image and in this case we're going to use the label.text we're using this multi binding which with a string format and we have zero and then this pipe sign and then one and then two bindings here so what's going to happen is it's going to get this name and location properties from the monkey right here so name and location and it's going to format this like zero at pipe one so what we expect to see is name pipe sign one location that's what we're going to see for all the monkeys so now we have this collection view item template set up and this item template is again going to be supplied for all the items in here so if i run this again on windows we get the windows app again and instead of getting the tostring for all of our monkeys what we will now see is actually the image for our monkey and the name and location voila with the way that we formatted it right so this is basically the basics of how to display data through a collection view in your don and maui application now that wasn't too bad was it you actually learned how to use the collection view you know what data templates are you know what a little bit about what binding is what a multi-binding is actually multi-binding i think most of the xamarin forms people don't even know so you already learned a thing or two now from here we're going to expand on this um first we're going to look at some mvvm stuff so we get a more thorough understanding of data binding um i notify property changed all that kind of hard stuff so we're going to see that in the next video and from there we're going to build out this application to actually get the json file deserialize that show that in a collection view do all kinds of crazy stuff so make sure to stick around actually here is the next video for you where we're going to talk about mvvm here is the playlist for the full crash course and here is the button that you should click no matter what that's the subscribe button see you on the other side [Music]

Channel: Gerald Versluis

Views: 19,030

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, VS2022, dotnet 6, .NET MAUI display data, dotnet maui collectionview, maui datatemplate, .net maui collectionview, dotnet maui display data

Id: dlnNzjc7a60

Length: 15min 39sec (939 seconds)

Published: Mon May 16 2022