7. Basics of ListView and Data Binding in .Net Maui

we are going to start creating a contact list on the contacts page and what we are going to use is list view so in this video Let's Start Learning the basics of using list View so a few videos ago I mentioned that there can be only one view on the top level inside a page so in this case you can see that on the top level is the vertical stack layout and everything is inside it we don't need the buttons we don't need the labels we will talk about the layout later today we are going to use list view so we can say list review and if we run it you can see that there's there's nothing on the screen but listview has background so we turn on the background like we could background some color for example Quran color equals blue we can see that everything become blue right that means that list view occupies the whole page you need to know that list view is it's not like there's when there's nothing in the list it's not occupying the whole brain I need to know that it always occupies the whole screen and uh I like to give it a transparent background because in different devices for example another device is a different type of operating systems like Android or iOS the backgrounds color sometimes is slightly different so to make it consistent just make it transparent also that you need to know that list View it automatically has the the scroll functionality so later when you know that there's some such a thing that called scroll view right so you can actually see a scroll view is a layout scroll View is a type of layout of course there can be only one root view in here so scroll View and list view the kind of uh calculating with each other you can only have one top level so if you put list view inside a scroll wheel it's going to work but but it doesn't make sense because list view itself already has the functionality of what's growing if you add another scroll scrolling functionality on top of it it's going to affect each other so when you have a list view don't add scroll view if you go to definition the scroll view is a type of layout right so we don't need scroll view I just want to mention that when you have a list View don't add scroll View okay so we have a scroll view but there's nothing in it the first thing we need to do is to make scroll view display something so when we come to the code behind we can see that we still have the event handlers but we don't have the buttons anymore so we can delete the event handlers so now in order to show something in the list View okay we need to have an array of something to display right so let's say we have a list uh a list of strings and there's strings we call it uh let's say contacts right and then we are going to have this and what's going to be inside it is just a list of strings and let's say there's this child and dough and so we have these names and then we will need to provide this data to the list so how do we do that we need to first of all have a name so that at the code behind we can have a reference reference the list View so we have list contacts and then we can say item source item Source the type of item source is I enumerable so we can put contacts over here and now let's run the application and see whether there are any changes now you can see that we have these contacts nicely displayed in the list View so this is a very very basic data binding uh when I display this list view in here you can see there's separators right they're separators and if you click on it right basically when an item is selected there's a default color highlighting which item you selected so if we go over here and let's format it a nicely different properties in here more attributes and then there's a there's a separator right they're separated color uh they're separator visibility if you don't like it you can turn it off okay if you want to change the color for example I want to change it to let's say agua just for demonstration purpose I don't like the the color but you see the color has changed right and if you don't like the separator at all then you can use visibility uh you can set it to none and then coming over here you can see that there's no separator anymore I do like the default one which is showing the separator but maybe we can change it to Silver all right change it to Silver and then uh the color becomes silver which is very similar to the default the next thing I want to show you is to actually bind it to a class right we can't always have data in a stream because contacts has like names phone numbers maybe emails maybe addresses so it's better to use a class to do that so let's stop debugging and let's create a contact class over here uh later we're gonna separate that kind of class in the different class Library which is the correct way to do things when you go to a company you will never see people have the class defined in in the same file right there are two different classes in the different seminal sometimes it happens but most most of the time you have your core objects right so core classes the business core classes in a different class Library which we're going to do later we're going to follow the clean architecture or the clean code approach right for now for demonstration purpose I'm going to have a class over here which is going to be called Contact right and then we are going to have just some simple properties for example maybe you will have a name maybe maybe email instead of a list of strings we are going to have a list of contexts list of contact over here change to contact and then we're going to initialize uh this contact so I have a list of contacts and now I don't have to change this and let's let's run it and see what's going to happen okay so let's build it and run it again all right so we have something displayed but this time unfortunately these people are not being displayed but class names are being displayed right the class names along with namespaces being displayed why is that so the default behavior of assigning a list to the item source is that the list view will take each one of these object and run at two strings when you run a two string whatever it gets it will be displayed right so for example if I set a breakpoint over here right and then I'm gonna stop it and run it again and let's trigger the breakpoint and you will see what I mean okay so we have this contacts so let's actually uh do a quick watch and then if I do like take the first one which is zero in the index we can see that we have the first one which is strong though and then if I do a two string let's see what is the value you can see that the value is exactly the one that is being displayed in that list right so this is what I mean when you just bind when you just assign the context to the item Source it's going to take each one of those contacts and run a two string it's going to just display that the result of two string inside the list so in this case it's just the namespace plus the class name so that's not really what we want right of course to fix this problem you can come over here and override the two string method so that you can display whatever you want but that's not really the proper way to do it in Dynamite mode correct way to do it is to use data binding which means that we assign this the item source that is actually okay but we need to tell the list view what to display and how to display it and the way to do that is to go to the front end in the demo file and then over here we need to give it a template right so because we are trying to tell a list view exactly how to display the item so we need to specify that in in the template and we can use we can say list view dot item template okay this item template because each item in the list is the item right that's why it's called item template and then we have data template so the data template is basically just just the item template and inside it we can have a different type of cells we can have view cell which is the most flexible approach uh there's uh there's this image cell right and there's the basic one is taxa so we can try to use textile for now the tax of that is the one that I want to show for now so what is the tax of that we can see binding okay finding and name right so basically with the cardi braces we are just saying that we are targeting a object right so if you have worked with JavaScript before a credit Breeze it refers to a object so what is the object we're referring to it is the one that is is being bound to the item so what is being bound to the item you can see that we have context that's the item source so of course each item is a one of these contact right so this without specifying The Source by default it refers to the contact object right which is bound to the item to the item we're specifying an item template of course this is referring to the object that is bound to the item which is a contact so that's why in here this binding just means that we are referring to the object that is being bound to the item and then here we're just saying what is the pass we can say pass equals to the property of that object which is name we can see that you won't get any intelligence over here it doesn't really know it's just a string okay this this is just a string so it doesn't really know about uh you you just have to type it directly so so here the past is a default property of The Binding class and you can just put name directly over here because of the default property so you can omit the pass so you can put name of here it just tells that night Maui that we are trying to display the name property of the contact class right the context object so what's this change if we run the application [Music] now you can see that the names are being displayed again right another property of the text cell is called detail so I'm going to show you what it is now this detail is also string but again you can use binding okay so we're binding to the property another property of the context class and of course the only other property we have is the email so we can use email now let's see what it looks like let me come over here you can see that we have the names and then the detail at the bottom the names are highlighted it's pretty nice but if you think that everything is kind of squeezed together so it can change the the height of the row right or the heightened item but it's called row height so for example if we say 100 and then let's take a look at what it looks like each one of those pretty tall so maybe change that to 80. and that looks much better uh it's still too much maybe 70 yeah 70 looks much better say let's say 65. okay so now it looks much better so these are all the things I want to cover for today we basically cover some basics of a list view right how to data bind to it how to adjust the appearance and in the next few videos we are going to use list view for our Connex application I'll see you in the next one

Channel: Frank Liu

Views: 10,969

Keywords:

Id: WPV7Qc0p4h0

Length: 14min 48sec (888 seconds)

Published: Mon Jan 02 2023