WPF in .NET Core and MVVM Navigation - FULL STACK WPF (.NET CORE) MVVM #3

I feel like it would just be disrespectful for me to continue this series full-stack WPF without starting a WPF project by episode three so that is what we are going to be doing today we're going to start setting up WPF and one thing to take note of is make sure you have dotnet core 3.0 the SDK installed and you might actually upgrade your Visual Studio as well but that is required to use WPF with dotnet core already let's get this party started let's go to our solution and we are going to add a new project and I really don't like this window it's so hard to find what you need in my opinion like where the heck is it WPF done that core okay and we're just going to call this simple trader dot WPF I guess create that and there we go right off the bat we have our WPF project I'm actually going to delete this console app we don't really need it anymore that was just for demonstration purposes we'll just remove that from the solution and this will be our new starter project it's the first thing I want to do is I want to add references to our domain layer and our entity framework layer so we can use our services user didn't mean there we go okay and then one thing I like to do is just create some folders here so I have one for views and we'll have one for view models as well because we are doing M V V M okay so if we look over here we have this app demo and if we open that we see this start up your eye and it points the main window dot zero which is just our main window so that's what tells the application to share this window when the application starts but I don't actually want to do this I want to handle all the startup stuff in the code behind for the app that's animal and the reason I want to do that is because I want to set some properties on the main window when the application starts and this will be important down the line when we get into to dependency injection and all those kinds of things so it's very simple to do so we can just override one startup and then all we have to do is create a new window so we can say window window equals that main window that we have over here and then all we have to do is window dot show if we run again it's basically the same thing as before there we go so now we have that set up should need this app dogs ammo right now and what I'm actually gonna do is we are going to create our first few model and that's gonna be the main view model so it's basically gonna be the root of the application it's gonna control navigation all those kinds of things and it's gonna be public and we're actually gonna have a base class for our view models and that's just gonna be call it view model base and we're not gonna do anything in here just yet but maybe motto is going to inherit from view model base so I have done a little bit of wire framing for some reason I just did it in the video because you know I was already there I figured might as well just do it in Visio it's probably definitely not the best wire framing solution but as you can see we have a pretty simple wire frame anyway so this is what we are going to implement I think first thing I want to do is I want to get this little navigation bar together and to do that what I'm actually going to do is I'm going to create another folder and I'm just going to call this controls so inside here we'll create a new item and it's just going to be a user control and we'll call this navigation bar all righty and just looking at this I can tell you're gonna have to vers so if we go to our very definition for a definition we'll have a height of Aldo and another height of all goes so the grid it's definitely one of the most powerful W WPF controls or WPF components I guess yeah it's control so we have our grid we have row definitions throat one Row two and Row one that kind of just looks like looks like a label so we'll put a I'll do a text block and inside the text is just going to be simple trader and then I should specify the road that we wanted him we won't even grow in row zero that's implicit by the way by default it's for zero but I still like to explicitly state it so that's our first row in our second row it's gonna be another grid okay and we should specify the row is going to be Row one and we have some columns here as you can see column 1 2 3 4 so we are gonna add some column definitions make the width:auto and there we go we have 4 columns and I actually want to put another column at the end and that is star star basically means it's going to take up the remaining space so it's this column right here it takes up all the remaining space and then let's do some I think these are going to be radio buttons because we only want one selected at a time so we're gonna have a radio button and actually gonna have it's going to be grid 0 or a grid column 0 and then we're gonna have four of them calm one two three and we'll give them some content so this won't be home copy that portfolio by and so okay and then we'll have to restyle these because they don't really look like a navbar right now but we'll get into styling in just a little bit so we have this navigation bar it's all and a little self-contained control and if we go back to our main window what we can do is we can first import the namespace so if you do xmlns will name this controls so that's the name of the namespace and then if we just add the namespace that the navigation bar is defined in which is simple traitor WPF controls a navigation bar or just simple traitor WPF controls we can put that in here it actually autocompletes which is really nice because be a pain that type out and then what we can do is we can use that name space down here so we start with controls and our navigation part pops up and there we go and it won't it actually kind of like freaks out this is just so common with WPF it always freaks out says it doesn't work but if you run the application you should be okay so let's give this a shot and there's our beautiful navigation bar it's gonna need some work definitely okay so obviously this navbar looks awful and I don't like it being awful so we're gonna go over styling right now let's create a new folder not that new folder and we'll call this Styles and we're gonna start off with well it's gonna be a resource dictionary that's where you usually define styles and we're gonna call this common and what Commons gonna have is just well common things you know like default colors so we'll have this green color this green color and maybe a font those kinds of things alright so I have to go snag these little hex values for these colors but anyways we got both of these so the first thing we want to do is add a little label here little comment colors and we're gonna add a color so we're gonna call this color primary one and it's just gonna have this value it will copy that and we'll call this color primary two and that one's just gonna have this this is like the darker green this one's the lighter green and once you have color is what you can do is you can use those to create brushes and brushes are what you can use for backgrounds and stuff on controls so we're just gonna have a solid solid color brush we're gonna give this a key of brush primary one and the color of this brush is going to point to this color primary one so that's what that's why the key is important is because that's like the identifier of the resource and you use static resource to call that key name and then we'll copy this we call this brush primary two and then I'll point to color primary two now once we have this resource dictionary defined what we can do is we can go into our app zamel and I believe what you can do is you could say resource dictionary and then you can merge in dictionaries so what we want to do is we want to tell our application to use that dictionary this common resource dictionary that we just defined we want to use that in this application so merge dictionaries and then we're just gonna have a resource dictionary and the source is gonna be hopefully wouldn't mess this up but I think it's something like styles such common sam'l looks like it works not entirely sure but now that we have that what we can do is our application knows to use these colors that we just defined so now if we go back to our navigation bar we can give a background to these elements I believe so if we say background static resource and there we go we have our brushes defined and we want this brush primary one and as you can see we now have our brush it's awesome and then for this one we want a background of brush primary - there we go okay so now if we run this colors are working got a little bit of style it definitely still need some work though okay so I feel like I'm just dancing around the whole mvvm thing so what I want to do is I want to start setting up like a little bit of a mvvm framework that we can work with and the first thing I want to do is I want to get navigation between views set up and I wanted to be pretty clean too so the first thing I want to do is I want to create a few more view models that we can switch between and we'll just have a home view model and we'll make that public it's gonna hear from view model base and then we'll also have a portfolio view model so the portfolio view model that's like shows all the users like stocks and purchases assets all those things and that'll be a base view model view model base as well so if we go back to our wireframes I'm going to show you guys so we have the portfolio view it shows all the assets and the home view as well it's just like what's going on in the market today we're gonna know all that a little bit later though so we won't actually need these for now we can close out of those and what I'm going to do is I'm going to create a new folder and I'm gonna call it state so it's gonna handle that the state of the application everything in here and one of those things is going to be navigation so I'm going to create a new folder called navigators and we'll add an interface for an EIN navigator now what is an eye navigator going to do well it's gonna hold a view model base and the view model base is going to be the current view model of the application and it just needs to be retrieved that doesn't need to be set and the reason it doesn't need to be set is we can do all that in we're gonna be doing all that in the command and this command is going to be update current view model command and that just needs to be retrieved as well okay so I actually decided we will need a setter on this so now we have that let's create a new item called a navigator it'll be public and it'll just implement a navigator and we have this care of your model this is just gonna be a simple getter and setter for now well update that later and then we have this update current view model command and it needs an implementation of I come yet now anyways what is an eye command it's basically just it's really important for data binding in WPF so what you can usually do with buttons radio buttons most things that can be clicked you can bind a command to it and then whenever it's clicked it'll run this I command so what I see a lot of people do is they create in I commands called a relay command and what a relay command will take is just a function so whenever the I command is ran it'll just run the function that gets passed in but I'm gonna do something a little bit different what I'm gonna do is I'm gonna create a new folder called commands and basically I'm just gonna have a class per I command that I'm hoping it'll make things a little bit more decoupled and reusable so I'm gonna call this the update current view model command and it's gonna take its gonna be in I commands so we're gonna implement that interface and it has these methods can't execute I think I'm going to set this just the Chur so it can always execute we might look back on this later and make some adjustments and then execute so this is what gets run when the I command it's it's what gets by the I command whenever you like click a button in the view or something so this update current view command what I wanted to do is I wanted to take an AI navigator import that we're going to pass the I navigate er through the constructor so you can just generate that and then when this is executed I want it to update the current view model on the navigator so one thing I want to do is I want to look at the parameter that gets passed in I want to see what the parameter is and then create a new view model based on that parameter so what I'm going to do is I'm actually going to create a new enum just in our I that I Gator and we'll call this view type and this is what's going to get passed in through the I command execute method it's going to be the parameter of the command so right now we just have a home view type and a portfolio view type we'll add a few more later and then what we're going to do is we're going to check if parameter is view type then we're gonna create we're gonna see what the view type is so we're gonna just do a cast on parameter you type parameter and then we're just gonna do a little switch statement here so switch one of youtube I think we can generate this yeah so you control dot you can add all the switch statements so if it is a home the view type is home we can take our navigator navigator instead the current view model to a new home view model we will have to import and then if the view type is portfolio we'll just set it to portfolio view model okay so now we should be good with this command and now we're just gonna go back to our navigator and I'm just gonna set the commands right here up update current review model command and it's just gonna take this because this is a navigator looking back I'm not entirely sure if I like this command being on the Navigator object so we might actually change this later but it's not too big video because we did put that command into its own class so we can pretty much put it wherever we want so basically whenever this command is executed going here our navigator will be set to this navigator and then I'll just update the current view model on the navigator okay so that should be good with our navigator now if we go back to our main view model I actually want this to have a navigator so we're gonna have an eye navigator just a navigator it's gonna be a simple getter and setter and for now let's just initialize it to a new navigator okay so what I want to do is I want to go to our navigation bar and I want to bind to that update view command on the navigator so go to our rated radio button and we can see we have this command and we're just gonna bind to let's go to our navigator we want to bind to update current view model command and then we're gonna pass a command parameter and the command parameter is gonna have to be one of those enum types so what we can do is we go back to our imports we can call this those name this one nav and that will point to the navigators namespace and inside this namespace we can access that Univ that we made I believe that's the X type nav view type dot if I just type in home maybe I don't know it made should be ecstatic that might work yeah yeah there we go that'll work so we can copy this and we can move it down to our portfolio and there we go so this is just another one of those things with WPF where it shows errors but once you build it should be okay now there is an issue and that is it doesn't really know where to find this command and to tell it where this command is we have to set the data context of this navigation bar so the data context will be a navigator because the Navigator has this update current few amount of commands on it so if we go into our main window we can say data context equals and we're gonna bind to navigator but now there's another issue because now this main window it doesn't know where to find a navigator and so what we want to do is we have to set the data context of this window to something that hasn't navigator and that's going to be our main view model so the way that we're going to do this is in our startup application we can have we can actually do this in code so we could say window that data context equals new main viewmodel okay that's now I think what I want to do is I want to just verify that this works gonna put a breakpoint probably not right there let's do a breakpoint right on this switch statement and let's give this a shot right off the bat so click that and it looks like it's working as it'll go down here set the view model and then let's just verify it works for portfolio as well and it does okay so our command is working so what we have to do now is what actually let's let's go back here as you can see there's really nothing being shown here like we can switch between these all day but there's nothing being shown we want to actually show use for these view models and the first thing we want to do is we want to go into our main window and let's create some rows in here so we're gonna have two rows right now whoops let's give them Auto and we'll give the second one star so the first row will take up as much space as its size and then the second rail will be as big as possible so our navigation bar is going to go in the first row and then our second row is going to be something called a Content control okay and its content is going to be the current view model I believe that's what I call it it yep current view model I should just straight up copy that so we get it right it's gonna be the current view model on the navigator and this doesn't need to be like this just can just be a single liner slash at the end so now if I run this oh I should give it a rail real quick let's do that grid Row 1 okay so now if I run this we see nothing and the reason we actually see nothing is that we are changing these but we're not we're not telling the UI that the current view model is changing so this current view model is what we're binding to but whenever this carry model changes we're not telling the application that we're not telling the UI that changed so what we actually have to do is we have to implement an interface called inotify properly changed so we can implement that import and implement all that stuff and then what I want to do is I want to create a full property here so we're gonna need a private field for the v-model just call that current view model and then the getter is just gonna be simple you know just get the current view model but then in the setter what we want to do is we want to set the curvy model to the value but then we want to tell the UI that the value changed and what we're gonna do is we're gonna create a new method here we'll make it protected and it's just gonna be a void we'll call it on property changed and it's gonna take a property name and all we're gonna do is we're going to take our property changed event and if it's not null and we're going to invoke it with this is the sender and new property changed property changed event args and that just takes the property name and this is what's going to tell the UI that the property changed and the way this works is that it sees that this class implements identify property changed so then it will subscribe to this property changed event and it'll update the binding that has the property name that is associated with the event handler so what we're gonna do is we're gonna call one property change we're gonna raise the property changed event and we're gonna give the property name of current view model which is just this so the UI is gonna be like 'hot current view model changed I need the refresh that bind and get the value again so we can actually see this in action so I'm gonna click home and then this one property changed event gets raised and WPF is like oh I need to go see what the new view model base is with the new current view model is and it sees it's a home view model and right now it's just displaying this ugly text because we don't actually have a view associated with the view model but we have it updating click portfolio that updates as well so we talked about this i-95 property change and we're gonna have a lot of classes that use inotify property change so what I like to do is I'm gonna create a new nope I'm gonna create a new folder and we'll call this models and I'm gonna create a new class called observable object and it's just gonna be just gonna have all of this stuff in it so just take all that out of here put it in here and then we'll implement inotify property change property change and then what you can do is never touch this class again in your life and just this can just inherit observable object and then it can just use all the property change stuff and everything will still work cool so I think one last thing I want to do for this video is I want to create some views so we're gonna have home view these are just user controls so I'm going to home view and then we're also going to have portfolio view there we go and then for now let's just just throw a textblock in here just so we know it's working so we get portfolio save that get out of here and then we'll have the home viewer will just say home X out of that and then what I want to do is I want to instead of having that text that came out where it's just like simple trader home view model we want to actually show the view associated with the view model and what we have to do is go into our app dot saml we can set something called a data template and what we're gonna do is we're going to say we're gonna set the data type for the data template to be our view models and what this will do is whenever the view model is selected in this content control it'll say oh I have a let's say for example I have a home view model as my content it'll go into this Abkhazian one say okay if there's a data template for a home view model then we're gonna show that we're gonna show whatever the data template is so that don't make sense in a little bit let's if that didn't make sense let's import our view models namespace and then we're also going to import our views namespace so this data template it's going to take a type I believe do home viewmodel so this will be the data template for a home view motto and whenever a home view model is set we want to actually show a home view so we can copy this and do a portfolio view model and for a portfolio view models we want to show a portfolio view so now if I run this click home says home click portfolio it says portfolio and there we go we have our little mvvm framework kind of setup anyways that's gonna do it for this episode we got the WPF thing kind of started around here it's definitely still gonna need a ton of work but it's what the series is all about we're doing fun things over here thank you guys for watching if you have any comments criticisms or suggestions be sure to let me know in the comments and other than that thank you for watching and be sure to leave a like or subscribe thank you

Channel: SingletonSean

Views: 50,917

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, full, stack, entity, framework, model, dto, dao, data, access, orm, object, core, .net, c#, service, layer, onion, walkthrough, project, finance, stock, trade, trading, development, uml, visio, create, read, update, delete, factory

Id: N09UM-RPGGM

Length: 33min 58sec (2038 seconds)

Published: Thu Dec 05 2019