Creating a Card Control - FULL STACK WPF (.NET CORE) MVVM #6

really quick before we get started thank you to everyone who left suggestions in the comments on how to improve this series along with all of my videos your suggestions are greatly appreciated and with that we also now have source control for this project there's a link to that in the description so be sure to check that out if you need that other than that enjoy the video honestly I wasn't really excited to this video I really want to add more domain logic and build some more services things like that but instead we're gonna be building the control for the major index few model and I wasn't excited at first but I did some planning and I think we're gonna be doing some pretty cool things in this video I did some wire framing here I know Visio isn't really the best tool you don't want to use for wire framing but I was already here for my UML stuff so I figured why not so this is the major index card we're gonna have a card that's going to display all of the information for each major index and then we're also gonna create a major index listing which is just gonna have a bunch of cards in it and have this little header let's go ahead and create this major index card so I have our little wireframe sitting over here and we're just going to be using that as our reference while we do this so let's go into our controls and let's add a new user control and we're just going to call this the major index card okay so we have our user control first things first we see we have a border so instead of having a grid we're gonna have a border and we're gonna give this a brush I like to go with light gray because it's not too strong it's like the perfect little touch of border and then let's go ahead and give that a border thickness of one so that we can see it and we have these rounded corners so we're gonna have a corner radius we're gonna go with ten for now now inside this border let's go ahead and create our grid and this is just gonna have all of this content now first we want to have a little bit of a origin from the border as you can see we're a little bit far from the border on all sides and we'll just go with ten for now and then inside this grid we're gonna have a couple of rows let's create these rows and we're actually just gonna have two rows and you might be thinking why - there's obviously one two three but I want to have two because I want to have one row for this header and then I want to have another row that has all of this inside of it so our first row is obviously gonna have our little text block header here so let's create a text block it's gonna go into row 0 you don't have to specify Rosi row if it's the 0 a 0 with the row that's what the row is by default but I'd like to explicitly state it in case I move it around so then I remember to change the row so let's give this a let's give this a little bit of a font size we're just gonna go with 18 for now and then we have to set the text to this and it's gonna be a binding now what the heck are we binding to I actually forget what I named the property so let's go in here our data context for this card is going to be a major index which means we're gonna have access to all of these properties so for our header we're actually just going to bind to this type which is going to be one of these enum values so let's go ahead and update that in our control we'll say type now underneath this header we're gonna have another grid and this grid is going to go in row 1 and this grid is going to have some rows and columns so it's gonna have two rows and as you can see we have won these tubers over here and then it's also gonna have two columns and for the width I actually want these to be star because I want them to be equal widths it's now inside this grid we're just gonna have a bunch of text blocks so our first text block is going to be first row and first column and the text for that is just gonna be this little label for price and then we can actually just copy and paste this and in the column next to this is where we're going to have the actual price so we can about binding to price and that price is obviously this property on the major index so I want this price to come up as a currency with a dollar sign and everything and be formatted with decimal places and to do that we can use a string format and we can have a set of parentheses or brackets and then another set and inside here we can say 0 colon C so to format this first value the price as a currency so now I'm actually going to go ahead and copy all this and we're gonna paste it it'll copy paste and this is going to be for the changes and we're gonna bind that to changes again going to be formatted as a currency and instead of row 0 it's going to be in the second row now let's go ahead and test out this major index card throw some data in there and see how it looks so we're gonna put this on our home view and we're gonna have to import the name space where the major index card is located and we will just call this name space controls and it'll be in simple Trainor WPF dot controls so now underneath this header first gonna have to create some rare definitions here so that we can put it in different rare than the header ok so underneath this header we're going to have our control and as you can see the major index card pops up and that's going to go in Row 1 underneath the header and we'll give it some margin as well and the data context what is that going to be well we know the data context for our home view is the home view model and the home view model has a major index view model and then on our major index tree model we have these major indexes so this is what our data context is going to be because the data context for a major index card needs to be a major index and it just so happens we have one right here so our binding again it's going to be on the major index view model dot so one of these we're just gonna choose Dow Jones ok now let's go ahead and run this now let's put a breakpoint 1 dal joins real quick just to make sure that we get the data and let's hit the home view and we get Dow Jones and let's continue we know we have data but it doesn't pop up where is the data and before I talk about that let's actually add some alignment to this because as you can see it's all stretched out let's go ahead and give this some horizontal alignment left and there we go it's all the way to the left but still we have no data and why is this oh if we look at our major index view model Dow Jones get set but the UI is not told the Dow Jones has a value now and to do that we're gonna have to implement inotify property change and raise a property changed event so a lot of our view models are going to have to raise own property changed events so what I'm actually going to do is go through our view model base and this is going to inherit from observable object and observable object is something we created a few episodes ago but it's just a plain object that implements inotify property changed and has a method to raise property changed events for a property now that we have this on our view model base our major engine major index few models should actually inherit from view model base and now we can raise own property change so it's going to take a little bit more work on our properties so we're gonna have a private field up here just call it Dow Jones and our getter is just gonna return that but then our Sutter is gonna set the Algerians to the value that gets passed through the Sutter and then it's going to raise on property change for the Dow Jones property so that's a lot to type out which is why I actually made a snippet for it so check this out I mean a snippet called prop change and it generates all this and I can go through these values and it'll change everything automatically so this is Nasdaq see it updates it all there and then Nasdaq as the property name and I first enter and it updates down there and this this snippet is awesome if you guys want this snippet I'll probably put it in the description have a little link to download it so we can get rid of this property and that we need another prop challenge for S&P 500 and we can remove this plain property down here so now what's going to happen put a breakpoint right here if I round this click home see we had a plain card but then dal Jones gets set it gets set and then we're gonna raise his own property change let our UI know hey dal Jones has a different value now let's press Continue and there we go we get all the data that we want to display but as you can see this is kind of well it needs some work we'll put it that way so first thing I want to do actually is let's get some margin on the top so I think I want 0 10 so that's on the top and bottom and okay that's that's a little bit better and then let's go ahead and center this header that looks good and then let's give all these a margin of 5 so that's there's some spacing between everything and maybe that's all we need actually I went to horizontal align these two right because that's what we have over here so horizontal alignment right and there we go so another thing is it puts parentheses around negative numbers for this string format for currency and I'm actually okay with that I would the negative number is kind of cool but you can't go wrong with just the parentheses so our card looks good and now what I want to do is let's go back to our wireframes and I want to make this little listing you so it's actually X out of these wireframes I kind of get the gist to this one and I don't want to take up too much space with all that so let's go ahead into our controls and we're going to add a new user control and this one's going to be called major index listing and this one's gonna be very simple so all it's gonna be is we're gonna have two rows and then the first row is going to be that header so that's just gonna be a text block in the first row and the font size I think we're gonna go with 18 and then the text is just gonna be major indexes and this actually shouldn't be grade 1 it should be grid 0 now underneath this header is where we're gonna have all those cards and they're gonna be in their own grid so this is gonna be a grid with three columns and I want all three columns to be the same width so we'll give them star and this grid should be in row one and we want to give it a little bit of margin from the header so we'll do is you're a left-right and ten top bottom now inside here we actually don't need to import our namespace with the card control because it's already imported as local which is the same name space that we're in right now so we can go ahead and use that we'll get our major index card and let's see what do we we want to first put this in the column and give it a little bit of margin it's gonna be some left and right margins so 10 on the left the right and then 0 top and bottom and then we need to set the data context for the car to be a major index so our data context for this major index listing control is going to be our major index view model so we're going to already have all these properties here that we can bind to so our first binding will do Nasdaq and then we can just copy and paste all these and then we'll do Dow Jones and last but not least S&P 500 and let's update these columns and there we go our major index listing control is looking pretty good so let's go to our home view and instead of having this card here we're gonna have our major index listing and we're not gonna have the data context as a specific major index we're gonna have it as our major index view model and then let's go ahead and test this out click home and there we go we get all of our data now as you guys saw when it was loading it actually showed nothing so what we can do is we can go into our card and we can actually give some fallback values for all of these bindings so basically if the type is null then we can give a fallback value of we'll just call this the name and then the price the fallback value can be $0 and same with the changes so now if we've run this and we click on home while it's loading its see it had all those fallback values filled in instead of empty data and then our data loaded and we got all the everything that we needed and I actually think this major index listing would look better if it was horizontal aligned as the center and that looks pretty good actually now another thing we have this major index listing and then the data context is the major index few model I actually want to rename our major index view model to be the major index listing view model I feel like that's a better name so if we go over here we can rename major index listing view model and then it should prompt you with this just say yes if it doesn't prompt you with that make sure you also rename your class as well and then go into our home you mono we can rename this to be major index listing view model same with this as well [Music] and then we'll have to go into our home view make this major index listing key model it's a lot of things with renaming a lot because you have to make sure your bindings get renamed as well last thing I want to do for this episode is I want to automatically display the home view when the application starts so what we can do in our main view model is we can create a constructor and then we can use our navigator call the update current view model commands and we can execute that with a view type of home so when our application starts will automatically be on the home view and let's see this in action so there we go we're automatically on the home view but as you can see our radio button isn't selected it doesn't say that we're on the home view and to fix that we're actually going to have to go in turn navigation bar and we're gonna have to create a binding so this binding is going to be on the is checked property and when do we want that is when do we want this radio button to be checked well we want it to be checked when let's go into our navigator we want that radio button to be checked when the current viewmodel equals a home view model so the data context of this navigation bar is the Navigator so we have access to this property right in here so we can say is checked binding to the current view model but like what does that even mean how can you bind is check to the current view model because the current view model isn't a boolean value so what we're gonna have to do is convert the current view model to a boolean that will tell the radio button to be checked or not and to do that we're gonna have to use a converter so let's create a new folder for converters and inside here will create a converter will call this equal value to parameter converter and this can be public and it's going to implement I value converter which is what all converters must implement let's import that namespace and implement the interface and we get two methods here convert and convert back now convert takes a value what is our value our value is the current view model and another thing we can do is we can pass in a parameter and what do we want the parameter to be for is checked well we want that to be the type of a home view model and you'll see why in a second but to get that type we're gonna have to import a namespace we'll call this VM for view models and it'll just be a namespace that points to our view models and the converter parameter is just going to be X type this could be the type of the home view model let's actually move these onto different lines so we can see everything so now let's go to our converter and what are we getting we're getting the current view model and we're getting a type and the type is a home view model so what we can do is we can return a boolean here and the boolean is going to compare value to string and it's going to check if it's equal to parameter to string so the value to string will our value is the current view model on the navigator and let's say that's a home view model so if it's a home view model that means when we call to string the value is going to be simple traitor than W PFW models dot home view model okay it's now parameter equals the type home view model and when we call it to string on that it's going to equal the same thing so that's how this converter is going to work now to use this converter we need to set it on the binding and we're gonna have to import it so we will bring in that namespace converters and then up here in our user control we can add a resource and we can have a resource to our new converter and we can give it a key so we can use it okay and now let's grab this key and we can say the converter equals static resource the key let's run this and actually before we do that I want to show you guys how these strings match up so let's call this value string equals value dot two string and then we'll call this P string and that's going to be parameter to string let's put a breakpoint here and run the application so we hit this breakpoint our value equals a home view model okay and then our parameter equals it's the type of home view model so if we run to string on our home view model we get this simple trigger WPF W model is the home V model and then if we run to string on this type we get the same thing so it's going to return true and there we go our home radio button is check but let's say we click on portfolio we actually get an exception because we don't have anything in this convert back and it's just there is this exception and that's okay we actually don't want anything on convert back because we never we never want to convert from a boolean to a view model so to fix that we're gonna set this binding as one-way so whenever we check the radio button or whenever it gets set the false or anything it's not gonna send anything back to this current view model binding because that's not what we want it doesn't make any sense so let's go ahead and just add this to our other radio button down here so is checked and use the same converter and all we have to do is change this to be portfolio view model and then we can't actually do anything with these other radio buttons because we don't have you models for them just yet but this should be good but anyways that is gonna wrap it up for this episode so we created our major index card we created our major index listing which has all of our cards inside of it and then we went ahead and displayed that on the home view and then we also set our application to display the home view on startup thank you guys so much for supporting the series I hope you're learning more and more with every episode if you have any questions criticisms concerns be sure to leave them in the comments other than that thank you for watching be sure to leave a like or subscribe for more thank you

Channel: SingletonSean

Views: 8,567

Keywords: wpf, mvvm, easy, hard, difficult, switch, views, microsoft, visual, studio, binding, viewmodel, property, inotifypropertychanged, class, interface, user, control, window, learn, how to, architecture, pattern, new, correct, switching, toggle, button, content, main, command, icommand, programming, tutorial, full, stack, entity, framework, model, access, object, core, .net, c#, service, layer, walkthrough, project, finance, stock, trade, trading, development, style, trigger, storyboard, template, background, converter, ui, user interface

Id: E5P9BDo4D5s

Length: 26min 13sec (1573 seconds)

Published: Sat Jan 11 2020