Today, I'm going to show you some common data, binding mistakes and
MVVM, and XAML and show you how to fix it, but also some best practices too.
So tune in.
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 a 1 0 1 and XAML, one-on-ones
a check those out first.
If you're looking to get into MVVM and XAML you're doing windows WPF,
UWP, .NET MAUI, Xamarin forms.
Avalon.
Oh, no.
Any of the things, all those animals, all the data, buying, all the things,
those videos will super help, but also, um, you should probably watch them.
Uh, if, if you're interested in getting into the user interface with
Xamarin and VVM databases, 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 will 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, um, and, and the viewer submitted some.
Snippets.
And I try to reconstruct their application the best of I could.
Um, 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,
I think you're gonna like, give me 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'd
like it super appreciate that.
And of course, I forget to subscribe, so let's check it out.
Now this application is relatively straightforward.
We have a, 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 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 noticed, I don't love that it's
like first name lowercase in here.
We can also see that there's no real, it doesn't know about the data context yet.
Um, 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,
uh, this is, uh, Xamarin forms.
Uh, Maui thing, but you can do an X data type and then you can do, um,
the person you could do a, or you can do like a new XML and S 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.
Now.
Binding here for data entries two way, which means if I type in the entry,
it's going to update the code behind.
And also if I change it, it's also going to update it to, um, now, if
I did a, another label down here and I said label, and I said, text
equals binding, uh, first name.
This is.
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, um, we
would want this to sort of update to, so let's start 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 buying any 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.
Um, this is what they sent me, so I have.
Uh, post people, which is an I command.
This looks perfect.
Sometimes you might say posts, 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, uh, or internal property that you want
to expose in your user interface.
It has to be public.
So this is looking really good.
Um, this calls a ad 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 this step 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 status.
Properties.
So unless you made these static, would you wouldn't want to do, um,
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 eye commands, they can, um, uh, have, uh, a method that's a void, or
you can also pass it a task as well.
Um, I put a video up there somewhere way up there about MVVM helpers,
which also streamlines this process.
Okay.
So we have some person here that's fine.
I don't know.
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 I 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.
Um, but it looks like they're going to call this method added
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 a get set over here.
So, and this is really important, just like you had a public getter for your,
for your, uh, I command, you need a public getter as well, and a public setter for
your first name, your last name and your.
Okay.
So now we should be able to run this because our data binding
should validate a hundred 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, uh, gives us, uh, 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 Jane.
Monte Magno.
I'm going to say my email and my password.
Now let's also add a break point 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, Monta Magno said.
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 past.
Now, one thing you might do after this is you might do like first name equals
a string down empty, last name, right?
Equals string dot empty or mail equals string.mt.
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 Jane.
Over here.
And then we'll say Monte 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.
And if I added again, Notice here that all those fields are empty,
but the UI is still showing values.
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 overhear 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, um, first name, last name.
These are these all have like, you know, these, um, you know, validation,
errors that need to be fixed up.
So I'm going to just do.
Uh, my normal casing, uh, over here.
So, you know, start with a capital letter, uh, 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.
Um, but let's just do it for fun.
I notify property changed.
This is a interface that you implement and when you do so, um, I notify
property changed lives over here in the, uh, using, uh, component model.
Oh, look at that.
I 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, uh, over here and I'll say name.
And then all I need to do is say property.
Uh, I'll say on-property changed.
Property changed.
I'm going to trigger the event.
And what this is going to do is, is basically passing the
information automatically.
So invoke this method and what happens is when you database.
To Xamarin forms or .NET 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 the first name equals value and then
set a property or on property change.
And I'll do name of first name.
Cool.
The other thing I could do here.
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.
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.
I notify property changed.
There's a, the dinette community tool kit, uh, 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, uh, male 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 James.
Notice this, look at that.
You see that James is my first name.
Look at the data binding and action.
Cool.
And I'll say Monte Magno.
I'll say email and I'll say pass.
I'm going to 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.
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 changed 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.
Um, we can actually bind instead of to individual properties here.
We can just bind to the person like there's getters and setters here.
What if we did a, uh, you know, just ha created a person here.
And in fact, if you look in their sample code, they gave me, they had 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 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 a set.
I mean, because you're never gonna set it anywhere else.
So we're good.
Now what we can do is like, 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 a, another one over here.
So I'll do void, uh,
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 completions.
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
little bit of code here because I think.
The right thing to do.
And here, we're just going to do this and then also call on property,
change on the name of first name again, pull line completion.
So good.
It is all in there.
Let's just make sure that we drop down one more.
Perfect.
It 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.
We're gonna 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 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, are Claire fields, all the things that we're going
to do, and it's all, MVVM a fight up.
So now what we can do is instead of 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 it.
And then what I could do is simply say, add person and then do person
dot, you know, Claire fields.
And then here I would do add to database, right, man, whatever
you're going to do now, this cleans up my view model a whole lot.
Look at how clean it is.
It doesn't have a person here, but what it also means I can do is come
in to here and I can just say person.
First name, right?
I, again, index in on those properties.
So I can just add those all here, but that command of post people is still inside
of my, um, 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's still work.
So James Monte mag now that's, I guess is my first name, but see how
the label updates automatically.
And I'll say Monte mag.
Now 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 there's at least helps the person that submitted this on
YouTube and on Twitter to me, they were having issues with their source code.
And that is definitely one of the reasons why that they're running into this thing.
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 at super appreciate that.
If you like this video at all, give it a thumbs up.
I really appreciate it.
If you have some source code, you want me to fix up, live over here.
Also send it to me.
I feel free to reach out to me on Twitter.
Um, my email is in the about page on the YouTube.
And of course, like I said, if you liked this video, give it a thumbs up.
I'll say that subscribe button.
Super appreciate it.
But that's going to do it for this video.
Uh, thanks to the person that submitted this code.
Thanks for watching and have a good one.