XAML Data Binding and MVVM Basics (.NET MAUI, WPF, UWP, Xamarin.Forms)

today i'm going to show you some common data binding mistakes in mvvm and xaml and show you how to fix it but also some best practices too so tune in [Music] hey everyone i'm james and today i'm back with a different style of video this time it's actually viewer submitted code and problems we're going to fix some problems here now i have tons of videos on mvvm 101 and xaml 101 so check those out first if you're looking to get into mvvm and xaml if you're doing windows wpf uwp donna maui xamarin forms avalonia uno any of the things all the xamls all the data binding all the things those videos will super help but also um you should probably watch them if you're interested in getting into the user interface with xaml and mvvm data binding stuff now data binding enables us to kind of bind our controls to some code behind so for example you have a label that you want the text to update you can bind it to a property that would then automatically update it same thing with an entry you can type in a field and it would update your code behind which is really cool so it's linked together there so this user submitted some and viewer submitted some code snippets and i try to reconstruct their application the best if i could and we're going to see what's wrong and also how we can fix it and look at some best practices over here too now before we get into the code if you like this video so far you think you're going to like it even more give it a thumbs up if you like this channel at all it really helps the youtube algorithm of goodness like it earlier in the video super good so any time during this video give it a thumbs up if you like it super appreciate that and of course don't forget to subscribe so let's check it out now this application is relatively straightforward we have some data entry so here we have a first name last name mail and password and then a button that will add a person to a database maybe or make a web request who knows i didn't get all of that code but this looks pretty good uh i would say the first thing that i noted is that i don't love that it's like first name lower case in here we can also see that there's no real it doesn't know about the data context yet if we look at the code behind there is a view model here so maybe the first thing i would do inside of here is this is a xamarin forms and done it maui thing but you can do an x data type and then you can do the person you could do you can do like a new xmlns local here and then i would do the maui app 23 and then i could do local uh let's say person page view model and then it would it would basically look for those properties and it says okay those properties exist so that's one thing that's good about it so far now the binding here for a data entry is 2a which means if i type in the the entry it's going to update the code behind and also if i change it it's also going to update it too now if i did another label down here and i said label and i said text equals binding first name this is kind of one way right which is like i can't update a label from the ui but i could update it from the code behind so what we would expect here is if i'm typing into this thing we would want that this to sort of update to so let's set that text color we want the label to update in symmetry so let's go ahead and look at the code behind in our person class this looks good we have a person first name last name email password now it doesn't look like we're binding directly to a person we're binding to a view model which means that these properties must exist on the view model so let's check that out and sure enough here's our view model very minimal this is what they sent me so i have a post people which is an i command this looks perfect sometimes you might say post people command or something like that totally up to you this is a public i command with a getter so that's really good there's a getter on there it's public only public properties can be seen visibly by the xaml so you can't like have a private or internal property that you want to expose in your user interface it has to be public so this is looking really good this calls a add person which is a static void i'm not sure why it's a static void that might be an issue there too um because uh here i know that there was a few lines of code that they were running into that said hey this doesn't work like i'm adding and creating a new person i'm trying to call the set property method which does something maybe in their code and this is giving me an error that i can't reference a non-static property and that's correct this doesn't need to be static because you're not calling it from anywhere static methods can only access static properties so unless you made these static which you wouldn't want to do you would want to just make this not static and then there you go public void this is all the same totally good so your i commands they can have a method that's a void or you can also pass it a task as well i'll put a video up there somewhere way up there about mvvm helpers which also streamlines this process too okay so we have some person here that's fine let's just run it and see what happens now that we've fixed the build errors at least over here now you can do something with this person at least and that would totally be good to go at this point but but i kind of get what they're doing here right they have a person this i don't know what this is doing necessarily but it looks like they're going to call this method add it to a database and do something that's what i'm assuming okay first error here it says um property first name not found that's actually really interesting because the first name is there um however the issue that we run into is that while first name is there there's no getter and setter on that thing okay so if you run this code over here there's no way for it to get or set it okay so what we need to do is we need to come in and say get set again so we're going to take this and we're going to go ahead and make it get set over here so this is really important just like you had a public getter for your for your i command you need a public getter as well and a public setter for your first name your last name and your mail okay so now we should be able to run this because our data binding should validate 100 percent now if you didn't have in your xaml this data type you wouldn't get that validation there so there's ways of doing that data validation there so now we're compiling we're good to go and let's see what our app gives us over here so here we go i'm going to make this a little bit smaller perfect okay so we have a first name i'll say james monty magno i'm going to say my email and my password now let's also add a breakpoint here and let's just see did anything actually data bind and did it work so i'm going to hit add person now if i hover over these look at this this is kind of cool look view james was set last name montemagno set email my email set password set so what's important here is by doing the getter and setter that enables the xaml data binding to not only read but also to write to those binding fields that's super duper important and then we can call whatever we want this is all going to get passed in now one thing you might do after this is you might do like first name equals string dot empty last name right equals string dot empty or mail equals string.empty and password equals string.mp you might want to do that right so let's run this and see what is happening so what we're going to do is not only create our new user but then also we're going to submit them into the field so i'll say james over here and then we'll say monty magno and then email and password now one thing you might have noticed is that i added a label there but it's totally not coming up so something is definitely wrong but let's check this out as i add a user so sure enough i can add a user i can continue on now look that like i have cleared those fields but the ui didn't update if i add it again notice here that all those fields are empty but the ui is still showing values so that's super duper bad right that that is actually happening there because in this instance when i make those changes i am not notifying the user interface that that has changed we need to notify that hey i over here i'm changing the value okay so let's implement that so the first thing i'm going to do is i'm going to go ahead and change these to first name you know last name these are these all have like you know these [Music] you know validation errors that need to be fixed up so i'm going to just do kind of my normal casing over here so you know start with a capital letter and then that's going to trickle down so we're just going to let this do this here perfect awesome so this is looking pretty good so far now what we need to do is implement something called i notify property changed now i talked to my mvvm helpers that you probably never need to implement this ever in your entire life but let's just do it for fun i notify property changed this is a interface that you implement and when you do so i notify property changed lives over here in the uh using uh component oh look at that it actually added a d on there for me wow visual studio so smart so when i do this i'm going to implement it it's going to give me an event here so a public event and i'm going to create a method for myself that i'm just going to simply say property changed i'm going to pass it a string over here and i'll say name and then all i need to do is say property i'll say on property changed there you go property changed i'm going to trigger the event and what this is going to do is is basically pass in the information automatically so invoke this method and what happens is when you data bind to xamarin forms or done maui or any other xaml ui it's going to register and try to register for a property changed event so there's a few things i can do so one i could create my own little backing field here so i could do string first name over here and then i could do this which is i would drop these down and then i would do something like return first name and then here i would do something like your first name equals value and then set a property or on property change i'll do name of first name cool the other thing i could do here is i could also change these just manually like if i'm not going to change them a lot i could also do that here that looks good too that would also trigger and validate those things there too but this is important because if i'm data binding first name to other fields every time i change that element it's going to change as well so i need to implement this inode if i property changed there's the.net community toolkit that that helps out with this mvvm helpers that helps out with this any mvvm framework basically will help it out now i've changed those names so let's go ahead and just fix this up here and i'll do first name first name last name and then also mail over here and then password so we're doing that data binding those things all sync up there and now what we hopefully should get is two things we should not only be able to enter a first name of uh james notice this look at that you see that james is my first name look at the data binding in action whoa cool they'll say monty magno i'll say email and i'll say password i'm going to hit add person and just like that the form is cleared because i've notified the user interface that it's totally good we totally did this this is awesome and it's all good we have our two-way data binding in place which is super duper cool all right now this is fixing the problem problem fixed we've looked to make sure that we have public getters and setters proper naming conventions that we've also implemented i notify property change so we can clear out those values and we're good to go but there are some other optimizations that we can do on this thing to really really make it special so let's check this out the first thing that we can do is we could actually bind instead of to individual properties here we could just bind to the person like there's getters and setters here what if we did a uh you know just created a person here and in fact if you look in their sample code they gave me they have this people i don't really know exactly what it is but we have a people we have a person so let's just delete this here and let's just create a public person i'm going to call it person that's what we're going to bind to i'm going to do a get set all right and i'm just going to do a new person on there that's it in fact you don't even need to do a get or set i mean because you're never going to set it anywhere else so we're good now what we can do is let's delete all this stuff look at this gone and then let's take some of this code and also implement it in the person for i proper i notify property changed i notify property changed over here all right let's bring that in and then let's create another one over here so i'll do void um [Music] clear fields okay and what i would probably do here is i would do yeah first name last name email and empty password that line completion so good let's make that a public void that i can call now the other thing i probably want to do is i probably want to have backing fields on here so i'm going to do first name and we're going to we're going to write that a little bit of code here because i think that this is the right thing to do and here we're just going to do this and then also call on property change i'll do name of first name again whole line completion so good it is all in there let's just make sure that we drop down one more perfect that looks good i guess we can minimize this too and now what i'm going to do is i'm going to do a string last name there we go i'm going to do the same thing here and this is going to fill it all in that's super duper good string email and now we're going to do is we're going to do same thing return email fill that in notice that we're calling on property changed after we set the value same thing here let's do a string password and then down here we'll do a get of a password and set that there perfect but just figured it all out that's amazing all right so that's it so we have our set properties our clear fields all the things that we're going to do and it's all mvvmified up so now what we can do is instead of you know calling these methods i could do of course you know um i don't need the new person i have a person right i don't need to set these fields at all i could just do this and then what i could do is simply say add person and then do person dot you know clear fields and then here i would do add to database right boom whatever you're going to do now this cleans up my view model a whole lot look at how clean it is i just have a person here but what it also means i can do is come in to here and i can just say person dot first name right i have i can index in on those properties so i can just add those all here but that command of post people is still inside of my view model which makes sense so we're going to change that to email to there we go let's do that that's it we've refactored the code here so now we are actually data binding directly to that person uh over here so let's make sure it still works so james monty magno that's i guess with my first name but see how the label updates automatically and i'll say monty magno my email password here hit add person it all clears out absolutely delightful 100 and there you have it that is how you can really clean up and solve some common data binding mistakes that i run into myself it's totally cool it happens um but hopefully this was helpful i mean hopefully this at least helps a person that submitted this on youtube and on twitter to me they're having issues with their source code and that is definitely one of the reasons why that they're running into this thing here now again uh if you have any questions at all leave them below maybe you have other tips and tricks add them in the comments i'd super appreciate that if you like this video at all give it a thumbs up i really appreciate that if you have some source code you want me to fix up live uh over here also send it to me feel free to reach out to me on twitter my email is in the about page on the youtube and of course like i said if you like this video give it a thumbs up also hit the subscribe button super appreciate it but that's going to do it for this video thanks to the person that submitted this code thanks for watching and have a good one [Music] you

Channel: James Montemagno

Views: 40,746

Keywords: .net maui, avalonia, commands, data binding, databinding, icommand, inotifypropertychanged, james montemagno, maui, maui .net, maui c#, mvvm, net maui, uno, winui3, wpf, xamarin data binding, xamarin forms, xamarin.forms, xaml

Id: sAn4RVsroF4

Length: 19min 14sec (1154 seconds)

Published: Thu Feb 10 2022