Make Your Data Look Pretty with DataTemplates in Xamarin.Forms

in this video we are going to learn how to make your collections of data prettier than ever we are going to look at data templates so you can use your data templates in list views collection views um carousel views basically all controls and xamarin forms that will allow you to show collections of data there is an important note about the list view and data templates so make sure you watch the video all the way through the end to catch it all but let's just dive in and see how we can do all of this so for this demo it's a little bit different than usual i have still taken the file new xamarin forms application but this time i've already prepared a little bit of code so as you can see i've removed all the labels here that are normally here whenever you start a new application from visual studio for mac 2019 or visual studio 2019 on windows and i've put in a collection view which already binds to a monkey's object as an item source so we are going to show a list of monkeys i'll show you in a little bit and actually if we go to the code behind for this page then you can see i've implemented some stuff here as well i already have in place a observable collection for monkeys so that is where our monkeys are collected and this will serve as the item source for our collection view so this is basically the data backing store for our collection view this goes into a little bit of like the data binding stuff if you're interested in more of that or you're struggling with that please let me know in the comments and i will create a video more specifically to that to whatever your situation is i've already also created a http client right here that i'm going to use and in the main page i'm setting the binding context to this which means that's for this full page it will look for like you know you could see here in our example it was just saying binding monkeys so that means for this whole page the binding context is the code behind for this and um it's referencing now this monkey so setting the binding context to this page to this object set it to the main page right here enables me to just say binding and then the property name so in this case monkeys and it will automatically know where to look for in the binding context what to bind to again this is all has to do with data binding so if this is something that you have difficulties with then please let me know and i will make videos specifically for that in the unappearing of this page i've implemented a little bit of code if there are no monkeys in our collection yet then i will use that http client and go to a monkeys collection that has been made available by james montemagno uh you probably know him if you've been looking at xamarin stuff and he's put up this static json file with a couple of monkeys that you can use for like these demo projects he's using them for all his demo projects so that is pretty cool actually if i copy this and i go to a browser window right here and i paste it in there you can see it redirects to a github repository and i will zoom that in for you a little bit here we go and you can see it just outputs a bit of json data and it will give you uh different kinds of monkeys with a latitude and longitude of where they uh live and the name and the location some details and an image so we're going to use the name of the image for now um but um you know you can do some fun stuff with if this if you're trying out some api stuff in xamarin form so that is pretty cool now if you go back to the code right here it will get that static json as a string uh convert that through the json convert deserialize that into a list of monkeys and then we loop through it and add the monkeys to our observable collection we have to do that because that's the way the observable collection works and then it will show up in our app so let's quickly see if we run this code what will happen on the right you can see the ios simulator so i'm just pressing the play button and it will start a debug session on my ios simulator right here and you can see welcome to xamarin forms let's just actually fix that title right now so this is going to be data templates sample here we go save that and with hot reload boom you can see it automatically updates but the more interesting thing is in our collection view because you can see it got some data but it's all this type of monkey and actually i didn't show you this but i also created a monkey class to accommodate for all that json that we just saw which is right here which has the same properties the name the location details etc etc but here on the right in our collection view you can see it just calls the tostring so and the tostring the default information of the tostring is it will show the namespace and the the name of the object that is put in here so this is not the thing we want to see in a collection view right and this is where data templates come in here is where we are going to make our data look pretty so the easiest thing we could do right now is to stop running this here and then go into our monkey object and say override to string and instead of just returning the two string of the object we're going to say return name so it returns the name of the monkey and then when we run this we will see the same thing but now instead of outputting like the namespace dot object name it will actually output the name of the monkey so you know at least we've won a little bit of something we've now been able to show the actual name of the monkey but this still doesn't look very pretty um so this this is more functional but it's not very pretty so what we're going to do is we're going to stop this again and i'm going to remove this to string because you know it's not going to serve any purpose and let's go back to our main page example actually right here and in our collection view i'm going to say okay i want to have a collection view dot item template that's the the property where our data templates can be defined i'm going to define this data template here in line but you can also do that in the embedded resources or you can even store them anywhere else i will show you in another video how to do that it should pop up on your screen right now if you want to use those resources for that but like i said i'm going to put it here in the inline in this property directly inside of an item template we can have this data template right here and inside of this template we can basically do anything so what i can do right now is say i want to do a stack layout so that just stacks the different elements inside of it horizontally or vertically let's do it actually horizontally so we're going to do this and i'm going to do an image right here and i'm going to say the source of this image is going to be the binding and that is going to be a little bit funny i also have a video on that so that should pop on your screen right now uh but the scope for this template has changed so remember when i said the binding context is for this whole page whenever we now get into this templates the binding context will change its scope and suddenly within this data template the scope of this template will be one monkey so not the the full page for this but it will be just one thing one monkey object in this or whatever you bind to this of course so suddenly we have access here to the um properties that are in a monkey so for our image we are going to our monkey object and we are going to see well it's called image so let's just take this one and we're going to say binding image and that should be that and then to also show the name let's put in a label here and set the text to that same binding thing and we're going to say name because that is also going to be a property of our monkey oops i need to close this label here so this is going to be like another this is this property from the monkey so the scope again of this template is going to be this this monkey thing simply because we set the item source to this thing and then each item within the collection of this source is going to be represented by one instance of this template so that is how that works whenever we run this then we should already see an image and the name popping up horizontal from each other because of the stack layout and basically that is how you use data templates in like the very simplest form this of course doesn't really look like a nice design so it's up to you to make it actually pretty but this should give you like all the tools you need to work with data templates now one important last note data templates are available in collection view carousel view basically all the controls that work with like collections of data so also the list view now the list view is something that is kind of recommended against using right now so you should shift to the collection view but if you still want or need to use a list view then be aware that the data template in a list view should have a root of a cell so either a text cell or you know a view cell maybe which is like the more generic one that you can put your own layout inside of that if you don't do that you will notice automatically because it will throw an exception and it will not work but other than that i think for all the other controls you can just get that data template and start directly with your layout inside of that and just like that we've created a rich representation of this data items we are seeing lovely monkeys all across the board with their name of course we can put the description in there i leave it up to you to put in there everything that you want of course take different bits of data you're probably not going to build an app that's going to show monkeys although they are pretty cool um but you probably have another use case for that so there has been some data binding in here if that is something that you want to see more about if you want to learn if you're starting out with xamarin forms please let me know in the comments also if you have any other topics of course if you want me to prioritize your topics look at the memberships because there is a tier that allows you to influence the topics of my videos other than that i can only say please like this video if you like this channel and multiple videos please just subscribe and ding that bell to be notified of new videos coming in automatically and i'll be seeing you for my next video

Channel: Gerald Versluis

Views: 2,663

Keywords: xamarin, xamarin.forms, xamarin forms, xamarin forms collectionview, xamarin collectionview, Xamarin Forms CollectionView ItemTemplate, Xamarin Forms CollectionView DataTemplate, Xamarin ItemTemplate, Xamarin DataTemplate, xamarin forms collectionview itemssource, collection view xamarin forms, Xamarin Forms 101, Xamarin 101, xamarin forms tutorial, xamarin forms data binding, xamarin.forms tutorial, xamarin tutorial, DataTemplates in Xamarin.Forms

Id: O0Ym-x8joqg

Length: 10min 52sec (652 seconds)

Published: Thu Dec 10 2020