Learn Xamarin Forms & MVVM in 2 Hours

hey how's it going everyone so this video is going to be really awesome because i'm going to be walking you through the entire introduction into something called xamarin forms so xamarin forms is a product that's created by windows and it's actually used to create cross-platform mobile apps basically what that means is that we're gonna write code to build a mobile app and it'll be able to run on both ios and android we're gonna do all this using something called xamarin forms so xamarin form is a really popular framework there's a lot of developers a lot of companies that are using it and so my goal in this video is just to kind of bring you guys some content on that i'm going to walk you through all the basic concepts and we'll actually end up building this little to do app which should give me a chance to kind of walk through all the main parts of xamarin forms but with that out of the way let's get into these xamarin forms so you're not going to need any experience building mobile apps in order to get into this although you will need a little bit of knowledge with just computer programming in general more specifically we're going to be using the c sharp programming language and this is one of the most popular programming languages in the world and if you've never used it i actually do have a full like introductory course on c sharp over on my channel and i can put a link to that in the description so if you want to kind of brush up on that a bit i do have some content available there but i'm just gonna kind of assume that you have a basic understanding of c sharp and a basic understanding of some of these like core programming topics as we go through here now this isn't going to be like extremely c-sharp heavy you'll you'll see that a lot of this we're just kind of like building out user interfaces and like writing little pieces of code here and there so i think if you're more at a beginner level you'll definitely be able to follow along with this but just if you want some more information on c-sharp that is available as well otherwise though there's really no prerequisites you can do this on a windows you can do this on a mac i will show you how to get set up on both and then we'll just kind of be able to follow along throughout the video so as far as the order that we're going to cover things in today obviously this is just a little intro and then i'm going to show you how to install and set everything up on your computer so you're going to need two things we're going to need this program called visual studio and then we're also going to need you to get you set up with a device emulator so we're going to be doing all of our development on like an android device emulator and i'll show you how to get that set up but otherwise though you should just be able to follow along like straight with me as i go through and code all this stuff i'm going to teach you the core concepts of xamarin forms we'll also talk about a really powerful design pattern that's used in xamarin forms and then we'll end up like i said building this little to-do list app which should be pretty fun so this will just be a full introduction you'll learn all the core concepts uh without further ado let's go ahead and we'll get you set up on windows or mac and then we'll just get straight into learning xamarin forms okay so the first thing that we need to do in order to get started here on a mac is we need to download and install visual studio so visual studio is a text editor which it's sort of like an all-encompassing integrated development environment ide is what we call it and this will allow us to build these apps really easily so it'll have like device emulators it'll have all sorts of build and debug tools just a really good environment to do all this stuff in so you want to head over to visual studio.microsoft if you just google visual studio this will pop up and then down here we want visual studio for mac so you're just going to click on that and then that should download you're going to get a dmg file so you can just open that up and then uh what this will do is it'll open up like an installer which we can use to run through so visual studio it's a big application like i was saying there's a lot of things and we can choose like what types of things we want to download so really what we want to do is step through and we just want to download all the stuff for xamarin forms for building mobile apps okay now it might take a little while for this stuff to download like there's probably around like four or five gigs worth of stuff that we need to download just because it is such a beast of a program but yeah probably shouldn't take more than like 10 or 15 minutes depending on your internet speed okay so let's open this and we'll step through it okay let's continue and okay so here now we can select all the different things that we want so it's probably a good idea if you just want to select all of these but really what we need is the android and the ios so all this like xamarin stuff there and then also.net core as well now i already have all this installed but you'll go ahead and install all of this and then once you're done it's going to open up visual studio so this window right here should pop up so this is our visual studio window like i said it shouldn't take more than like 10 or 15 minutes and what we want to do is create a new project so i'll just click new here and then down here we want to go to this multi-platform section we're going to go to app and then you're going to click blank forms app now you want to make sure that you have c sharp selected c sharp is the language that we're going to be writing all of this in and then you're just going to click next and now the app name so we're going to call this uh to-do list app because that's what we're going to be building we're going to be building this little to-do list so you're going to hit next and if you want to change like where it's located that's fine by default just in the users folder and then if you want git for version control if you know how git works i'm not going to be explaining that in this video but if you want to use it you can check that and then let's create it so what this is going to do now is this will open up our little text editor here and this is the environment that we're going to be working in now in order for us to be able to run and test all of our code we're going to need something called a device emulator and a device emulator is a little program which sort of emulates an actual mobile device now you can run this stuff on your you know physical mobile device if you want i'm not going to be covering that in this video but generally when people are developing this stuff they'll use a device emulator it's definitely not the best as far as like memory usage so like your computer might start the fans might start going and stuff it's going to be using a lot of memory but that's just kind of the nature of mobile app development so what you want to do is come up here to tools and then you're going to go to android device manager so we're going to be using an android device you you can do this on an iphone as well i'm going gonna be doing everything on an android just because android comes with this stuff by default also when you're on windows sometimes it's like a lot harder to emulate this stuff on ios so then you just wanna click on new device and i'm gonna be using a pixel 2 with pi 9.0 so pixel 2 and then pi which is uh version 9 of the api basically this is just like what version of android are are you going to be supporting with this and this is fine so then you're just going to create that and then that should it might take like 10 minutes i think it's about a gigabyte in size and then you'll have your little emulator here so what you want to do is you just want to hit play and then this will load up the emulator now if you've never used an emulator before they're actually kind of fun so you you get you know basically like a little version of a phone here and you can kind of play around with it which is which is cool but what we're going to be doing is running our app on it so this should automatically populate in here like it should pick up that this is a virtual device and down here in this to-do list app this is actually where our entire app is in so this is where we're going to be working in this to-do list app folder so if you just click this play button now there's going to be a bunch of like debugging stuff that comes up down here this is essentially going to take the app build it bundle it and then ship it over so it'll actually end up being installed on this phone and then we can like test it and interact with it and do all that kind of fun stuff so yeah it might take a couple seconds especially if you just downloaded the emulator but we'll deploy this to the device and then kind of a default screen should pop up over there and so really this is going to be our workflow as we go through for the rest of the tutorial and this is a good way of setting it up so we'll have our device thing over here on the side and then over here we're going to be writing our code now most of the coding we're going to be doing is going to be in this main page.xaml file so this is you can just kind of double click on this and this is where we're going to be doing most of our coding so this is kind of where all the content for this app is going to be and just real quick just to make sure that this is working you can actually change the text in one of these and then save the file and then it'll update over there and we'll talk more about that in a second but otherwise that's how you can get set up on here and then for the rest of the tutorial we will be kind of working in this environment and then just a quick note about some of these files over here so that you'll see that there's like three folders so there's this ios folder there's this android folder and then there's just the to-do list app folder this is where we're going to be doing 99 of the coding we will look at like some places where we can use android and ios but this is basically it okay so you have this like app.xaml file and this mainpage.xaml we'll talk more about xaml and what all that stuff is uh later but now you're set up you're ready to go and we can move on with the tutorial all right so in this section i want to show you how to get installed and set up with visual studio on windows so visual studio is the program that we're going to be developing these xamarin forms apps in so in order to download it you're just going to go to visualstudio.microsoft.com and then down here we're going to scroll down and you'll see here that there's this section for visual studio so download visual studio you're going to go ahead and download the community 2019 edition this is a free edition uh and this is like a you know it'll have everything that we need in order to do all the xamarin form stuff so let's open this up and now one thing i will say is visual studio is a beast of a program so it might take 10 or 15 minutes for you to download and install everything there's going to be like tons of stuff that needs to get installed and all that so i'm going to go ahead and just run this installer now when we get in here we're going to need to explicitly tell visual studio that we want to get all this stuff for like mobile app development so wait until this is done and then i'll go ahead and show you how to do that so you'll see here that there's this little dialog that pops up and what we want to do is we want to download everything for mobile development so if you scroll down you'll see here it says mobiledevelopmentwith.net build cross-platform apps for ios android and windows using xamarin just click on that so this is what we're gonna need and then down here there should be a button to install that so you wanna install all that stuff now i already have it on my computer so i don't need to go through that process but once you've installed all this stuff with net then visual studio is going to open so let me open that up here okay so we'll open up visual studio now this is what's going to pop up when you're done installing everything and what we're going to do is we're just going to create a our first project and i'm also going to get you guys set up with a emulator okay so we're just going to say not now now i'm going to do i guess the dark theme you can pick whichever one you want and we'll start visual studio okay so then this dialog will pop up and we're going to create a new project so just come over here and click create new project okay so we're just going to scroll down and we want to find the right type of app now we're going to be building a mobile app using xamarin forms so you're just going to click on this right here now don't click on android or there's another one for ios click on mobile app xamarin.forms because this is going to target both platforms so we're going to click next and we're going to call this to-do list app and you can change like where you want that to be stored and then we'll go ahead and create it so then if it asks you for like a template we're just going to do the blank template so we'll kind of start from scratch with this whole thing okay so now over here we're in the visual studio like user interface now this is i'm gonna be filming this video on a mac um but i did wanna show everyone who's using windows how to install this so when i'm filming the video it's gonna look a little bit different from this but it's it's basically all the same stuff so let me show you kind of how to get all this set up now the first thing that we need to do is we need to go up and we need to install an emulator so an emulator is a program that allows us to basically emulate a real device on our computer so you're gonna come up here to tools and then go down to android and you're gonna you're gonna go to android device manager so i'm gonna just hit yes on this and this is gonna allow us to like configure and create an emulator so you can see i already have one created but what you want to do is come over here to new and you're going to click create new device now i'm going to be using a pixel 2 that's going to have this os of pi 9.0 so this is kind of just like the version of android that it's going to run and then we're going to just create that now i already have it created so that's just over here and then what you want to do is you just want to start it now you might get this little message about hyper-v not being configured if you just click on this documentation link you can go ahead and set that up but it's not like super necessary although it will definitely make it a little bit faster so we're going to go ahead and run that emulator and you can see that this kind of pops up here so if you've never used an emulator before they're actually they can be really fun to use so this is just like an android device that is sort of emulated over here and i'm going to be using android you can also i'm pretty sure you can use ios as well on windows but i'm just going to be using this android one okay so once you have your emulator open then all you want to do is come over here and you'll see that there's this little start button so this is how you're actually going to run the code so if you just click on this what that'll do then is it'll start building all the code for your project and then it'll actually put it over onto your emulated device so then we can pull that back up you can see it says like phone is starting all that stuff and then this will eventually like load up onto there okay so here we are in visual studio and i just have this main page.xaml opened up and the first thing that i really want to do in this tutorial now that we've set everything up is just walk you through what this xaml we call it xaml what exactly this is and how it works now if you've ever used html before so html hypertext markup language this is going to look really familiar to you it's actually very similar so this is what we call an xml syntaxed language and xml is basically a syntax that we can use to layout user interfaces and it's used really really often in the industry and so xaml which is xaml this is what's used in these xamarin forms so this is how we're going to lay out all of the user interfaces for the most part for our app now you can see here that we have just kind of this basic structure set up and this was just given to us by default when we created the app but there's really like sort of the main feature of this are these tags so you can see here when i highlight over this it highlights these two tags now in this like xml and this xaml syntax everything is contained and everything is rendered out inside of these tags so the tag just has like a less than sign and then here this is called stack layout so this tag has a name and then you have the greater than sign to kind of end it off there's two main types of tags that we're going to be working with there's container tags and then there's self closing tags so the container tags are like this stack layout you can see there's a starting tag and then there's an ending tag and then inside we're gonna put all of these other tags there's also what we call self-closing tags and these and let me see if i can find one for example like these labels down here they're self-closing so you can see that it's not there's not two tags there's just one and we end these off with that forward slash so with the containers you just have it like this and then to end it off you put that forward slash with the self-closing ones though they just look like that now we're going to be using different container tags most of the time are going to be used for formatting and for styling and then we'll use things like labels we'll also have like a check box and like a search field and all of that which are going to be self-closing so you'll get more comfortable with this syntax if you're not already comfortable with it as we go through the tutorial cool so the first thing then that i want to do is just show you how we can update this xaml so over here if i was to for example go into this label and this label is basically just like a piece of text you can see we have one down here we also have one up here i could modify this so for example we have this what we call a text attribute if i changed what was here inside of these quotation marks to like hello world all i have to do is save this and it should automatically update over here on the app so you can see there that it updated over there so any time that you change things here in this xaml file it will automatically update whenever you save the file onto the app now let's take a look at this label tag real quick because i want to point out what these things are right here so we talked about how each one of these tags has a name in this case this tag is called label this is the label tag that's how we would refer to it these tags also have attributes though and these attributes are essentially like pieces of data that we can give to each one of these tags that lets it know how to do its job so the label has one of these text attributes you can say it says hello world here and this is just going to be in a string and then there's also some of these attributes that we can use to style these things so it says like horizontal text alignment you can see that center i could change this over here if i wanted to and actually if you're using visual studio it should give you options so like you see here i just have the equal sign and then if i start typing in the quotation mark it'll give me all these options so we could put start here and then we'll end that off and now if i saved it should be over there on to the left so there's all of these different tags that we can work with some of them for styling some of them which specify like for example the text we're going to look at a lot of these as we go through the tutorial you could also change the font size if you want to see all of the attributes that are available once again this text editor is really good so if you just hit space then this little window should pop up and these are all the different attributes that we can give this so for example here's one that says is visible if i was to add this in i could say false and if i say is visible is false now you'll see that it disappears so you can play around with some of these different attributes we're going to look at a lot of these throughout the tutorial but if you want you can just kind of you know play play around and see what's going on okay so that's a little introduction into xaml this is the environment that we're going to be working with or that we're going to be working in a lot what i'm going to do is i'm going to actually just remove some of this and i want to start introducing some core concepts for xamarin forms specifically i want to talk about how this xaml file gets connected to our c-sharp files so you'll see over here on my little file explorer i have this main page.xaml file and then i also have mainpage.xaml.cs so dot cs it stands for c sharp this is all c-sharp code and this was just generated by the app when we initially created it and these two files so the xaml file and then also the c-sharp file we can actually connect these so we can use them together all of the user interface for the app is going to be here in the xaml file and all of the logic for the app like basically anything that we want to have that's coded or have that has logic is going to be in the c sharp file and you'll see like as we go through this tutorial how i'm going to be jumping in between the xaml file and in between some different c sharp files and how those get combined together but i just want to show you some really basic things that we can do just to kind of get your brain working and show you how these two things are connected so one of these attributes that we can create is called a button and if you want to see all the different apps or sorry not attributes one of the tags that we can create is called a button and if you want to see all the different tags that you can create you can just type in that less than sign and then once again this window should pop up so there's all of these different tags or elements that we can add here into the xaml the one that i want though is going to be a button so a button is just you know a user interface button you can click on it and we can respond to that this is going to be a self-closing tag and the button is going to take a text attribute so in here we could just say you know maybe it's called click me just like that and you should see that that button will show up over here now i want to show you how we can combine the xaml and the c-sharp so what i want to do is i actually want to run some code whenever this button is clicked in other words i want to respond to the user performing the click action here on the button so there is another property and once again you can see all the attributes or properties that we can add onto here but one of them is called clicked and clicked is a property that's going to take an event handler so there's when we have these different user interface elements for example like this button over here some of these have events that are attached to them so in the case of the button one of the events that can be performed with the button is when the user clicks on it right we want to be able to respond to the user performing that click event so you can see over here if you just say clicked and then inside of this open and closed quotation marks we can actually put the name of a function or a class method so in here i'm going to put handle click so i'm going to put this name handle click in here i'm going to save this file and then i'm going to head over to my c sharp file now inside of this c sharp file down here i'm just going to say public void and i'm actually going to create a method which is going to get called whenever that button gets clicked and we're going to call this handle click so the name of this method needs to match the name that you put over here and by default xamarin forms is gonna connect these two files automatically so you don't have to worry about uh doing that and you can see up here it says uh like this class attribute which is on this content page this is specifying like which c sharp file this is connected to so in this case it's the mainpage.cs file which is this one so we're going to create this handleclick method and it's going to look just like this and this is going to take two arguments so the first is going to be an object called sender and then the second is going to be an event argument which is just called args now you don't really need to worry about these too much we will talk a little bit more about some of these arguments but for now you just need to know that you need to have these parameters specified in here because that's sort of the signature that that xamarin forms is expecting so down here why don't we do a console log so i'll say console.write and we can do a writeline and then in here i'm just going to say clicked so this should hopefully demonstrate how we can wire up the xaml with the c-sharp so now what i want to do is i want to actually restart the app so anytime that you change the xaml code anytime you change the xaml code you can just save it and then it'll automatically update but anytime that you change this uh cs code this c sharp code you have to restart the app so i'm just going to hit this stop button and then we'll hit the play button again it's this should only take a couple seconds it's a little bit inconvenient but it should be fun and so now this is going to load up and if we click the button we should be able to see the output down here in this terminal so down here in the application output this is where any of our console.write lines are going to show up and we'll use this to debug our app as we go through the tutorial so i'm going to click this button and you'll see down here that it says clicked so i can keep clicking the button it'll click it'll keep running this method and you can see now that these two things are connected so this is something that's really common to do in these xamarin forms apps which is just have some sort of a user interface element maybe it's a button maybe it's an input field whatever it is and we want to wire that up to our c sharp through an event handler so this event which is this clicked event is going to execute this handle click method which is defined over here in this class so that's kind of how it's all wired up together okay so buttons are really useful and this is like probably one of the simplest like user interface things that has an event but we're going to be building this to-do list app and so for our to-do list app we're going to want the user to be able to type into a search box right type into like an input field with the keyboard and then they'll be able to add their to-do's that way so i want to now show you how we could add in an input field now this is going to be another one of these elements and actually i'm going to get rid of this click handler as well so i'm just going to remove all the code that we just wrote and we are going to create what's called an entry field so you can just type in entry like that and the entry field can take a few different attributes the main one is going to be the text attribute so if you just say text like this this is actually going to be the text that shows up inside the entry so if i just said hello world and i saved this now you'll see over here that we have this little entry field and if i click on it like the the emulator is giving me this keyboard but i can go ahead and type into that and that's going to be sort of one of these user interface elements that we'll use for the to-do list okay so that's the text field now you can also have another one which is called placeholder and placeholder is going to show up whenever there's no text inside the text field so here i could say like enter a to do or something like that so if i save this now you'll see because there's no text inside of this input it just says enter to do and then if i was to start typing in here that goes away so the placeholder is really good because it just gives the user like an indication of what they should be doing okay so i'm actually going to format these and anytime you're working in this xaml code it's important to keep everything organized because this can get really disorganized and the more disorganized it is like the more likely you are to introduce bugs into your program so i really like formatting things like this i think it's really nice we have all these attributes which are down here and it's just like a nice way to kind of look at it okay so we have our entry now this is also going to have a couple of different events associated to it so remember with the buttons we talked about how we have that click event and we can respond to it in the c sharp code we can do the same thing with this entry so there is an event on here which is called text changed so you can type in like that and once again we're gonna add in an event handler so i can say handle text changed so this is gonna be the name of a method that we're gonna put in our c sharp code so over here in the c sharp code just like with the button let's create a public void and we're going to call this handle text change and i think i said yeah that's what it was called okay so then inside of these parentheses we're going to specify a couple parameters so once again the first one is going to be sender which is going to be an object and then the second one is going to be those event args again now we are using this entry field with this text changed property so actually there is a more specific data type that we can put here so if you just start typing in event args you can see there's all of these different types of arguments that we can get from these different elements so because i have an event that's getting spawned from an entry field instead of just having general event args here i can actually have text changed event args and when we have these text change event args it's going to give us access to the text that got changed so if i say over here console.writeline i can say args dot and you'll see that we have these different options so we can say args.new text value so we're going to actually console log this out so what's happening is we have our entry field anytime the text changes i'm going to call the handle text changed method which is defined over here in the to-do list or no sorry in the main page class and we're going to console.log the args.new text values let me show you how this works now once again we changed our c sharp code so i need to restart the app so i'm going to hit the stop button and then the play button and over here now if i type into my text box or into this entry field you'll see that the new text should show up down there in the console so i'm going to type in hello world and you can see that as i type that new text sort of shows up there so this entry field is really important and as we go through this tutorial we're going to be using this text change property in order to you know see when the user is typing and be able to sort of respond to that now there's another event here that we can also listen for which is when the user hits the enter key so this is called the completed event and we're going to call this one handle enter press so the completed event once again the user hits that enter key or the user is just like you know done typing into the into the entry field and then this will get executed so this handle enter press so let's go back over here into our c sharp and i can actually just copy this whole thing and this one's going to be called handle enter press now we don't have like a specific event for this one so we're just going to this is just going to be event args and then over here i can type out enter pressed so we have this new event handler called handle enterpress whenever the user hits enter right whenever they're com you know when they're done typing into the entry field then we'll go ahead and console log out enter pressed so once again we change the c so let's restart our app and then we'll see if this works now with these different tags here like there are a lot of these different attributes like i said some of them are like have functionality associated to them like completed and text changed some of them are just for styling like placeholder there's also some other ones like you can add padding and margins and stuff that's all stuff that you can sort of play with and and you know just kind of do on your own but in this case we're just using this completed one so i'm going to type into this field and then i'm going to hit enter and you'll see down here that it said enter press and also like that keyboard went away so these are the two events that we're interested in with this entry field we are interested in responding to whenever the text changes and then responding to whenever the user has sort of completed typing into this text field now what i want to do now is sort of show you how we can take the text that's from this search bar and then we can actually use it to create different elements here on the app so here on the page so this is going to be kind of like a really really rudimentary version of our to-do list app so the first thing that i'm going to do is i'm going to come down here and i'm actually going to create another set of tags now this is going to be one of those container tags which is called a stack layout now the stack layout is what we're using up here and the stack layout basically just allows you to lay out elements one on top of the other so in a stack and this is going to be perfect for our to-do list because we want to lay out the elements one after another so i'm going to go ahead and give this an attribute which is called a name and all you have to do to give this attribute a name is you can say x colon name and then over here i'm going to make an open and close quotation marks and we're going to like give this a name and this is going to be like a unique identifier that we can use to refer to this so i'm going to call this to-do list because this is going to kind of be like the container for all of our to-do's now check this out if i come over here into my code i can actually access that so i'm just going to do this in in this handle enterpress method but i could say to-do list and you'll see that my text editor is saying that this is a stack layout and maybe i can get that back so it's a stack layout on the main page of the to-do list so this to-do list right here this is actually referring to this stack layout over there because i gave it this name attribute i'm now able to easily refer to it in my c-sharp code so what i want to do is whenever the user hits the enter key i want to take whatever text they entered into that text box and i basically want to create a new little user interface element here on the app that has that text in it and this is going to be very similar to what we're going to end up doing when we create our like final to-do list so i just want to kind of show you how this works so whenever the user presses the enter key i want to take the text that's inside of the text box like i said and i want to then display that below onto the screen now in order to do that we're going to hack we're going to actually dynamically create a user interface element so we're going to dynamically create one of these labels now remember before that we looked at that label element so i can call this label and the label takes a text property so if i set in here like my name mike dain then this is going to show up down here and it's a little small so there are some other attributes like you can say font size so we can make this like 36 or let's not do 36 maybe like 20. we'll just increase it a little bit that way we can see it and there's also some other kind of like default things in here so we could also say instead of 20 you could say like large and then that will show up there as well so it's kind of the same thing just whatever you you kind of want to do so what i want to do is whenever the user types into the search bar and then hits enter i want to create one of these labels and i want to add it down here onto the page so essentially i want to take a label and i want to put it here inside of this stack layout so you know i could have like four or five of these and this would kind of replicate what it would be like to have a to-do list so they'd all kind of be sort of rendered out there one on top of the other so i'm going to show you how we can do this dynamically from our c sharp code right if i want to create a label here in my xaml file all i have to do is just write it out like this but if i want to do this in response to the user hitting the enter key i have to do it in my c sharp code so let's go over here and whenever the user hits the enter key i want to create one of these labels so i'm going to say label and we'll call it uh why don't we call this new to do and i'm going to set it equal to a new label now this label here this refers to that label that we looked at over here in this xaml file so that's exactly the same as this thing over here okay those are like basically connected it's the same stuff so then what i can do is i can say new to do dot text so here i'm essentially like adding in that text property but i'm doing it in my c sharp code and i want to set the text of this new label equal to the text that's here inside of this entry field now the question becomes and i'm actually going to get rid of this real quick because i want to show you how do we get the text that's inside of this entry field when we did the handle text change we were able to say args.new text value when we're down here though we're not able to do that so what i want to do is i want to essentially do the same thing that i did with this stack layout which is i want to give it a name so over here on the entry field i'm going to give it a name and i'm going to say x name and let's call this input field so this is going to be the input field property right this now has a name of input field and if i come down here i could actually console.writeline and now i can refer to this entry field by the name input field so over here i'm going to say console.log input field dot text so if i console.log out the inputfield.txt it will essentially tell me whatever text is inside of the input field when i hit that enter key so let's come back over here and we changed our c sharp code so we're actually going to need to restart the app that's fine and then the user is going to type into the entry field they'll hit enter and then we'll access that input fields text property and we'll print it out onto the screen so i'm going to type in over here hello world and now i'm going to hit enter and you'll see here that it says enter pressed and then it printed out the value that was here inside of this search field which was hello world so that's how we're able to get the text now what i want to do is i want to set that equal to the new to do's text so remember the new to do this is like going to be one of those labels and we want to set the text of it equal to the input field's text so now check this out if i save this and i restart my app because we modified our c sharp code so i'll save this now let's come over here to the search bar and i'm going to start typing in so let's type in hello world so now when i hit the enter key the handle enterpress method is going to be fired okay we're going to do this console log we're going to create a new label and then we're going to set that label's text equal to the text that was in the input field and actually i forgot one last step which is we want to add this label over here into our stack layout and i'm going to show you how to do that so we've created this new label we've set the text field now i want to add this in to this stack layout and i'm going to do all of that in our c-sharp so down here once again we can refer to this by the name to-do list so let's come back over here and i'm going to say to-do list and there's an attribute on here which is called children so you can say to-do list.children and children that's just going to refer to like anything that's inside of here so anything that's like inside of this stack layout here so then we can say children dot add and this is going to allow us to add something onto the children so here we can add in the new to do okay so let's restart this one more time [Music] and we'll see how we did so let's type over here into the text field i'll type in hello world i'm going to hit enter and then this will then get added down here so you can see now that hello world is added down there onto the document now once again this is a little small so we could say like new to do dot font size and then we could set this equal to like 20. and so now it should be like a little bit bigger and actually maybe this just needs to be a number okay yeah cool so this whole process is very common to do in these xamarin form applications and really the whole idea is that we have a way to get information from the user right and once we get that information from the user then we can use that to create additional ui elements right so now i can type into here and as much as i type in you can see that all these new things get added in right so we can type in whatever we want and then they're just sort of showing up down there and all that is just through this code right here now the last thing i want to show you how to do is clear out this text so you can see here like if i hit enter then the text still stays up here so there's one last thing that we can do and we could say so what we want to do is we want to access that entry so we could say input field dot text and i'm going to set this equal to an empty string so this input field.text what this is going to do is it'll modify the text attribute on the input field and it'll clear it out so after we've created the new to do label right after we've created this new thing and we've set the font size and all that and then we've added it onto the to do list which is this thing right here then we're just gonna clear out the text that's in the input so let's go ahead and do that we'll just restart the app and you can see how that works okay so i'm going to type in here let's do hello world i'll hit enter and you'll see then that the text in here disappears which just has to do with this line of code down here cool so that is a little bit of an introduction into all of this stuff right we're just getting comfortable working in the xaml file we're getting comfortable working in the c-sharp file and one of the big things that we saw here is that even though we didn't explicitly put a label inside of here right even though i didn't explicitly like place something in here i'm able to do that in my c sharp code dynamically and that's really important this concept that we can use the c-sharp in order to dynamically add elements or tags here into our xaml file is like super important okay so with the xaml we basically set up like a little scaffold and then we can use the c-sharp to kind of inject data into there dynamically it's like super common thing to do in these situations so just with this we kind of have a little to-do list right you know you could use this to create something right so you could say like you know walk the dog right so now i'm sort of adding these different things take out the garbage whatever so it kind of works it's kind of basic obviously we're just adding text into a list but it should give you an idea of sort of how this is put together but now that we sort of understand the basics i want to talk about really how we would build this application as xamarin forms developers so this is a valid way to do this right you could build this to-do application using this strategy where we have these like event handlers and they're all tied into this xaml file but a lot of times when people build applications using xamarin forms they're not going to do it in exactly this way and it's just because when we do things this way it doesn't really scale very well this is a very simple application right we only have a couple different pieces of information that we're keeping track of there's only like we know we just have this input field and then some labels but as these applications get more complex a lot of times this method doesn't scale very well so what we want to do is we want to use what's called a design pattern and a design pattern is a way of structuring our code which makes it really scalable and makes it really easy to add functionality and to sort of maintain all of the state that's in our application and the main design pattern that we use in these xamarin forms is called model view view model and this is a pretty common way of structuring codes specifically and with apps that have user interfaces like this and so what i want to do is i want to walk you through some of like the core concepts of this and we'll start scaffolding out how we can build our app using model view view model so over here i just have this little i guess diagram of what this is and i just want to talk real quick about what the model view view model is so this is composed of three different parts we have a model we have a view and then we have a view model so in our to do application we're working with these different to-do list items and that is what's going to be defined over here in the model so the model sort of maps out what the actual object or the actual entity is that you're working with in your app in our case we have this to-do list app so we're working with these different to-do items and a to-do item has at least in this case two different properties so it has a text property which is a string and then it also has a complete property which is a boolean so this complete property what this is going to do is it's going to tell us whether or not that to do has been complete right we can sort of check it on or off so this is the model and it models the real world entity that we're working with in our app that's why we call it a model because it's sort of like a it just models that real thing right this to do and so this is just going to be the definition of what a to do item is then over here we have the view and the view is basically the xaml stuff so the view is everything that the user is seeing so in our case we have this little to-do list app and this is what the view is generally going to look like so we'll have all the to do's text sort of displayed out there we have our search bar and then we have this little check box now you can see that there is a mapping between the model and the view right so the model's text the to do items text is displayed over here in the view and then we also display whether or not it's complete so if you've checked this checkbox like if it's red that means it's complete otherwise if it's unchecked that means that it's incomplete and then we also have this little like you know trashcan which will help us to delete these okay so that's the model and the view and these two things are really important you can see that they're linked together right we want to display the data that's in the model on the view but the last step here is this middle part which is called the view model and it's not a coincidence that it's a combination of view and model right it's those two words together the view model is what sort of connects the view and the model together so that's why it's in the middle here it sort of connects the model which is this to do item over onto the view now in this case we have a to-do list so what we're what we're going to be displaying to the user is a list of to-do items and this view model is going to keep track of all of the different to-do items that are going to show up on the view and any time we add a to-do item to this to do items view model or we remove one or we toggle one it'll update the view it'll update the user interface so this view model we just call it to-do list view model and it has an array over here called to-do items and it's just has you know a bunch of these different to-do items in it and it also has some functionality so we can add a to-do item we can remove it to do item and we can toggle a to-do item so toggling would be like you know change it from complete to incomplete or vice versa so the view model is what connects the model over to the view right so we have this to do items array and this is what's going to end up getting displayed over here on the view and the idea is that any time this to do items array updates so whether we add an item we remove an item or we toggle an item it'll update the view to match that and we call this binding so there's this two-way binding that we have between the view model and the view and it basically means that any time we update the view model so anytime we update these this to do items array it'll update it on the user interface and then anytime that we update the view it'll update it over here on the view model etc right so there's this binding that takes place between these two entities in our program and that's what we're going to use in order to make our app really usable like really scalable and just so it's written kind of the correct way right the xamarin forms way so once again this is called a a design pattern and look if you're still a little shaky on like what all this is that's totally fine we're gonna go through this in explicit detail as i code it out but i just wanted to give you a quick introduction into how the model view view model we call this mvvm how that works okay so now what we need to do is we need to start implementing this and the first thing that we'll do is we'll create the model so like i said the model just maps out what a to do item looks like in our program so what we're going to do is we're going to come over here and you're just going to right click on the solution code here and you're going to come down to add and then you're going to say new class so we want to add an empty class and we're going to call this to do item so just create that class and you can see that visual studio just basically scaffolded this whole thing out for us now if we look at the model it needs a text attribute and it needs a complete attribute so we're going to add those attributes up here so i'm just going to say public and first we're gonna do the text so i'm just gonna call this to do text and then i'm gonna create a getter and a setter so this basically means that the user can access the to do text and that they can also modify that's all that this syntax means over here it's called a getter in the setter and then we're gonna create a boolean which is gonna be this complete and actually i have this here as a string this should be a boolean that's just that's my mistake so this is gonna be a boolean and we're gonna call this complete and once again this is going to have a getter and a setter so this will basically determine whether or not the to do has been completed or not okay so we have these two attributes now i also want to add these into the constructor so i'm going to say string to do text and bool complete now if you're not 100 sure what i'm doing right here this is just like c sharp like object oriented code in c sharp so if you're a little bit confused about that it might be worth going and you know maybe watching a couple other videos about how this stuff is structured and i have videos on all this stuff on my channel if you want to check that out i kind of go through all this in in detail but what we're going to do here is we're just going to allow the user to pass in the to-do text and the complete whenever they create one of these to do items and then we're going to say like this dot to do text is equal to to do text and this dot completes is equal to complete okay so that should actually do it for our to-do item model and so now we have an entity right we have an object in our code that we're able to use to sort of store and keep track of all these to do items now the next thing that we need to do is we want to create this view model and this is going to be something that we're going to be continually updating throughout the tutorial but we're just want to sort of scaffold this out and create like the most basic version of it so real quick let's just take a look here at the different things so we have this to do items list and then we also have three functions down here in order to modify that list so the first thing we'll do is just create this object or create this class with the to-do items so let's go back up here you're going to right-click on the solution and then you're going to say add new class and we're going to call this to-do list view model okay now remember we're going to be rendering out a list of to do's and so that's why this needs to be to do list view model as opposed to just like to do item view model it's because we want to like the view model connects you with the view and we want to render out all of these different things and we'll we'll talk a lot more about this as we go okay so we're going to create this and you know this can just go right here in the main directory and this is going to have like i said one attribute which is going to be like a list of these to do items now this is going to be public and we're going to call this to do items now as far as the data type goes because this is in a view model this is going to actually it can't just be a regular list or a regular array it has to be what's called an observable collection so if we want to use this thing called observable collection you want to come up here to the top of your file and you're going to say using and this is called system and let's see if i can get the no okay so it's called system dot collections dot object model so this is what we want to add in here and then you're gonna say public and it's observable collection just like this and then in here we're going to put to do item and then we can put this over here and we're also going to give this a getter and a setter okay so this line of code what we're doing is we're creating an observable collection and this basically means that this is a collection that the view can sort of observe and update itself whenever it updates so this is sort of where that binding comes in in order for us to be able to render all these to do items onto the view it needs to be contained inside of an observable collection this is just something that's part of you know this xamarin form stuff and this little syntax over here we have this like less than greater than sign and then to do item this just means that it's going to be an observable collection that has to do items inside of it so once again the to do item that's this model that we just created and the to do item is gonna it's gonna be a collection an observable collection of those to do items cool so that's kind of how that works now there's one last thing that we want to do which is down here in the constructor so we want to initialize this thing so down here we're going to say to do items is going to be equal to a new observable collection of to-do items just like that so here we're defining that this to-do list view model has a to-do items attribute on it and then we're initializing that to be an empty collection now the last thing that we can do is let's add some to do items into this uh just to kind of make sure that it works so we can say down here to do items so that's once again this observable collection and then we can say dot add and in here i'm going to add in a new to do item so i'm going to create a new to do item just like that and then in here we need to pass in the text so why don't we call this to do one and then over here we're also going to pass in whether this is complete or not so why don't we say that that's false so let's do this a couple times and maybe we'll make three of these so oops that's going to be 2 and then this one's going to be 3. so all we're doing here is we're creating this to-do list view model now once again this is what's going to kind of inform what's going to go on our view so it's all of the to-do's that are inside of this to do items collection which are going to get rendered out as part of the user interface over here and i'm going to walk you through how we can sort of bind those two things together but this is the way that we can set it up and then down here inside the constructor we're just initializing it to be an empty observable collection and then we're adding in three to-do items and so now in our program anytime we create one of these to-do list view models it'll be initialized with three items inside of it cool so we've created two parts of this we created the model and we created the view model the last thing we want to do is we want to go and create the view so what i want to do is i want to make it so that i can display all of the to do items that we have stored in our view model on the view itself so let's go back over to our xaml file so this is mainpage.xaml now in order for us to render out a list we actually can't use this stack layout so this stack layout isn't going to work for us if we're trying to render out a list instead what we want to do is we want to render out what's called a list view so i'm going to change this to instead of stack layout i'm going to change it to list view and we can keep the name on there but what this is going to do then is it's it's going to allow us to display like i said all of those to do's and what we want to do is we want to take this and we want to bind it to that view model so remember over here we have this binding that's taking place and this can be like a one-way binding or a two-way binding but we want to bind these two things together so that any time that this to-do list view model updates so anytime these to-do items update i want the user interface to update over here okay now there's a couple things that we need to do to set this up and uh there's a little bit of code that we're just gonna need to put in here real quick okay so the first thing that we need to do in order to bind these two things together is we need to add an entry up here on this content page tag so this content page tag has these things called xmlns this stands for it stands for xml namespaces basically this is a way that we can tell our xaml file here about some of the other code that's in our program so you can see here we have this like x class thing this this basically is what connects this xaml file to the mainpage.xaml.cs file we want to add in another one here and i'm just going to paste this in because i have it on my on my clipboard but this is something that you can go ahead and copy and actually this should be to do list app so you're going to type in xmlns colon and then you're going to say local right here and then you're going to say equals and then inside of quotation marks clr name space basically means like clear name space and then this colon and then the to do list app and what this will do is this will allow us to be able to access this view model here inside of our code so this is what's going to help us to connect this xaml file with this to-do list view model over there and then the last thing that i want to do and i actually also have this that i'm just going to paste in so i want to paste this code now you guys can just copy this down so it's going to be this tag content page dot binding context so you're going to have that as a tag and then in here you're going to put local and then to do list view model so this over here is what completes the binding so we've told our xaml file that we want to be able to access the code that's here inside of this to-do list app which is like all these files over here and now what we're saying is this xaml file is going to have what a binding context now the binding context it's just like what this thing is bound to and this thing is now bound to our to-do list view model and so that means that we can actually interact with and like access some of the values that are inside of our to-do list view model here in our xaml file so you need this little local thing up here and then you also need this binding context declaration down there so once you've done that now these two things are bound together so the view list model is bound together with the xaml file here okay so then here in our list view what i want to do is i want to tell this list view to render out all of the items that are here inside of this to do items list that's what i want to do here and we can do that using a property so you're going to say here items source just like that and then inside of this item source we're going to put an open and closed curly bracket now this is a very special syntax we use this open and close curly bracket when we want to put like a little bit of logic in here so normally you would just put like a string in here right but when we put these open and close curly brackets we can put some other like special syntax in here so what i want to do is i'm going to say binding and you're going to say to do items so what this means is that this list view is going to be bound to all of the to do items that are here inside of this list view and it's because we specified the binding context up here that we can just access to do items okay so that's how we know what these to-do items are so the source of data for this list view is going to be these to-do items now if you remember before we were able to sort of like dynamically put elements in here in our c sharp when we hit the enter key it's the same exact process it's just that now it's automated so now c sharp is going to do this or like xamarin forms is going to do this for us like in the background so we don't really need to worry about it so check this out i'm going to save this file and we did change a bunch of our c sharp so let me restart this now theoretically what should happen is we should be able to render out all three of those to do items uh there onto the onto the app okay so it looks like we have some errors here and i think this has to do with the fact that we forgot to remove this code so i still have these handle text change and this handle enterpress stuff in here so we can just get rid of that and that was just in mainpage.sample.cs so yeah we just need to clean up after ourselves and there actually might be some leftover code as well in here okay yeah so i still have for this entry i still have this completed and this text change thing so we also need to get rid of those okay so that should hopefully fix all the errors and yeah it looks like it's deploying okay cool so we cleaned up our code a little bit there that's good and so like i said now what should happen is we should see all three of those to-do list items rendered out here so you can see that we do indeed have all three of those now you'll notice that it says over here it just says like to-do list app dot to do item and this is because we're not explicitly telling xaml what we want these to look like in other words we're not like this is just empty in here right there's there's nothing in here and so when xaml dynamically inserts those to-do items into this list view it doesn't really know like what they should look like so all it's doing is it's just basically telling us that they're to do items but it's not displaying like the text or anything like that so that's the next thing that we that we want to do so what i'm going to do here is i'm going to inside of here now there's going to be some complex uh xaml syntax here so you just need to stick with me but we're going to create a list view dot and this is going to be called template so listview.item template this is another one of these little containers i'm going to try to keep this as organized as possible so we need an item template and this is going to allow us to specify how we want these these to do items to display themselves over there on the app and then inside of here we're going to say data template and this data template thing this means that we're going to be able to access the data that's inside of these to do items so we have our data template and then in here we're going to have a view cell just like that now i know this is a lot of like there's a lot of syntax here this is one of the criticisms that xamarin forms is often getting is that there is a lot of complex syntax but uh once we get this sort of set up it'll be nice and easy for us to manage so we have our list view and you can see i'm just keeping this really well organized it's very important that you do that as well so we have our list view and then we have an item template data template and then finally the view cell now in here we can create a label so i'm going to create a label and i'm going to give this a text attribute now what we want to happen is we want to display the to-do text from each one of these to do items up here so remember the list view is connected to these to-do items that are here inside of the view model and what we want to do is we want to display the to-do text for each one so once again i'm going to use these open and close curly brackets this is a special syntax and i'm going to say binding and i'm going to say to do text just like that now what this means is that i want to bind the text of this label to the to do text of each one of these to do items and that's where this data template thing comes in so because this is inside of the data template we're able to access the pieces of data that are inside of each one of these to do items so the in the to do model like this is called to do text it's the text of the to-do and so that's what we want to display down here so let me save this and let's see if it updates we might need to restart okay so it's looking good and actually let me change the font size so let's make this 25 something like that so we can see them nice alright why don't we just make this large keep it consistent so now you can see that we're displaying out the to-do text for each one of those to-do's that we created now remember over here in the to-do list view model whenever we create one of these to-do list view models it automatically populates it with three to do so that's where this data is coming from and that whole process of like initializing this and like creating it it's all happening like basically up here when we bind the to do items as the item source okay so c sharp is going to do that in the background xamarin forms is going to handle all that for us all we have to do then is just something like this cool so this right here is a super super common process and it's one of the core processes involved in this model view view model data structure or design pattern right so this whole thing where we have the view model and then the view model is able to sort of be bound to the view and you know obviously we're using the model here with this to do text and all that super common so this is kind of like the core i guess like topics uh for all of this stuff cool so we're able to display all of the to do's and that's good but there's a lot more that we need to do right because remember before we were able to type into this text box and then i hit enter and then what the new to do showed up i want to be able to wire that in now it's going to be a little bit more complex to do this using the model view view model design pattern but it'll end up being worth it because the way that we do this is like really efficient and it'll be this is like kind of like the the way that we're supposed to do it with this design pattern so i'm going to walk you through how to do that so how do we wire up this search bar with our to-do view model so that we can you know hit the enter key and then everything just sort of happens okay so let's go back over to our to-do list view model and i want to start walking you through how we're going to do this if you look back over on this now let me present this again the view model has a few of these different functions right so there's some functionality so we can add to-do's we can remove them and we can toggle them so the first functionality that we want to sort of encode into this is the add functionality so i want to be able to add a to-do to the list now that function is going to be over here in the to-do list view model okay now there is a process that we need to use in order to do this i'm going to walk you through it so don't worry if it's like a little confusing as we go i'll sort of bring everything together at the end but the first thing that we need to do is we want to create a attribute or a property on this class which can store whatever text is inside of this text field remember we had this like text changed thing and the text changed like we had a handle text changed method and we like we were able to use that in order to like listen for when the text changed we basically want to do the same thing except we want to store whatever text is here inside of this entry field we want to store that inside of an attribute that's here on the to-do list view model remember the to-do list view model this is what's connecting our view to our model this is what's informing what's going to show up on the view so if something's happening on the view i can actually store it here on this view model so i'm going to create and once again like we'll we'll talk about this as we go but i'm going to create a string here and we're going to call it new to do input value so this is going to store whatever value is up here in this entry field these two things are going to be like bound together we'll end up binding those together so new to do input value and we just want to give this a getter oops getter and a setter cool so now we can access this we can modify it etc and what i want to do then is i want to bind this to this entry field so i'm going to save this now let's go back over to our xaml file and inside of this xaml file i'm going to say that the text of this entry field so remember this right here this is this entry field that's over here and we're going to use a similar syntax that we used down here so i'm going to say open and close curly bracket binding and we're going to put new to do input value so now the value basically like the text value that's inside of here is going to be bound up to this new to do input value which is a field that we've created here on this to-do list view model now you could put this up here like a lot of times programmers will do this where like we have all the like the fields or the attributes of our class up together but you'll see in a second like it's better if we put it down here because then we can like this will all kind of be like organized together okay so let's save that and now these two things are bound together and once again because we're using this binding like c sharp is going to handle all of this for us so we we don't need to do this text change thing anymore we can just have it bound here and then those two things will like it'll basically update whenever we change it okay so there's that that binding that's there cool so that's the first thing that we need to do but if you remember like when we did this before we also want to be able to listen for that enter key right so we wanna we wanna be able to listen for when the user hits the enter key and then we want to be able to basically use that to create a new to do before when we did this we had event handlers so i said completed right and then we would create an event handler here in this case when we're using model view view model and we're using these bindings we don't want to use an event handler okay instead we want to use what's called a command and a command is similar to an event handler except that it's sort of bound up in all of this binding stuff so the command is yeah it's kind of like a method or a function kind of like an event handler but it'll allow all of this to work together so let me show you how this works over here now in order for us to create a command we're gonna need to import uh something now let me first write out the syntax so we're gonna put this right above here right above this new to do input value and i'm just gonna say public and we're gonna create something called i command now this it won't be in here by default i'm pretty sure it's from system dot windows dot input yeah so if you do we'll say using system.windows we're going to say public i command so now that should be available to us and this is going to be called add to do command so this add to do command like i said before it's very similar to an event handler it's just that it's going to work with all this binding stuff and what i'm going to do here is i'm going to use this special syntax so this is like what we call an arrow syntax and all this is going to do is it's just going to say new command and you'll see that once again we don't have this available to us so you can say using up here xamarin.forms and this will give us access x-a-m-a-r-i-n make sure you spell it right this will give us access to this command and then in here um we're going to make an open and close parentheses now the last thing that we need to do down here is we need to create a method so i'm going to say void add to do item and this method is basically gonna get called whenever the user like hits that enter key okay and we need to we need to kind of pipe this through to this command thing so in here you're gonna say add to do item now the way this works once again is this command is going to get executed whenever the user hits the enter key and the command is basically saying that whenever this command is run we just run the add to do item this is a little like it's a little kind of it's you kind of have to go through multiple steps to get this to work it's just how we do it in in xamarin forms so this pattern is like very um common to use so that you just kind of need to get used to this syntax okay but if you don't fully understand everything that's going on here it's okay like we're gonna wire it up and get it to work anyway so this add to do item now let me um let me actually just console.writeline in here and then we're gonna wire this up to our view so we can say enter pressed now we have this add to do command what i'm gonna do is i'm gonna come over here into my mainpage.xaml file and on this entry i am going to say return command so return just refers to like hitting the enter key right and this is essentially saying what command do you want to run whenever the user hits the enter key and in this case we called it the add and actually we need to make this open and close curly bracket i'm going to say binding the add to do command okay so we're binding this add to do command which was this command that we created up here basically all you need to know is that whenever this command is run we just run this add to do item method we have to kind of set it up this way and then that's bound to the return so let's see if this works now we modified our c sharp code so let's restart the app and theoretically what should happen then is i hit the enter key all of this binding stuff hopefully works and then it'll say enter pressed so let's see when this loads up here so i'm going to type in and then i'm going to hit the enter key and you'll see down here it says enter press so all of that is like bound together now obviously this there's a lot of steps here this is some funky syntax over here but that's it's just how we do it in xamarin forms cool so what i want to do then is i want to actually create a new to-do so the user types in the text right and i want to create a new studio and i actually forgot to say one thing so remember this new to do input value this is bound to the text that's in the entry field like we talked about that so actually you could say if we said console.writeline and then in here if i print it out new to do input value this is actually going to be the input that's in that entry field so let's we got to restart this because we are working in c sharp and so now when i type in it'll actually i will actually have access to the new to do input value which is why we had to set this up over here okay so i hit enter and you can see there's all the text that i just typed in so once again just to kind of you know talk about this binding one more time this new to do input value is bound up to the text of the entry field whenever we hit enter whenever the the return command is run right we're going to run this add to do command and this add to do command just calls this add to do item method so it is like very roundabout way of doing it but that's what's going to allow all this to kind of get wired together cool all right so now what we want to do is we want to use all of this to create a new to-do in other words we want to add a new to-do into this to do items array so i'm going to say to do items and we'll say dot add and then over here it'll just be the like basically the same syntax so we'll say new to do item and then in here so the first argument is going to be the text so this is just going to be the new to do input value and then the second thing here is going to be whether it's complete or not we'll just make it false so with that line of code i think this should be wired up and we have the ad like ready to go this is going to be awesome so we'll type in we'll hit enter and then an item will get added to this to do items list now because all of this is bound together when we add a new item to the to do items list it should automatically show up over here on the screen so it'll basically like get dynamically added to that xaml just like we saw before so i'm going to type in hello world i'll hit enter and you can see that it shows up right there so that's awesome all this is bound together and it looks like it's working so you know i could type in as many of these as i want i can type my name whatever and then they're all kind of showing up there perfect okay so we now know how to add to do's and we've talked about how all this stuff gets bound together and once again this binding is such a good way to do it because as you saw with these to-do items all i have to do is add an item to the to-do list and it automatically gets updated there on the app so it just takes away so much of the manual work so much of the manual labor if you remember before like when we initially did this i had to dynamically like create a label you know it was like new to do whatever and then i had to like append it onto the document we don't need to do any of that because now it's all bound together okay so that is the ad i'm pretty happy with that now the next thing we need to do is remove and toggle and this remove and toggle this is going to be really cool because it'll be an opportunity for me to introduce some even cooler concepts in xamarin forms and the first thing that i want to do is show you how we can work with images so you see over here we have this little trash can right this little trash can guy and this is like an icon or an image or whatever so we're actually going to use an image here in our app and i'll show you how you can like add that in and then you can click on the little trash can and it'll delete all that stuff okay so i have an image of a trash can here now let me pull this up so it's this delete.png guy now i'll have a link for you to download this in the description or if you want you can just find any png like or any it could be a jpeg too like but just any image that you want to use like an icon and uh but you can use the same one and so what we're going to do is we're going to add this into our into our app so the way that we need to do this is we need to add this we call it a resource right we need to add this into our android library and also our ios library so this is kind of the first time we're talking about like ios and android obviously xamarin forms can run on ios and android it runs on both of them but anytime we're working with these images we need to add them to this android folder and this ios folder so here in the android folder if you go down to resources and then there's this folder called drawable we're going to want to take this and we'll just drag it into the drawable folder and you can just copy it so that way it stays here in our file system so now in our drawable folder we have delete.png added in there so any of the assets or like images whatever that you want to use you can just put them in drawable and then for ios we're going to do something similar so ios has this resources folder and once again we're just going to drag this and we'll drop it in the resources folder cool so we have our delete.png this is in both of those different folders okay so it's in the ios and it's in also in the android there now what we can do is we can add this into our view so we're going to go over to our xaml file and i want to put this little trash can just here in my app now put it we want a trash can for each item right there's this little trash can here so we can just put it next to the label and then i'll also show you how we can format this out so what we want to do first though is i want to create something called a flex layout and a flex layout this actually refers to a layout system which is called flexbox and if you have any experience with like html or css then you might be familiar with flexbox it's not super complicated and i'll show you exactly what you need for it but we want to put the label and the the little trash can inside of this flex layout because it's just a really easy way for us to lay things out it's my preferred way of laying things out anytime i'm designing uis so for the image now i can save this and you'll see here it doesn't really change much right it looks very similar but for the image we're going to create something called an image button and the image button is a it's exactly that it's a button which you can which has an image and then you can click on it and then we can respond to that so we we saw before like how we can respond to to button clicks and stuff so this image button is going to take a couple of attributes and the first one here is going to be source so source and this is can just be an open and closed quotation marks and then you're just going to put the name of the file so in my case it was delete.png and i'm going to save this now if we restart so because we added in a resource like a new image we have to restart our app because that needs to get loaded in so we'll restart and then we hopefully should see this little delete icon there on the on the app okay so you can see here that we have this little trash can showing up that's looking good now it's a little big so you can actually scale it so you could say like scale if you said for example 0.5 that'll scale it down so it's a little bit smaller it'll basically be like half the size whatever so you can make that as big or as small as you want and then the next thing i'm going to do as well is i want to give this flex layout a property so you can see how these two things are like next to each other we can use this flex layout to separate them out so you can see here like we have the text on the left side and then the trash cans on the right side so you can say here on this flex layout you could say justify content and we're going to say space between and what this will do is it'll just put space in between each one of these elements and another thing you'll see is that they're not really lined up on that horizontal axis so you can also say align items center and now it'll make them so they're kind of on the same field it's not super easy to see that here but it does affect it okay another thing that we might want to do is add some padding onto this so you can see here that they're like right up against the side so we could say padding and you can put two values in here so the first value is going to be the padding that's on the sides so if i put like 20 here and then the second one is going to be like the vertical padding so now you can see that they're kind of like nicely indented in a little bit just makes it a little bit easier to see and a little bit easier to use now you can play around with these styling more the stylings more and there's tons of documentation about this i don't want to spend too much time talking about the specifics of it just because we're kind of building something general but yeah just remember that like you know this thing looks decent but you can make these apps look you know insanely professional without too much effort also another thing as well if you know css you can style all this stuff with css which is cool not every css attribute is going to work but like you can straight up write a css file if you're if you're used to doing that okay cool so we have our image button now this is looking good and it's nice and formatted so i can click this but what we want to happen is i want whenever i click on this little trash can i want the to do item to just straight up get removed so i want that get to i want that to be completely removed from our little view model here right so how do we wire this up it's going to be actually kind of similar to what we did over here so we're going to need another method and we're going to need another command right so over here we have this remove method so we want to do something similar to what we did over here so i'm actually just going to like straight up copy this no need to rewrite all this code you can get rid of the new to do input value thing and we're going to call this remove to do item and then we're going to call this command remove to do command and then over here you want to say remove to do item so i've just changed all of these so this is removed this is remove and then this guy over here as well now let's just console.log out removing because oh sorry console.log console.writeline i'm like writing javascript here okay so console.writeline will write out removing and then over here in the xaml file i want to wire up this command to whenever the button gets clicked so that's similar remember on the entry like whenever the return key got hit we bound it to this add to do command we're going to do the same thing with this button so the button has a command and this command thing so like before we had like what is it clicked once again clicked is going to be for an event handler we're not working with event handlers we're working with commands because that's what we do when we bind stuff so this command property over here there's gonna be a little bit of funky syntax here i'm gonna write it out and then i'm gonna explain it to you okay so don't worry if you're like not understanding it so i'm gonna say binding and we're going to say path is equal to bindingcontext dot remove to do command and then over here you're going to put a comma and you're going to say source is equal to and then an open and closed curly bracket and then you're gonna say and i just have my notes here that's what i'm looking at uh you're gonna say reference and then to-do list so this is this thing's a beast right here i mean look at this and i even spelled command wrong so i'm going to walk you through what's happening here but first i just want to make sure that this is wired up correctly but i will come back and explain all of this now the second thing that we want to put in here is going to be what's called a command parameter so this is going to be another attribute that's here on this image button command parameter is going to be equal to quotation marks and then over here you're just going to say binding and then a dot perfect okay so just like that now let's go back over to our to-do list view model now once again i will explain all of that but i want to add in one item here as a parameter into the remove to do items so here you're going to say object o okay and i'm going to write some more code here once again i well actually no let's just do this first and then i'll explain that so let's just see if this is wired up we modified our c sharp code so let me run this just to make sure that we typed everything in correctly and so what should happen now is when i click on this image button it should print out removing so i'll click on this and you can see down there that it says removing okay so this is all wired up now what i want to do is explain what's happening and so before we do that though let me do this i'm going to write out this syntax i'm going to say to do item to do item being removed and i'm just here in my to-do list view model and i'm going to say is equal to o at whoops that's a zero o as view or no sorry as to do item okay yeah a lot of notes here there's a lot of syntax um but hopefully you guys can follow along with what i'm doing and then over here i want to type in um to do item being removed dot to do text okay so once again real quick i know there's a lot of code here just type along with me and uh and then i'm gonna go through and explain all of this so we will we will look at exactly what's going on that's the one thing my one criticism of this xamarin form stuff is that there is a lot of this like boilerplate code that we need to write which i'm not a huge fan of but uh the binding stuff is like really powerful okay so i'm gonna hit this uh delete thing and you'll see down here that it prints out to do three if i hit the delete for to do one you'll see that it prints out there to do one so something is happening here where whenever i click that trash can i'm able to get access to the to do item being removed and now i'm going to walk you through exactly what's happening so we talked about these commands before right when we did this adding stuff so the command is just something that's run it's kind of like an event handler whenever something happens on these items that we have bound to our view model so whenever this command gets run we call the remove to do item method now over here in the xaml like we have this command here and this command just specifies what's the command that's going to be run whenever we click on this delete and so this is something we've seen before right we say binding but now you'll notice that i'm saying path is equal to bindingcontext.remove to do command one of the things that we need to realize is that down here where this image button is getting rendered we're actually inside of this list view so when i'm inside of this list view and i refer to you know and i use this binding thing and this kind of goes back to something called context but when i'm inside of this list view i can't just refer to remove to do command because right now i can only refer to the attributes that are on the to-do item so for example i can say to do text right i can just say binding to do text and that's because when we're inside of this list view we're sort of looping over all of these different to-do items and so the to-do text is part of this to-do item right it's it's part of it and so that's why we're able to just say binding to do text but i couldn't for example just say binding remove to do command because there isn't a remove to do command on the to do item model which is basically what we would be referring to here so instead i need to say okay the path basically where you can find this action is going to be bindingcontext.remove to do command so bindingcontext this actually just refers to this thing up here so bindingcontext refers to the to do list view model so i'm saying okay i want the binding context which is the to-do list view model and i want the remove to do command method that's inside of there which is or the remove to do command command which is inside of there which is this guy right here i know this is confusing um once again one of my criticisms of the xamarin forms thing is is this thing it's just like not intuitive at all for beginners but this is just kind of how it works so yeah once again like we can't just say binding remove to do command because when we're down here we're essentially referring to the attributes that are on the to-do list or sorry the to-do item like the to-do text so we need to use this path and you know like i've been saying if if you're not fully 100 getting this it's okay um just know that this is kind of the syntax that we need okay and then over here this source thing this is basically just telling us that the remove to do command should be run like on the to-do list that's kind of what this is saying okay we just we just kind of need this in here okay so hopefully that makes sense if not you know this is one of those things that it is kind of confusing so it might be worth just kind of like playing around with this or just um you know trying to do it a couple times but then down here you see we have this command parameter thing so this is something that we haven't talked about yet and you'll notice over here in this remove to do item this is taking a parameter which is called object o and whenever we want to delete one of these to do's we need to be able to tell which to do we actually want to delete and so remember over here if i click like to do two like to do two shows up down here i need to be able to to be able to tell like which to do is the user trying to delete because in the xaml over here this list view is being used to render out all of those to do items and so when i click on one i need to be able to tell like hey which one of which one of these to-do's are we actually trying to delete and that's where this command parameter comes in so when you say binding and then you use this dot it basically means that the to-do item that is uh that's getting deleted so the to do item whose trash can we click that's going to get passed in over here as object o okay and then so yeah that's basically how it's wired up okay so command parameter binding and then this dot that means that we're gonna pass in the entire to-do item as the argument over here now we need to put this as object like if i put this as to do item i'm pretty sure we'll get an error so if i put this as to do item you'll see that we're getting an error over here this is just another one of those things that we have to do so we have object o and then down here what i'm doing is i'm essentially saying that object o right here that's going to be sort of converted into a to do item and then over here we're able to use it as a to do item okay so that's what that command parameter is doing it's basically passing in to this remove to do item method whatever the to do item was they got that we want to delete and then i'm sort of like i don't know what do we call this like casting or i'm doing type coercion i don't know exactly what you would call this but i'm essentially taking that generic object that you know we're specifying up here and i'm converting it into a to-do item once again i know this is this is kind of confusing unfortunately this is just like how it's set up so but once you get the once you get the hang of this like it does start to kind of click so you can just kind of practice this a couple times and i think it will sort of start to make sense like how this is all bound together okay so i'm able to do all of that and we just kind of went through all that removing stuff right now what i want to do is now that we have the to do item being removed i just want to remove that from the list so here i'm just going to say to do items dots to do items dot remove and then over here you can just say to do item being removed cool so this will just allow us to remove that to do item from the list and just like up here when we added one when we remove one it should automatically update on the user interface so let's go ahead and restart this code and we will see what happens now if i click on one of these to do items like over here you'll see that it disappears from the list so now i'm able to delete sort of remove all of those things cool all right so we've done the adding we've also done the removing and we've talked about some of this crazy funky binding syntax and all that stuff the next thing that we want to do though is we want to add in the toggle and the toggle is going to be interesting because it's also going to allow me to introduce another concept which is using external packages okay so for our toggle right we basically have this little it's like a check box whatever you click on it and that means that it's complete or if it's unchecked it means that it's incomplete etc right so we can do all of that stuff now the first thing i need to do is get access to a toggle element so believe it or not there is a like there is a check box uh so i think it's just called check box but the problem with this check box is we're not going to be able to use it to like respond to events like this so or maybe i don't know maybe we can i'm when i was preparing this i wasn't able to use the checkbox and there was like some reason why we weren't able to but either way i want to show you how we can use um some of these like elements that we could get from like an external package so we're actually not going to use the built-in checkbox instead we're going to use a checkbox that we get from like an external library so basically a checkbox that's not included inside of this inside of xamarin forms by default and this is like another concept that's really useful so you're basically like getting external libraries from like some other source so what you want to do is you're going to go over to your little solution here and you're going to right click and then you're going to go to manage nuget packages so nuget this is what we call a package manager there's a lot of these different package managers if you've done javascript like you'll know about npm or like um there's one called pip which is for python there's one called gems which is for ruby this is the sort of the one for xamarin forms now what you want to do is you want to come up to the search bar here and you're just going to type in input kit just like that and then this should pop up here xamarin.forms.input kit so you're going to click on that and then you're going to click add package so we want to use a check box that comes from this so this input kit this is a it's essentially like a library or it's a collection of code it's basically a collection of these different xaml elements that we can use and this has a checkbox in it which i want to use in order to just sort of have the checkbox for our app here now once you've sort of downloaded that package what we need to do is we need to import it here into our xaml so there's going to be some other kind of funky syntax and i'm actually just going to copy this and then you guys can type it in so these things are kind of annoying to to put in here but this is like another namespace so you're going to say xmlns colon inputs is equal to we're going to do this clear namespace thing a colon and then plugin.inputkit.shared.controls and then over here it's going to be like assembly and actually you know what i can just put this in the description of the video that way you can just copy it just like i did um so yeah you can just look in the description for that but this is essentially gonna allow us to like import all that stuff from that input kit that we just downloaded into our application so down here i'm going to put the check box right where it was before you're going to say input colon check box and this means that we're going to use the check box that we got from that forms input or the thing that we just the thing that we just downloaded so this checkbox is going to be a self-closing tag and i want to show you here we can say and this should have a attribute so there should be an attribute here which is called is checked and we can set this equal to true so let's see if this works and i'm just going to render this out over here onto the screen and actually whoops this needs to be a capital b that's why it's not working okay so check box with a capital b and i think we're going to need to restart this because we just downloaded that nuget package so let's restart perfect okay so now you can see that we have this checkbox and it's getting rendered out for each one of these now if you click on it it'll actually you know it'll change whatever but you can specify whether it's checked by default using this is checked property so what i want to do is i want to make it so that this is checked property is bound up with whether or not the to do is complete so we have this complete field on the to do and i want to basically bind it to that so i can say binding and then i can just say complete and this will now bind the value of this checkbox with whether or not this is complete so just to prove that to you let's go back to our to-do list view model and we're creating these like we're sort of adding these default to-do's in right i'm going to make this first one true and we're going to need to restart the app but let me show you because it's bound up now the first check box should be tied into this value and it'll actually be checked for us so we should have one checked one and then two ones that are completely blank so you can see boom that's exactly what happens okay so now that we have all this wired up believe it or not it's pretty much done so this is kind of all the logic that we needed over here in order to get this to work and so you know i can put this value as true over here and then it'll sort of inform the user interface as to what it should do but then if i was to click this and check it because these two things are bound together right because we have this binding for complete here if i click this over here it'll also update the complete property on that to do so it's like this two-way binding which is like super powerful and that's one of the really cool things about using this so really at the end of the day that's kind of all the logic that we need for this to-do list obviously we could add more stuff in here right we can make it more complex whatever but hopefully that gives you an idea of how you can use this model view view model design pattern and sort of building out some of these views now before we kind of wrap up here there are i guess like a couple more things that i could show you one thing in particular is i want to format this a little better so if we go back over to this document you can see here that like the label and this little checkbox over here on the left are kind of like put there together and this is something that we can do really quick just with the user interface obviously you can play around with the with the ui more but if we wanted to do that we can create another tag over here and this is just here in my yaml so we can create a content view and i'm just going to put this right above the input in the label and then inside of this content view i'm going to put a flex layout and then inside that flex layout i'm going to put this input and i'm also going to put so yeah the input which is the checkbox and then also that label now i know once again this is kind of like this view is getting very complex but if you do this so if we have this content view and that's just kind of like a general container and then this flex layout and you'll see here that if i save that that now these are both kind of over there on the side and this also for some reason like it messes with the with the size of this image so if you want you can just get rid of that scale i'm not 100 sure why that's happening but then over here on the flex layout there's another thing that we can do as well so we can say align items center and that's going to kind of align all of these things right there to the center so that you know looks kind of good okay so like i said there's some other stuff that we could do here as well there's some other logic that we could add in but i think just for a beginner tutorial this is probably a good place to stop we've talked about a lot of stuff and so now you can kind of go off and you know play with this and practice it and build some of your own stuff as well but hopefully that was a good explanation for all of you looking to get into xamarin forms development

Channel: Giraffe Academy

Views: 78,940

Keywords:

Id: oNIvnCNzAqU

Length: 103min 13sec (6193 seconds)

Published: Fri Mar 12 2021