WPF Controls with MVVM: ComboBox

design WPF controls especially the mvvm can be tricky so I decided to create a mini-series on the various controlled we have access to and IBF and how you can wire them up properly even if a video covers that control you're familiar with your pricing advanced use case or two there'll be a benefit in its first video we're gonna cover combo boxes including how to get the data about the selected item and how to cascade the color boxes now if you knew this channel my name is Tim quarry and it's my goal to make learning c-sharp easier this channel is full of video to explain of various parts of c-sharp I also a website where I provide full courses on c-sharp and sequel in fact I have a start to finish course that includes an add-on where replace the user interface with WPF user interface if that sounds interesting to you check out a link in the description to get the main course and the day PF and course for a total of only $97 there's a $10 discount off at normal price now if you want to check out the asp.net MVC an as well I'll give you an extra $15 off if you add that course of the bundle that's over 40 hours of real-world extraction for less than $3 an hour okay let's get started in our example project in this series I'm going to using the same starter application to make things easier if you want the code for this video click on a link in the description to do a blog post for this video now a starter project consists of a class library and a WPF project is configured to use the Caliburn micro which is my preferred mvvm tool if you haven't used calibre micro you for or if you wanna know more about it check out a video on this channel titled WPF and C sharp with mvvm using calibre and micro yep it's a pretty long title but that video will get you started in calibre micro then come on back here to watch this control video so let's get a quick preview of this project here just to get kind of comfortable with what the various parts are and we'll start in the library we have two models here an address model which is simply just an address so street address city state zip the full address is a read-only property that returns the various parts the ad is kind of put together and if I may also have an address ID which is just a number the person model is very similar we have a person ID instead an address ID a first name a last name of age a date of birth and is a live property which is a boolean these are sets so I can have various different types to play with so they are valid properties but I probably don't have all of these in here for example age particularly don't have age you have just date of birth but I I'm going to calculate the age of a person based upon a date of birth so account balance let's just say it's a checking account or accounted a company or whatever that's a it's a dollar amount that's why it's decimal we have a list of addresses so a person can have one or more address as they live it we have a primary address which is an address model and then full-name which is just their first and last name the only liar file in the demo library is the data access file now this is a fun one and one that you might want to take a deeper look at later on you can download the code off my blog but the reason why is because this is going to simulate go in the database it's an actual ego database I didn't want to have that that wiring up process and making sure you have a database if you want to run this on your machine so instead what I did was I created one method called get people the only public method besides a constructor so to get people method says how many people do you want in total and it defaults to 10 and it returns a list of people that would total 10 Afyon specify thing or whatever number you specify and so it goes through in it it looks through it says get a person what does get person do which is private it gets a person but the first name is a random first name the last name is a random last name B is alive status is a random alive status and so on and so forth we also get a random date we get an age in years of the person based upon a date and then also their account balance is a random decimal number that's between one penny and I believe $10,000 we also add a random number of addresses between 1 and 5 there's a random address as well and so here's my actual randomizer which looks pretty you know it's pretty small it's one line of code but it uses generics and you pass in a list and it gives you a random item out of that list so what lists so I have well here is three RS addresses cities States zips first name last name alive status which is just true or false and then this is used for the random date so that's what I did these are the the names I have said what's gonna do is take a combination then grab one street address it's gonna grab one city one state one zip code one first name one last name and there you go so in the code itself all I need to do is call the get people method and it'll get me if I use the defaults give me ten people each of which has one between one five addresses so that's what that code does it's you know it uses random quite heavily and if you wanna know more about random I'll cover that in a future video but for right now I can use these example code because the example code works that's really yeah I mean when it comes down to it publicly exposed is just this one method so that's all we use in fact I rehired up so on a day PF side of things I have the shell view which is my main view we're not gonna use multiple forms in this in this series we're just gonna use a shell view and just put our stuff right on that that view so that's the shell view which is just right now has row definitions and that's it the shell view model though has a bindable collection of type person model called people and in the constructor we set up a new bundle collection and we get the people from our data access so that's it wearing it 10 people when we bind or when we call this shell view constructor or sorry the shell view model constructor all right so that's it we've we've guys starting points we know that the people property will now be populated now since I use bindable collection which that's part of caliber micro so a bio collection handles things like alerting us when somebody has changed in the list so it will update on the view itself so let's go our view and let's start by looking over how we do a combo box that's kind of focus of this video is combo boxes although we're gonna kind of do a few more things just kind of show some kind of advanced use cases of the combo box let's start off really simple and so I'm gonna say combo box and let's just put it on grid row 0 just the top row it's gonna default that too anyways but let's specify it we're essay items source equals binding inside curly braces people so now we've done is we've bound this combo box to people and inside here we can say combobox Dodd item template and the reason I do this is it I have a template allows us to do more than just display one property if you want to if you have multiple properties in here if we want sew into the item template let's look at the data template and inside here you can basically do whatever you want now where I start really simple and we're going to say let's display a text block and the text is going to be binding full name that's it so remember the the person model has this properties auto property called this read-only property called full name and full name is just first name and last name but space in between so we're doing here is we're binding manually binding the item source to be people and we're then saying well in there for each item this is the data templates which could be displayed I want you to splay the full name well how does it know where that full name is was essentially to a for each and so it says okay each of the items in people is a person model therefore the properties on person model include the full name properties that's where it gets it let's just start right there real quick and we'll run this thing and before we do let's set the windows startup location equal to center screen so it starts on that screen there we go so now we have our shell view it doesn't look very nice but we've got this combo box in this space right here in fact we could put some padding around it but let's just leave it just like it is right now hit the drop-down and there you go now there are ten people in this drop-down that we can select okay so we have all ten people that came from the database they notice it starts at Bob Wilson ends at Santiago Hernandez if I to close this out just to prove that it is randomly generating that list Santiago Miller is the first one and Monique Martinez is the last one so it is generating a unique list every time so there we go we have a combo box wired up now the one thing that is not really caliber and micro standard is this item source equals binding people we don't have to do this in fact let me show you the other way I could do this if I have said X : name equals people that is the same thing and the reason why is it goes out and says okay I've got a combo box named people let me see if I have a property called people in my view model and it finds the people and it binds it to the item source but the reason I showed you the binding way is because there's some times that just doesn't match up maybe you can't name as combo box people may be something that's stopping you from doing that and so maybe it's because you have two different dropdowns on the same page that both pointed people well you can use the alternate method which is to have that item source equals binding people don't have both do one of the other but this way you can have a choice which way you want to go for now I'm gonna leave this as name equals people because it's simply one of the places it won't work is binding this text box here because the fact that it's nested it's looking at a operty of an object that's inside a list of people so you find it based upon the actual proper name and just say binding so you have to do both in these kind of scenario since we're doing kind of edge stuff not the the standard easy stuff like text blocks and text boxes and those kind of things but it's still pretty powerful stuff now I remember I said that the data template we're doing something really simple here so let's kind of operate game a little bit so let's add to what we display in the text box so actually I cut this out temporarily and I add a stackpanel I'll set the orientation to horizontal you don't have to I'm going to and now in the stack panel I can add multiple things so let's add back our text block which is our full name let's add another text block and we'll see the text for this one equals let's start off a space and - space and say are they alive : space don't forget we have that he is a live property there we go and now let's add a check box and say the it's got a vertical line of center I know I don't set them automatically there they're always up - too high for my liking so so the is checked property to be a binding and set its binding - is alive there we go so now we were buying Dean look we got close it out there we go so now we're binding not just one thing in the comma box but three things their full name some taxes has are they alive and that check box let's look at what this looks like so now our drop-down has Frank Wilson I alive yes down here Danielle Taylor is our Daniel Taylor is not and neither is Bob Jones or John Wilson but the really cool thing is we can even allow edits these ads are actually being saved to our list so here we're to see that down below we'd see those check boxes indeed are changing those values are being saved now you could lock that out we're gonna leave it alone and actually look at displaying what's selected down here okay so let's do that let's let's grab and find out which item is selected so the way we do that is to have a selected item for a combo box don't have any wire up to so let's go over to our shell view model and create a new property and we'll do a full property for this prop full tab twice and let's say that this is going to be a person model and we'll call this selected person oops let's go a selected person and then we the selected person here and the one thing I want to change is that when you set it I want to have that notify of property change there we go we need to add the user statement for that actually no we just need it inherit from screen forgot to do that so that's part of calibre micro the base class has some methods including notify of property change so anytime now that we set the selected person it's going to let everybody know that's like the person has been changed so now we can grab this just copy it go back over here and say selected item and set that equal to binding selected person so now the selected person will get updated every time we change what we've selected in the drop-down but in order to show that let's add a text block and set its name to be selected person underscore full name now what am I doing here well I know that the selected person has an object I can't just bind that the name because that's gonna show the to string for that object which is me nothing nothing productive but with calibre Micra while the conventions is if I have an underscore it's the equivalent of a dot and so it's selected person dot full name which is a full name of the person selected so if we run this now right now is nothing down here but if I select I try I select the drop-down is not currently working let's find out why it probably has to do the fact that I did not specify grid row equals one so we've got an overlay issue here let's try it again now I can select something from the drop-down let's select Carla Li and nothing happens I think I have yep there's the issue okay so the the issue is I'm actually notify enough property change before I change the value which seems silly let's change that around small little details will trip you up okay John Hernandez John Hernandez down below Monique Martinez there she is down below so by just selecting which one I want it updates another control that's kind of fun but now what if we had we have these addresses which we haven't we used yet what if once I select a person I want to see a list of addresses that are associated with that person well we can do that with a drop-down so let's do a little bit of manipulation in the front end so let's change this to be two for grid row two and we're not copy and paste this but let's before you do if we notice in the address model I'm sorry the person model we have primary address in the address model so let's grab this and then we're going to say primary address underscore and it's not folding it's full address so it's gonna happen is when we select an address it's gonna update this text block let's copy our combo box I'll paste it down below we're gonna set this to be there's going to be selected person underscore addresses that's the list of our addresses and the binding for selected item is going to be selected person underscore selected our primary address so we set our our binding here to full address and we're going to take off the rest days we don't need to have the more advanced case here so let's see how this looks well I'd rather change my row number again oops that's what copy and paste is is tricky here we go so this is right now empty nothing in here if I select Robert Taylor now I have four different addresses because Robert Taylor has these four addresses associate with his account if I select one nothing happens down below so we have fixed that but we now can see that if I select somebody knows it went blank again there's three addresses there's four addresses let's see if you have there's three addresses is it anything I don't have any other than that there you go one address so we now have cascading dropdowns based upon nested data so let's address that final issue which is the text block not showing the primary addresses full address I think the reason for that has to do the fact that we're not actually triggering a notify if property change here when we're selecting its item because it goes into a normal control not one that has a notify of property change now at this point you have a couple different options you can do one is because we don't control now this is intentional because we don't control these models here we can't just go in to address model and put on their a notify up property change we could bring these models in and make copies of them and then change them to add the notifications and all the rest instead of our UI Mack that can be the right answer sometimes but I think in this case it's overkill and so we're going to do instead is we're going to add an event on this combo box so that whenever you change which item is selected then we're going to update or call this method which will say notify up we change that's another way of doing it the final way is maybe we don't even have to bother with it so I'm going to show you the event way just to show you but we're not going to do it that way I think we're going to do instead is just create a property on our shell view model that is primary address selected and then also make sure that it updates the the selected item in the selected person okay so that's we're going to do eventually but I do want to say this event thing just in case you have some instance like that's where it kind of got a call an event because I can tell you right now that the first thing that I thought was Oh what I'll do is I will put the event in here and that would be like the I think it's selection changed yep so let's say binding and then put a method name here that won't work sorry it would seem obvious but that's not how it's wired up and there's reasons for that let's put it that way but what we need to do instead compare it to our window itself now we're gonna add a thing it says xmlns cow equals HTTP colon backslash backslash w w Caliburn project okay so what this is doing is specifying basically a shortcut a namespace that's what the dns is for namespace and so Cal is now our namespace we can choose whatever word you want or whatever like there's X and there's D and there's MC and local and those are standard and that's bringing these different things these are imports basically well I'm bringing in the caliber and project.org specification here so now down here I can say let's me a space here I can say kal : message got attached and then I specify which event I want to listen for event in square brackets by the way and its selection changed so n square brackets and say equals open square brackets again action and then you give it a method name whatever it is and you can actually pass in parameters if you want but really don't blank but so that's that's one way of doing it so you actually call a event here on the selection change and do something to update this text block but that seems kind of clergy as well so I'm not going to do that I'm actually how to take this both these things out and instead I'm going to do is I'm going to create a new property in my shell view model which is going to look a lot like this so student are prop full and it's going to be the address model selected address there we go and then down here going to add that notify of property change after this time 94 but we'll also do is we'll also come up here and we can actually do beforehand we can say selected person dot and it is their primary address equals value as well so let's update that prop rates make sure it has that for later so now we have a selected address we can say selected address underscore full address to get that in the text block so now I say Robert Garcia Main Avenue and it's still not updating isn't that awesome and that's because we did make a change here selected address is now we're binding to here so we're going to say that whenever you select a person address that item is being bound to a selected address property let's try it again so with a person sue Miller first address and there you go now the address is selected down below so if you see these weird problems make sure you get the binding right because that really can trip you up when it comes these applications even little little problems but so now we have a binding to the specified selected address for Sue Miller if I change this knows everything blanks out and I can select one for Frank Garcia the way the sue Miller there's nothing selected right now let's track down why let's go over to our shell viewmodel let's know what happens if let's walk through in our minds what happens if we select a person well it's like a person the selected person gets updated and that notifies the property change that person has been selected but where we populate the selected address well it's only when we set it when we're selecting it so it's never being populated in Ischl e so what you do is here we need to say selected address equals value dot primary address now you coulda said selected underscores like a person dot primary address that works with the same let's try this so if I select Robert Thomas at 29 Main Avenue then come to Bob Hernandez and select 101 State Street go back to Robert Thomas he is now at Main twenty Main Avenue Madison Washington which I'm not sure if that's real address or not doesn't matter so now we have our selections finally being updated the way we intend them to so you have make sure you think through all those use cases of housing populated how it's going to be updated it's not magic it's just a framework helping us out but sometimes if we're doing these kind of edge cases or things that are a little more unusual or off the beaten path you have to make sure that you think through how the frameworks going to work and make sure you wire up both sides of something so that when somebody else is selected that you get notify of that and then also that when you update something it notifies everybody else so a couple of things that are a little tricky but now we have is we have a drop-down that has more than one thing in it in the display we actually have - he wanted to to see now and then we have a second drop-down which is a list of all their addresses that's based upon the first selection so it's a cascading dropdowns going with it so he wanted to but two is enough I think and then if we select something here it updates the main record and it displays it down below in a text block and then remember is it later if we come back to it so that's how you can use combo boxes really effectively in our application we can make them look really cool now this is this is just really basic stuff here but I can format this any way I want I could put a full grid in here they have a whole bunch of information displayed I can have background gradients I can have you know fun images or colors whatever you want to do in here if I wanted for my drop-down here I just have the name a stag Texas has are they alive and check box that does actually work inside of my drop-down so they have the cascading where the selection here affects the next drop-down if I select something that's not been selected before it blanks out the drop-down selection so it's very clear that it's connected and this drop-down here can then affect something else on the page and go back and update the original item as well so hopefully that unlocked for you some of the more advanced stuff you can do the combo box now I would encourage you don't stop at something like this it's very very basic deuce more fun stuff I mean there's so much you can do inside of this data template pretty much anything you can do in zamel you can do right here so you do it I set a grid you can have multiple stacked panels you can do it vertically let's just show up real quick I think ugly but I want to show that you can do it vertically yes you can do it vertically oops wrong one a problem there you go so there you go so now the drop-down has multiple lines which makes the drop-down have a scroll more because of the the thickness of it but you could do colouring and here you can do a whole bunch of different things if you wanted to so play around that try it out try the cascading as well try out the things down below me link more things to this color box maybe have that it is a live a date picker or something else and we'll cover some other controls later on other videos but try out things out and see how they work for you and see how you can really take your application to the next level alright if you have any questions leave them down the comments below and we're going to have more videos coming really quickly in in this series and make sure so make sure to subscribe and make sure you're listening for those so that you can learn even more about DPF controls that might benefit you alright thanks for watching and as always I am Tim quarry you [Music]

Channel: IAmTimCorey

Views: 65,362

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, course, wpf, mvvm, caliburn micro, combobox, data binding, combobox control in wpf, wpf combobox binding, cascading combobox, combo box, c# combobox, c# combobox selecteditem, c# combobox tutorial

Id: nKJ_XDoAdtY

Length: 37min 4sec (2224 seconds)

Published: Mon Sep 17 2018