From Code-Behind Code to MVVM with XAML and C#

in this video we're going to learn how to take the code behind code and take that into a view model so you can get started on implementing mvvm in your application so here we are in visual studio 2019 this is just a file new xamarin forms application you can see it on the left example code that comes out of the box on the right you can see it running on the ios simulator and typically if you've watched multiple of my videos then you know that i start with updating the title i'm not going to do that this time because this application will allow you to update the title yourself with anything that you want wow i'm just giving you all that power that is crazy right so let's see how to implement something with a code behind and from there let's see how we can transform that into something that works with a view model and and implements basically the mvvm pattern so for this i'm going to use a couple of things an entry and a button so let me remove all these labels right here and i'm going to add this little entry and i'm going to give this a name just so we can reference it in our code behind so let's name this my entry you can name this anything you want don't need to add anything else here well maybe a little margin so that it looks nice so let's make it 20 and 20. then let's add a button here that doesn't need a name but we're going to add the clicked handler so we have a button clicked here already and let's give this a little text so that it shows up so update title there we go and whenever i save this with xaml hob reload it will update automatically so that's really cool when you're running the app this works on the ios simulator also on the android emulator and also on your physical device if you're testing with that so that is a big productivity boost um so actually let me update this label right here as well so this is welcome to xamarin form so this is our our title label right here so let's give that a little name before we forget my title label there we go and now we have all the things set up so by giving this a name this is going to generate a variable in our code behind so every example page that we see here has a code behind which is named mainpage.example and the code behind file is then mainpage.xml.cs and you know you need to have that file because it needs to wire up some things for the example but typically if you want to you know implement mvvm um and make your test your code more maintainable and more testable then you don't want to put that much stuff in your code behind file because that makes it very tightly coupled to your ui and your code is in there and that you know let's just see so we got this in place now let's go to that code behind file and you can see that we have this button clicked handle right here and now we can reference the my entry um and the the my was it my title label there we go so actually let's just implement this code my title label.txt is my entry.text there we go so whenever we click that button now the label should update with whatever text we put in the entry now this is of course a very very simple sample but you know if you've built an app this way then you can imagine that this is maybe a form that you should fill out so it has a lot of entries a couple of buttons to reset the form and to save the form or to cancel things and that is all going on in this code behind it that makes it really hard to test right because all you can't do unit tests on these event handlers you would need to have automated ui tests that actually click the button for you and even if you do that it's very hard to get the outcome from that and so you know if you want to make it more testable and also you know it's very tightly coupled to the ui so whenever you want to change this button you have to switch that event around and do all the things so this is this is not really great right it's good to do maybe prototyping or if your application is really small to start out with this this is perfect but at some point you probably want to switch to a more structured way of doing your code well let's just quickly stop and restart the code right here so you can see that this actually works and then we're going to work on rewriting the same thing but now using mvvm so basically imagine that this is your application and how you're doing it and i'm going to show you now how to transform that into a more mvvm way so let's just do i don't know subscribed yet something you know trivial i don't know update title and boom you can see it updates to subscribe yet so that is that is pretty cool right it just does whatever we intended it to do now let's do this more in a mvvm way to do that the first thing we're going to add is the vm part of mpvm which is the view model so let's just add that which is just a regular class so i'm opening up the solution explorer here go into my shared project and right click on that and add a new class because it's just a typical normal class a view model there's nothing special about it so let's name this main page view model or a convention that is more specific to examine forms is maybe to use a page model the terms are kind of you know used together but this concept can also be used with uwp wpf basically any interface that works with example or not even example because mvvm is more like a pattern that that goes beyond the programming languages and that kind of stuff but you know i'm showing you this in xamarin form so main page model let's just name it like that the name doesn't really matter unless you're going to use a framework that has this convention but now i'm already giving you all this information that might be too much so let's just focus at the task at hand and in a page model or a view model you typically want to work with properties so let's add a property string for the entry so the entry value and make sure that it's a property that is very important in this case so a property is defined by adding this getter and setter right here and also let's add some a property for public string the title value there we go so same thing title value get set there we go and we need something that has the event right the button clicked event in kind of the mvvm way we are using commands for that so that also needs to be a property so let's make this a command it's not known right now i think we need to let intelli send solve this and we just need to add the using xamarin forms here at the top and we're going to make this change title command there we go again this needs to be a property to make the data binding work more on that in a little bit so now we have all of this setup and what we can do is now make this command to actually do something so this change title command is a new command there we go and that new command we can give an action so here we go you can see here the the intellisense is already helping us we can do an action execute we can do an action with an object so you can also provide parameters that go into this command and they can execute so you can actually determine like hey can this command execute right now so imagine you have a form and the form is not valid it contains invalid data and then you can set the can execute to false and whenever the control supports it the the control might be disabled or something like that um and there's a couple of variations that that you can do here but we're going to use a very simple form and i'm going to use an inline action right here you can also do this in a separate method if that's what you want but i'm going to use this this lambda right here and what this is going to do is just set the title value to the entry value so we're going to get this value here from this entry that's going to be put in the entry value and we're going to update the title value which is going to be the label here at the top the title we're going to update it with that and this button is going to trigger that command right here so that is what we want to do that is more the mvvm way and now suddenly you know if we call here to a method that is maybe in our service calling out to a rest api that is code that we can test and also if we want to change the view we can totally do that without you know having to go through the button clicked handlers and and whatever we just have to reference this command and you can change the complete view if that's what you want so now we have all this in place let's go back to our main page.example code behind so what we can do is basically throw this out so this is just a tiny optimization but again imagine that this is a big page we can delete all this code which is a good thing and the only thing you want to do here now is set the binding context and the binding context is where you specify like hey you should look at this view model i'm going to explain this whenever we are looking at the example so for now just set this to the new main page model there we go and now it knows that you know that is going to be where all of our mvvm kind of magic is is coming from so we have that set up so it's going to look at our main page model here and then here in our example here's where the real interesting things are going to happen so we can get rid of all this x name stuff right here so no more x name we're not going to do that um but what we're going to do is use data binding and data binding is a little bit of magic so data binding we that is that is something that is built into like the example into the binding engine that is something that is provided by xamarin forms in this case but also in uwp and and wpf and what we can do here is now for this text we are going to say binding so we have to have this this curly bracket right here and then we can say binding and then i'm going to say title value i think that was it so this has to be the name of that property so title value the name of that property that we've specified here and it has to be a property i can't emphasize this enough because if it's not a property it's not going to work it also needs to be public so we have that and then also we have to catch like the entry value as well so here we're also going to say text is binding entry value that's what we named it right and it's a bit hard because we don't get the intellisense because this view doesn't know anything about the view model that's behind it so you know it's it's it doesn't give you that intellisense there is a little trick to actually enable that um maybe i will make a little video on that later please let me know down in the comments if that's something that you're interested in and i can imagine that you will have more questions than answers from this video so if anything is unclear please let me know down in the comments and i will make follow-up videos on that um so now we have this set up for the text you know this is a pretty simple example um so the binding this typically means that you know the text that you're putting in here is going to into the title value that again the binding engine will take care of that and also you know the also kind of like the other way around that the title will be updated from whatever value that we put in there now for the button we still have this button click wired up right here um and we don't want to use events right we want to use command so we also have this command property on here and you can see the command parameter property in here as well if we want to put parameters in here but for now we're just going to do the command and we're going to again say binding and we're going to say what did i name it let's go to our view model right here our change title command there we go so let's just put that in here so you can see it doesn't just work for text it also works for commands it also works for the margin or basically any property that you can see here is a bindable property mostly so you can bind to anything that you want now this is going to trigger that command this is going to get that entry value and it's going to put it in this this title value so we got everything wired up here especially because you know the only thing kind of that you want to do in your code behind is set this binding context whenever you're using an mvvm framework that might happen automatically so i've also seen a very good video recently from my good friend james montemagno where he's talking about like when should you still maybe put code in your code behind and i think his answer in very short is whenever it has to do with your view it's perfectly fine to put code in your code behind so whenever you're maybe doing an animation or that kind of things it's perfectly fine to put it in your code behind please find the link here popping up on the screen or down in the video description below to get more info on that i'm focusing on the mechanics the the functionality the actual code so i'm going to show you this with a view model and i'm going to stop running this application and i'm going to run it again because i've changed a lot of code so let's see and i'm going to warn you i'm going to feel right here this code is not going to give us the expected result so you can see i didn't initialize it with a value now the the title value so there's nothing going to be here right now but whenever i put something in here our awesome title and i'm going to click the update title nothing happens and that is a very interesting thing i'm going to show you so if we go in here into our view model let's put a break point right here and we're going to see that this is actually called so you know everything is wired up um the command is called we can see the title value actually has our awesome title right here and i didn't change the value so um the the incoming value right here the entry value is still going to be the same but so but everything is working why doesn't it show and that again has to do with like that example kind of data binding engine because we need to let the ui know that something has changed so before that would happen kind of automatically because we were doing it in the code behind and we were referencing the example automatically so it knows like hey i've got this updated property and i need to show it in the ui now we kind of put this abstraction layer in between here in the in the form of a view model so we need to let the ui know in some way that it has updated now you might have heard this before if you've been looking into it and what we need to do is implement the i notify with the right thing here i notify property changed so it doesn't know this right now so let intellisense help us for a little bit we need to add the using system.component model there we go and then it will give us red squigglies and say we need to actually implement the interface let's do that and whenever we do that you can see we gain a public event property changed event handler so now other classes can hook into this property changed event and catch whenever a property is changed so and this happens automatically so whenever our example sees that a the the view model implements the i notify property change interface it will automatically hook into this property changed event because this interface says that this should be available right so the example binding engine will automatically subscribe to this property changed event and now it knows whenever a property changed that it should update the ui accordingly now there's still something that we need to do technically we need to you know each time let this that some property change we need to fire this event so we need to propagate that to the example and i'm going to add a little helper method for that that you can basically copy paste and use that so let's just add that right here public void on property changed there we go and string property name so that we specify which property has actually changed and what we're going to say is then property change we're going to check that for no because if if no one subscribed to this then it's going to be null and then we're going to have exceptions that's not what we want propertychange.invoke so we're going to invoke this event and i think the first parameter here has to be the sender so that's going to be this because this class is sending it and then we have to specify the new property changed event arcs and i think that has to have like the property name that actually changed yes so we're just going to specify that with our property name that we are getting into our own method right here so now that we've got this in place you can also do this on the setters for your properties of course but i'm just going to put it here in the command so let's just say on property changed and i'm going to use name of so we change the title event title value so let's do this title value right here and now we're going to let the example node ui know that our title value has changed and it should update that accordingly so let's stop and restart this one and see if that actually happens now this is this is a very annoying thing that you have to implement over and over again for each kind of view and view model that you might have so that can be pretty boring pretty quickly of course there are better ways to do this again let me know in the comments and i'll make follow-up videos on that on how you can do that automatically or again if you're using a mvvm framework then that might happen for you automatically already so let's hear our awesome title let's put it in here again and do update title and boom you can see that it now updates accordingly and we did that by implementing the i notified property change and this should be like the basics to go from your code behind code to um view model code if you're just getting started with this mvvm stuff then this is a lot to take in i fully realize that so just take it small tinker a little bit with this example see if you can implement your own kind of mechanism that you want to do and maybe take your current application and try to convert at least one of the things to more like your mvvm approach um and like i said a couple of times during this video if there's something that you cannot figure out please let me know down in the comments or maybe join the discord server also the link for that is in the video description um so you can ask questions to me and also other people in the community which is really great because they're very nice and always ready to help so go check that out i will definitely make some follow-up videos on you know more what is mvvm how to do a little bit more advanced stuff i guess maybe some other things that you give me ideas for down in the comments so thank you so much for watching another one of my videos please click that like button if you've liked this video and check if that subscribe button is already on as well because i'd love to have you as a subscriber on my channel everything else i would like to see you for my next video keep coding [Music]

Channel: Gerald Versluis

Views: 3,438

Keywords: Xamarin Forms, mvvm c#, mvvm xamarin forms, mvvm tutorial for beginners, code-behind to mvvm, view model c#, xaml data binding, .NET MAUI, dotnet maui, How to implement mvvm in Xamarin Forms, From Code-Behind Code to MVVM, view model c# example, model view viewmodel c#, mvvm xamarin forms example, mvvm xamarin forms tutorial, xamarin forms 5, xamarin forms tutorial, xamarin forms command binding, xamarin forms binding viewmodel, xamarin forms binding event handler

Id: AzGrLAh-ltY

Length: 19min 18sec (1158 seconds)

Published: Thu Aug 19 2021