Handling WPF Routed Events with MVVM Commands - EASY WPF (.NET Core)

commands are an important part of mvvm with WPF that allow you to decouple your view and your view model that being said today I'm going to show you guys how you could handle any WPF event with a command in order to keep your view and your view model decoupled so for this example I just have a to-do list application set up so let's start from the top here I just have a main window and inside I have a to-do list view and that's dualist view has a list view inside of it that binds to a collection of to-do list items and that to-do list items collection is located on this to-do list view model and we can access this binding because the data context of our to-do list is a to-do list view model so what I want to do is I want to take a look at this to-do list view model and I see that I have this load to-do items command and what I want to do is I want to load all of the to-do list items when the application starts so I have this command all it does is set the to-do items on my to-do list view model to a new collection of to-do items that I get from this method down here which isn't really important one thing that this is an async void method which might scare some people but it's okay in this situation in my opinion so now back to our to-do list view model what a lot of people will do is they will run this load to-do items command in their constructor so execute it just Penniston nog so we don't need a parameter and if you run the application this works out just fine so as you can see we have successfully loaded everything but this is a little bit of a problem because the constructor is doing too much work a lot of people don't like when their constructors actually execute complex logics such as retrieving items from an API in this example and executing a command so what a lot of people will do instead is they'll fall back to their view and they'll create a loaded event handler and what they'll do is they will cast the data context which in this case is that's do list for you model so cast it to that and we're gonna have to import that and then they'll just execute the commands from here now this is a problem it'll work but it's a problem because now your view explicitly knows about your view model and that breaks the mvvm principle of separating your view from your view model because now they are strongly coupled together and personally I'm not really one to be like oh you have to follow every mvvm principle no matter what but in this case you really do not need to do this and there's even a major feature of WPF that allows you to not have to explicitly use your view model for this event handler to execute this command so what I suggest you do instead is you use dependency properties which are a fundamental concept of mvvm so what we'll do is we'll create a dependency property up here with this snippet that I have hopefully you have this too otherwise you'll have to type out all this code but this is going to be an I command and we're just going to call it the load command and then last thing we need to do is set the type of the inner class which is the to do list and also we need to set the default value of this command in this property metadata to null and that'll be important in just a second but let's go ahead and import everything else clean this up a little bit and there we go so now we have this load command and down here in this event handler we're going to check the load command and if it's not null so if the user has actually provided a load command we'll execute the commands when the view loads and just pass a nog so we don't have a parameter for our command so now as you can see here the view has no idea about the view model and they are completely decoupled but now what we have to do is we have to set this load command on this view so that it gets executed and where we do that is up in our main window where we define this to do list user control and this user control has that load commands and what we can do is we can set the load commands right here as you can see it autocompletes it recognizes that dependency property and we can find to our load to do items command and there we go so the reason we're able to bind to this is because we have set the data context as our to do list view model so we have access to all the properties on that view model and now if we've run the application we will see that our to-do items still load so overall what we did was we bind it a command we loaded the user control and saw the command wasn't null and it's simply executed the command and we have successfully decoupled our view from our view model and added additional functionality that we needed now the most important part about this is that you can set this up for essentially any WPF event so for another example it's going to our to-do list and let's say I want a command to execute when the selection changes so when the selection changes on this list view when I select a different amount of items I want the view model to be notified throughout command and let's actually set the selection mode to your multiple so we can select the multiple items it's now back in here I have this list view selections changed and we're going to create a new command let's create the dependency property for that command and we'll call this the selected to-do items changed command and the default value again is null and the owner class will be that's duelist so we go with that let's clean up a little bit and back down in our event handler we'll do the same exact thing so our selected to do it's changed command if it does not equal null then we're gonna execute it and now we are good here so actually what I want to do here is I want to send the currently selected items up to my view models so we're actually not going to have a parameter of null what we're gonna do is we're gonna give our to-do list a name so we'll call this LV to do items and then I can set the parameter to LV to do items dot selected items and there we go so now back in our to-do list view model let's actually create a command to handle this so we'll call this the selected well let's call the same exact thing selected to-do items change command just a simple property and then we're gonna have to create this command as well let's create a new item and we'll call this selected to do it was changed command I wish I just copied that name and then it'll be a public class and it'll be an I command just spell it wrong implement that interface and then this command is gonna need well it's not really gonna need anything so what it's gonna do is let's actually just show that we can get the items from the command so let's just bind this command now yeah let's go into our main windows so our selected to-do items change to command there's gonna be a binding to this command and there we go but we haven't actually set the commands let's go ahead and do that and I think one other thing we have to do is return true for Ken execute so we can actually execute the command without throwing an exception so now let's go ahead and run the application and we should be able to handle the selected to-do items changing in this command so select that and there we go our command executed we can look this parameter and we get the to-do items that have changed so you can do it with multiple items and then all you have to do is cast these items to a collection of to-do items and then do whatever you need to do with them you can handle this command or handle this event with a command so that's the power of command dependency properties they allow you to handle WPF events while still decoupling your view from your view model anyways I hope you guys can implement this in your applications and keep your views and view models decoupled if you enjoyed the video be sure to leave a like or subscribe for more if you have any questions criticisms or comments be sure to leave them below in the comment section but other than that thank you for watching and I hope this made WPF a little bit easier for you guys to understand

Channel: SingletonSean

Views: 9,365

Keywords: wpf, mvvm, easy, hard, difficult, switch, views, microsoft, visual, studio, binding, viewmodel, property, inotifypropertychanged, class, interface, user, control, window, learn, how to, teach, architecture, pattern, new, correct, switching, toggle, button, content, main, command, icommand, programming, tutorial, decouple, view, routed, event, clean, code, model, dependency, .net, core, .net core, load, data, api, callback, constructor, null, execute, startup, handle, handler, interactivity, attached

Id: Cx6YE86XzYE

Length: 10min 54sec (654 seconds)

Published: Sat Mar 14 2020