WPF Controls with MVVM: ItemsControl

how do you put a list of objects on a PF form dynamically so if you add or remove an entry the controls for it are add or removed well in this installment of add a PF controls miniseries we're going to look at one possible solution which is to use the items control this is one of those controls as actually rather easy to use but is at the same time also confusing to a lot of people so let's clear up that confusion but first if you're new to my channel my name is Tim quarry and it's my goal to make learning c-sharp easier this channel is full of videos explain of various parts of c-sharp I also have 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 I placed the user interface with a WPF user interface now that sounds interesting to you check out the link in the description to get the main course again the day APF atom course for a total of 97 dollars that's a seven dog discount off the normal price now if you want an extra $15 off look at the second link which adds the asp.net MVC ad as well so if you buy all three together you get a total of 22 dollars off the bundle so that's over 40 hours of real-world instruction for less than three dollars an hour okay so let's get started in our example project now in this series I'm using the same starter application to make things easier so if you watch the previous video in a series this is the same place we're starting in this video so let's just a a brief overview look and what we have here we have a WPF user interface that has the basics of a mvvm shell setup and uses Caliburn micro and then we have our demo library which simulates the idea of of data access using this data access class which just creates a whole bunch of random addresses and random people and wires all that up in this class we're not really touching this class we're not worrying about data access we're not worried about any of that stuff we're just worrying about user interface in this video so we'll get rid of that so the user interface is this is the back end where we have a list a bio collection list of people and in the constructor we're saying give us a new set of people so at this point at the very start we have a form that's got data behind it and we have you know data simulate so it's all ready to just display something and that's where planned doing now so here is the front end which is plain and if there's nothing to it really yet we're gonna add something very simple we're not gonna go overboard trying to create a beautiful UI we're just going to try and demonstrate how to use the items control all right so we have a grid with just rows and it's got one two three four five rows on it we'll probably only use a couple in this video so a start off let's create our items control it's right down here and let's actually expand this out so I'll switch ordered zamel only we're gonna have in here and items control now is plural items not just one so items and the rest say items source this is where the data comes from so you have to do a binding here to people all right so there's our binding to people and we'll say grid row equals one so what this does it binds our items control to this people bindable collection and the cool thing is this is how you do it if you have something else named people or if you don't want a name as as control people but if you if you can name this the same thing as your list like it'll have two different things that are going to be lists from that same people list then you can just say X colon name equals people and that's the equivalent so it's either one it's up to you based upon can you name this people and it doesn't make sense to make up people but those people matches up then with our people back here which is our shell view model and it's binding to that property so it binds to people and we'll watch for updates as well because it's a bindable collection okay that's that's what that's right here does for us is it allows us to not have to say there's been an update whenever any any item inside changes so if here's a list here instead that wouldn't tell the front end hey something new has been or something been changed in one of those people okay so we have this list we have bound put it on row actually row 0 sorry row 0 that puts it on this row right there alright so now we a do is we actually have something in here so I am is control essentially what it is it is going to be a repeating set so if you have a list of string let's say then you would just have essentially creates a stackpanel with each name one at a time and Korea doesn't individually but in our case we have a set of objects which have multiple things inside them so we'll create one row layout essentially thing a kylie a table but it's not so we'll create one row layout and then it will repeat that row layout for every person in the people list so let's demonstrate this so we say items control dot items panel I'm sorry items template item template right singular item template Iona's panel comes next but we'll get to that Amit so in items template this is the template that it's gonna use for every single let's call it row in our are set so now we say well this is a data templates and now in here whatever we specify in here is what will get created for every row in our list so that's it something really simple for now let's look at real quick I'm gonna look at the the people as a person model has let's grab the full name and anything else now they count balance that'll work full name account balance so text block alright now I'm going to bind this it's gonna have multiple so I can't we don't want to name it something that would then be bound that way I read you a binding on this with the property I want to bind to text equals I'll do a binding to full name I see the full name of a person and that's all we'll do for that but then we also want something else and sets and we have to do two things in here they want also this now let's show you for now the text block text equals and we'll do a binding and it's account balance the problem is I can't have two things just like anywhere else in a PF I can't have two things that aren't in some sort of list or grid or something like that this is expect the data template it's expecting one thing so now I both of those in control X per minute and I'm gonna say I want a let's do a stackpanel and we'll do the orientation to vertical and we'll leave like that for now no big you know deal here just a quick little stack panel so now we have a stack panel inside our data template and so for every person in the people list we're going to create a stack panel that's orientations vertical that has a text block for full name and no text block for account balance and that's really yeah we'll save this and now we'll run it just to see what looks like and there we go so now we have Miguel with his account balance Robert with his account balance and so on down the list now knows it's not there's no scrollbar here we haven't implemented that but it is lists them down their course it's ugly right now but it does show us something and it shows us our arse at our design this design right here a stack panel for each person you have one two three four five six seven eight nine ten people so there's a design and that's really the foundation of the items control once you set up this structure right here then inside add a template whatever WPF goodness you wanna do he's up to you and it doesn't have anything to do the items control really it's just saying okay whatever you have in here I'll render that for every person in the list now notice I said full name full name and account balance well those aren't actually properties right on the root of our view model they're inside people but because we're doing essentially a for each on this people then it says okay this is caliber and micro wiring things up it says okay I know you have a person so I'm actually going to look at the person model and look at these properties for everything inside the data template there for full name and account balance or on the person model and we're all we're all good so that's a little magic to happening behind the scenes and now you risk eyes limit because you know how I do binding you know how to do simple controls like like text block and checkbox and those kind of things so now you just format this make it look pretty however you want and you're good to go to use the items control now we're not done yeah I did want to point out one other thing well few other things but this one was kind of important notice how it is kind of stacks these red top of each other now each of these like Robert Lee and 7921 that's Roberts record and so that's one stack panel we've also create our own stack panel here with the orientation of vertical however the overall orientation is the same it's also a stack panel by default and the orientation is vertical that's why we have this right here we're just kind of Scrolls down the page if you didn't want that and what you could do is create something else before we do that though I want to do a Lewis set first it's a little bit clearer so you can see visually how these things are laid out so I'm going to cut this temporarily and add a border in first now a border is something we can set a background to we can do some pretty fancy things but we're empty simple we're gonna say that the border Barasch is black the border thickness is 1 notice it I'm margin and padding so it's simple 10 and 10 for the padding as well then in here we'll paste back our things without changing anything else where I run this and just see now there's our our set okay so notice actually the whole row is highlighted because the row only has one it's the only one column okay but there's our set of people I mean if it kind of scroll off the page almost to get all 10 in now let's look at changing that stack panel orientation of vertical to something different this is where we have the items control dot items panel then in here we have an items panel templates now it's a little bit different than down here where the item template this is saying the the items panel which is this whole thing in here here's a template for it so right now let's hamlets is that it is the stack panel orientation of vertical what do I change that let's just do horizontal first so you'd say stack panel orientation equals horizontal and that's it and this is just a definition of how you lay out these these groups here these these sets of controls so let's run this and there you go now if scroll off the page to the right instead of going straight down but what if you want to do something different entirely well how about a wrap panel a wrap panel what it does when it Scrolls the right going hits the edge of the the border of our form it goes down puts it at the left hand side on the next you know kind of row down and there we go so now if we move our control notice how they kind of fill in or space out as our form changes also notice they're not the same width now if we wanted to we could have set the width of each of our items but I don't want to do that so now we have once long Robert Hernandez we have one it's small like frankly and so frankly takes up less space therefore we can put more items in this row row to the can Row one so there you go so now you can manipulate how the layout works for the items control as far as how the items relate to each other now no this is still on one row in our our forum it's just that within that row we've used the whole row to place ten different items and if isn't if the forms wide enough it's just one row if a form small enough it actually stacks at pre high into that row is quite high all right pretty simple stuff I know but the same time really powerful when it comes to deciding how you want to lay things out this is also really good for responsiveness imagine if each of these is a little edit box we can edit the account balance well now you can put as many as will fit onto a screen instead of having that that awkward scroll or one long list like this now I kind of can fill in where you need it to so it's a lot of flexibility here is a lot of power in the items control in general but we're not done yet so we haven't seen is what happens when we add a new item so let's do that now over here in our shell view model we don't have anything yet for a button or I'll create something and what we'll do is we will create a button that just adds a person we'll create another button that removes a person from a list we'll do it a random add or remove okay so let's wire that up so first we'll create a public void add person there we go so now this methods what it's going to do is when you click the button that's the add person button it's going to add a new person to our people list well how do we do that well if we have as data access over here we notice we have a method called get people where we pass in the total number people and returns a list of person model so I'll do it I'll call this and just ask for one person now I could make this public the get person when it returns just a one Bell we like that idea because hmm but the problem is the ID right here I kind of want to have a unique ID I want one of those right so you know what I am gonna make that public that way I can specify the ID instead of this one where it specifies the ID for me based upon the the new list it's creating so what I'll do is I'll come back over here at the get get person method and I'm going to call the data access let's just call it I'll call it data access equals new data access and now I have my list of people first of all so let's get an int max ID equals people dot max and we'll say x equals greater then X dot and we'll get the ID number of the person person ID it's get a max person ID dot oops there we go sorry so there we go we've got the people list we're saying give it a max person ID in this list definitely a maximum identity number or value for the users so if we have you know one two three four five or ten then they'll return 10 is the highest one in our list so now I can say data access dot gets person max ID plus one and that will be our new person to add so we'll actually cut that out for a minute and we'll say people die add and then paste it back in and there we go it's in one line now instead of two I assigned to a variable first but it will add a new person to our list at the end that has a maximum ID of or an ID of one beyond the current max now let's go ahead and actually put this into use and test it out I like to write as little Co as possible before I test it so let's go over to our view model let me have his whole thing right here let's collapse admit the items control is on row zero so let's actually change that to Row one so you have my button above it let's actually creates a stack panel at orientation of horizontal let's put that on grid row zero and I'll just have one button for now but I'll add a second one later fun the name is going to be add person oops let's actually give it some text there we go so you have an add person let's just verify add person so it should be that when it we click this button it adds a new person to our list so we have ten people here and a new person though as Daniel Davis just popped up then John Smith and so on so the add person button works and it also updates that items control so now let's add a delete button so let's actually add it right now copy and paste this and we'll call it remove person as I remove random person the reason why it's a random person not civic person doing it on each entry in that list and how button on each nest head delete is because we're using an items control and IX control is more about display it's not really about removing adding rows necessarily you can but it's not the right tool if that's when your primary focuses and so one of the things it does not have is the ability to say this is the selected row it's therefore you wouldn't know which one of those buttons was clicked unless you somehow kind of clued together to tell you and so that's kind of a problem if you want to go down that road but what I'm saying is if you decide that's what you want just tweak the control there's other controls that can do this and clean the data grid which make coloring in a future coming out shortly future video in this miniseries so we're going to remove a random person so let's go over to our and remove person as our method name let's come here and we'll create a new method remove person there we go and now you do is find one of these people and remove them from the list now to do a random item I could just do the first item that doesn't seem like it's a lot of fun so let's do a ram in now over the data access class was actually a another method that I'll probably make public and that's this one right here get random item now this looks funky but what it does is it it's a generic method so it takes any kind of item in and said okay take that array item and give me a random item out of that list so let's make this public and if you don't understand that that's okay watch the video on generics it'll help this is someone's too specialized little method we spend probably about 10 minutes talking through so now back over here we can pass in let's create our data access initialization copy and paste that and we had a people list so let's say peep I'm sorry person person model let's call it person let's call it random person equals and we'll say data access dot get random item of type person model and we'll pass in our people list I believe it needs an array though so to array there we go so what it's gonna do is gonna take in the people list gonna convert to array first and it's quest and actually I'll have to specified now that got it passed in it's gonna take that array of people so you get a random item add that list and return it into this placeholder right here this variable and now I can do is say people dot remove random person they might say well how does it know which one to remove well remember that as a pass object around we're not passing all that data it's remember it's the the house model you've probably heard me say it before when you instantiate an object me create an instance of it what you're doing is you're taking the blueprint and creating a house and what the variable holds is it hold essentially the address of that house so if you pass that address around you're not making a copy of the actual house just a copy of the address every points the same address so therefore I say one two three Sesame Street it goes in the list and says do I have one two three Sesame Street and if we do it removes it so that being done those three lines of code we can now remove a random person notice John Lee's at the end John Lee is still at the end but somebody else is missing now if I go low enough I've got Miguel Bob and Carlton and Bob is gone now bye Bob okay so there we go now we have the ability to add and remove people and notice this list works just fine it throws an error because I don't have anything a list that's a little bug we need to fix in our code here so in fact I want to be you know complete so if people da Lang whoops count erase length count is greater than zero or equals 0 then return just don't do anything ok so that way it is got if then not do anything if we remove everybody and there's nobody left notice you hear my clicking nothing's happening but if we add a person the sequence creates or contains no elements we've got another problem so in that case we need to kind of separate the declaration out here from the max ID so therefore let's go ahead and cut that out and say max ID equals and we'll say that collection up here rest are 0 but that'll wrap this whole line here in if statement so they snip it there you go they used to have it right on this menu and then it got too long it's still too long but they put under snippet so surround with if so if the people dots count is greater than zero so is if there's more than zero people in the list then look for the max person but if it's not do nothing because max ID is 0 0 plus 1 means the first person gets the ID of 1 so just kind of prove that that yes we've worked out a couple of the obvious bugs and that's one things you should do every time you create an application is check for the obvious bugs first before you look for obscure ones just make sure that your arrays and everything deal with the idea of going to 0 and not below and going you know up from there and all the rest so that's it so that's the the items control so in the items control we have the ability to create a template and let's go ahead and close this out you know ability to create a template that lays out what do you do per object or per item in your list in this case we create a border around the whole thing then create a stackpanel had two different text blocks you could have text boxes in fact if let's do that real quick just to show you can I don't want to feel like you didn't see something so now we can actually modify the values in here for our account balances we have check boxes we can have buttons we can have a whole bunch of things but in general it's more for display than it is for edit that's pretty much with the items control does it's more display than it is edit but you can do some edit in fact if we went over the person model and I were to create an event in here where we did something to the user may be updated there is a live status or change the date of birth so like that a method here I could call that inside the items control so as definite things you can do it here on a per row basis if you'd like but in general I see this more as a display but you can use it for other purposes as well so it's up to you it's up to your imagination how you want to use this but it really does offer you a lot of options just in the data template now if you don't like the layout you can come up here and create this item is panel templates and say okay well a rap panel or I want the stack panel be horizontal or I think of some other options in there as well make a great or something like that so those are your options for how to use the items control but it really just creates a template or a layout for you but then you can go in there be as creative as you want you can have backgrounds you can have images you can have gradients and all the rest of stuff that you want inside this data template and make things look really amazing much better than what I put on screen today okay if you have any questions please leave them down in the comments below I love to answer no if I can I try and get to every comment that I can alright thanks for watching I appreciate it the the downloads for this video both the the starter code and the end code are in the description below as well as my link to patreon my like to join my mailing list and from there you can get to contacted me directly if you have a question that's not only a youtube question it may even that you want to ask of me in general okay thanks so much and as always I am Tim quarry [Music] you [Music]

Channel: IAmTimCorey

Views: 80,915

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, data binding, c# combobox, itemscontrol, items control, wpf itemscontrol datatemplate binding, wpf itemscontrol, wpf itemscontrol binding

Id: EPhJz7CHnuQ

Length: 33min 33sec (2013 seconds)

Published: Mon Sep 24 2018