Renavigating w/ a NavigationService - WPF MVVM NAVIGATION TUTORIAL #2

today i want to continue exploring navigation use cases and specifically i want to go over how we can support re-navigating after some kind of action so previously we created this navigate command and this is used in the views so for example we have our account view with a navigate home command and then on our account view model we use that command which is the navigate command to navigate to the home view model and that just does the navigation for us but perhaps we have a command such as a login command which we're going to implement in this video where we have to log the user into the application actually authenticate them and then navigate well if that's the case we can't use the navigate command because this is specifically dedicated to navigation so we need to integrate our navigation with the login command that we create so let's begin by first showing off what i've changed since last time so now we come to the home page and we can click start which takes us to the login page so here i would enter my credentials and then log in and run the login command and then re-navigate me to the account view via the account view model so let's begin by setting up this login command on our login viewmodel so i'm going to add a new command this will be the login command and we will inherit from command base so that all we have to do is implement the execute method and i'll go ahead and make this public tool and for logging in we're not actually going to do any advanced authentication because that's obviously outside the scope of navigation so i'm going to do in this command is just pop a message box and we'll say logging in and it also be nice if we could get the username so we'll get that do some string interpolation here so we're going to need our login v model for that and let's just get that into a field because that is how we're going to access the username that the user types and now we can just grab the username from that viewmodel and that is logging in after logging in i want to navigate to the account page and the way we do navigation based on what we implemented last time is by setting the current view model on the navigation store to whatever view model we want and then the main v model grabs that current v model and updates what we're displaying in the application so all we have to do in this login command is get our navigator and set the viewmodel that we want so we are going to refactor this in a bit but let's start off by just getting this to work so let's get our navigation store in here because that's obviously where we need to set the current view model for the application and now these are all the fields i need so i'll generate a constructor now and to go to the account page all we have to do is set the current view model on our navigation store to a new account view model and this takes the navigation store so we can just pass that in because we have it now we just need to set up this command so in our login view model let's set the login command to a new login command this needs this viewmodel instance that we're creating in this constructor so we can just pass that in and we need the navigation store as well which we can get through the constructor so let's generate a parameter for that and we have to update our command on the home view model where we navigate to the login v model because this constructor that's used in our navigate command as the create viewmodel callback now needs the navigation server which we conveniently have right here now let's go to the login view and let's log in here we go so we hit our breakpoint for our message box step over that show the message box and then we're going to go to the account view model let's just continue and there we go we're on the account page and we can go back home so all the navigation that we want is working so if we look at our login commands we're doing this navigation right here and if we look at our navigate commands we're doing the same kind of navigation so we kind of have our navigation logic where we set the current viewmodel to whatever we want in multiple different places so i want to consolidate this into a service where we can call some kind of nice clean function called navigate rather than going through and sending the current remodel and you guessed it this is going to be the navigation service and we're just going to have a single method to navigate and then we'll grab the logic from our navigate command and put that in the navigation service so we are going to need our navigation store in here let's get a feel for that and then we will need a create viewmodel callback in here as well so actually i'm just going to cut this out of my navigate command and this createviewmodel callback is generic so it returns a tv model which means our navigation service is going to be a generic for a tv model as well and we are going to need the same constraint that we used in our navigate command so we can copy that into the navigation service and let's import viewmodelbase and there we go all navigator is going to do is set the current v model on our navigation store to whatever view model we want to create and let's get these fields to the constructor and now we can simply use the navigation service throughout our application so rather than our navigate command taking a navigation store and a callback to create the viewmodel we can just get a navigation service in here and make sure you import the right navigation service not the one from system.windows.navigation we want to use our navigation service and quite simply let's just regenerate our constructor whoops and we got to make this generic too so this needs to be for our tv model type which is if you model base and now when we execute the navigate command we are simply going to navigate and that will navigate to whatever viewmodel is configured in our navigation service callback to creatorviewmodel and now we can also simplify our login command so i'm just going to get rid of this constructor because we're going to have to generate a new one anyways and get rid of the navigation source so now we will use our navigation service and our goal in the login command is to navigate to the account view model so that will be the generic for our navigation service and now let's generate a constructor and then instead of manually setting the navigations to a current view model in this command we can simply use our navigation service and navigate when we are finished and now we no longer have to manually instantiate the account view model in this command all this command really needs to do is log in and then navigate so much easier to read and understand this code as well and now let's update our constructor throughout the application because we now have to use our navigation service now i will admit this is kind of a pain to instantiate everything we need here and it's a lot easier if we're using something like dependency injection but we do have to manually instantiate our navigation service and this takes the navigation store and a callback that takes no parameters and returns a new login view model and here we have to pass in our navigation store as well so as i was saying lots of things to set up here and also you might want to consider taking the navigation service through this home b model constructor rather than the navigation store just to get all this complicated instantiation out of the v model or you could introduce something called a create command delegate which i go over in other videos but that's outside the scope of this video let's continue fixing our constructors so i'm just going to copy this navigation service instantiation and use that in the account view model this time going to the home view model and last but not least the logging command now needs a navigation service to go to the account view model so we can go to the login page login here we go we're going to re-navigate and now we're on the account page so we've introduced this navigation service so all navigation can just go through the simple service and call navigate and it'll automatically set the navigations to current view model to whatever view model we wanted to create when we instantiated this navigation service and that's a lot easier to use in our commands because now all we have to do is call navigate whenever we want to navigate look at that very nice so that is where we're going to wrap things up simply show it off how to navigate after an action and some type of command rather than using a dedicated navigate command so that we can do other things like logging in and then we added the navigation service to simplify navigation so hopefully this helps you accomplish your navigation desires in your own applications if you have any questions criticisms or concerns be sure to leave them below in the comments section other than that leave a like or subscribe for more and stay tuned for more navigation awesomeness thank you

Channel: SingletonSean

Views: 5,424

Keywords: wpf, programming, visual, studio, xaml, custom, control, generic, system, line, display, timer, template, binding, behavior, c#, how, to, series, tutorial, easy, time, maintain, package, design, part, event, code, framework, static, state, default, view, style, wrap, panel, stack, scroll, viewer, bar, first, width, usercontrol, command, async, exception, handling, func, action, task, void, model, layout, user, password, box, mvvm, validation, notify, error, icon, class, callback, delegate, relay, clean, simple, switching, views, navigation, nav, modal, viewmodel

Id: Hslw1czgvsc

Length: 8min 18sec (498 seconds)

Published: Sat Apr 03 2021