Switching Between Multiple Views in MVVM - EASY WPF (.NET CORE)

a lot of people think that WPF and mvvm is difficult my goal is to make it easier today we're going to be going over how to switch between views in WPF using mvvm architecture so what I have going on here is I have a demo project we have this main window we have a few buttons here we have a home button and an account button then what I want to do is click those buttons when I click the home button I wanted to share this home view and then when I click the account button I wanted to share this account view that I've made it very simple and then since we're using mvvm I have a home view model and that's gonna contain everything from my home view all the data for it and then I have a count view model as well and they all inherit from this base view model which is just a simple empty view model just a empty superclass so now I have this main view model and this is gonna be the view model that is like the view model that contains my general application so some of the properties that it's going to have is the selected view model this is going to control the navigation between view models so what it needs is a property called selected me model and the type of this is gonna be that base view model which is that super that's super class for all of our view models so now that we have the set what we want to do is we want to actually bind to this me and view model so that we can read the selected view model property and do that let's just go into our main window and set the data context and that's gonna allow us to bind to it we're just gonna make a new view model new main view model okay so now that we have that set up what we want to do is we want to bind to this selected view model on our main view model so let's go into our main window here and to do that we're gonna need what is called a Content control and the content control is going to have the binding in it so it's gonna bind to the selected view model and there we go okay so now what I want to do just to show you guys is I'm gonna set this selected view model it's you a new home view model just to show you guys what this does and then it it does it changes everything it's not what I wanted to do okay let's put in through there okay so let me start the application and what it does is it just shows it takes the hand view model and it just runs the two string on the home view model that's not what we want we wanted to show this home view that we made so to do that we need to go into our app dot saml and let's import the namespaces for our views and view models so we got the views and the view models okay and what we want to do is if we want to use something called a data template and what this is gonna do is this content control is gonna see it as the Selective view model it's gonna see okay I have a home view model so we're gonna set that here the X type to view models the home view model so whenever that content control has a home view model we wanted to show the hem view quite simple let's copy-paste that and do the same thing for the account view model we're one of the show and account view so we have that set out we won't be needing that anymore and now if we run the application we get the head of you that we wanted but what if I want to switch in between these for that we're gonna have to use commands so let's make a command here and it's gonna bind to an update you command which we haven't made yet and the parameter for this is just gonna be home because we're gonna want to show their home view let's go ahead and copy that do the same thing update view command again and this time the command commit command parameter it's gonna be an account and we should actually be good here so since we're binding on that main window our data context is that main view model so that's where our update view command is gonna have to be defined let's make a property here and it's gonna be an I command and we called it the update you command ins and we haven't actually made this command yet I'm gonna have to import now I command by the way so let's make that command I'm gonna put a new folder just call this commands commands commands and we're gonna make a new command a new class called the update view command make that public and of course we're going to have to implement the I command interface let's import that stove everything out in this update view command what it's going to need actually is our main view model passed through the constructor so we'll just call this new model and make the constructor I think I can actually select this generate constructor okay so that we have that and when this command is executed what we want to do is if the parameter equals home a parameter to string safer equals home we're going to set the view model it's at the main view model select a view model to a new home view model otherwise if the parameter is I believe accountants what we one we're gonna set the view model to a new account view model okay so of course there's other ways to do this you could use an enum and all those things it's probably a lot better to do that also instead of passing in like me and you might only mail abstract this to some kind of interface that only has a property for selective view model something like that but of course this is just a tutorial so we're keeping it pretty simple so we have that command set up let's go back to our main view model and we're just going to set it to a new update view commands which we're gonna have to import there we go and we're gonna pass this into it okay we actually can't do that so silly me let's make a constructor set it like this there we go obviously I shouldn't know that okay so now we have that set and let's go ahead and test this out it gets your work of course all right we can get rid of that and let's give it a go oh we have to implement that okay well let's Richard will also return true it can always be you can always help execute the update view commands okay that it doesn't do anything so is is this even being Cod of course it is not all right let's go to our output it is being called another problem is that we haven't implemented inotify property changed it what inotify property change does is it lets our view know that a property has changed on whatever we're binding to so what we really want to do is whenever this view model changes we want to let the view know hey our properties changed you need to come breed this and to do that we need to implement an interface called inotify property changed and we're gonna do that on our base view model so to all of our view models get it let's import that implement the interface and we're just gonna have a protected protected Boyd one property change and it's gonna take a string and I will just call it the property name and we'll say property changed dot invoke say this and E or not property name I think we need to make a new property changed event or guess what we have to do and that's going to take the property name okay all right so now we have that set up and now we can go back into our main view model and when the Selective view model changes we can tell the view by saying all my property change the name of the property that is selected view model okay let's give this a go and everything should be okay so now I click that home account just like that you can switch in between your views as many times as you want you can make this a nice little fancy navbar some kind of drop-down you can do anything you want and the only got to do is just use this base code so anyway anyways guys that's it for today I hope you guys learned a little bit about WPF finding all those things switching views and thank you guys for watching be sure to leave a like comment or subscribe thank you

Channel: SingletonSean

Views: 43,307

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, multiple, view

Id: 1_cUgpWqS0Y

Length: 12min 28sec (748 seconds)

Published: Sat Oct 05 2019