WPF Controls with MVVM: DataGrid

if you in follow along in this WPF miniseries this is probably the one video you've been waiting for taking data and displaying it on to WPF form in a way that you can edit and manipulate it is most easily accomplished with a data grid in this video we're going to look at how to populate a data grid with different types of data including some advanced use cases but first if you're new to this 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 in the description below our discount links to course bundles that include WPF user interface courses also the description are links to a mailing list and my patreon page so be sure to check them out ok let's get started in our example project in this series I'm using the same starter application in order to make things easier if you want to code this video both the beginning of this video and at the end then go to the link in my description and click on the blog post link that will take you to the blog post which has the downloads for this video now this starter project consists of a class library in a DPF project and the DPF project is configured to use calibre and micro which is my preferred mvvm tool if you haven't used calibre in my 34 or if you want to know more about it check out my video on this channel titled WPF in C sharp with mvvm using calibre and micro yes that's a mouthful but that video get you started alright so let's jump right in here and let's look at first our shell view model which has on startup it just go that did it access and grabs a new list of people which don't forget in case you have seen this before if you haven't better review the data access all it does is it generates a random data so it's not actually going out to a database it's simulating going to a database alright and let's look at the front-end which is just a very very simple shell view which just has a grid with row definition science got a few rows here will only is a couple of them but I wanted to have enough just in case so let's create our first data grid so let's start really really simple I'm gonna say data grid and let's give it a name and the name will be whatever we have in our shell view model and it is people so we I'm buying two people and let's leave it just that for now that's it that's a data grid okay so you declare it's at data grid that we give it a name maybe we've bound it to a list of objects once they run this there you go there's data grid done so I'm glad you've watched this video I hope you've enjoyed it I'm just kidding we're not done yet but it is very easy as you see to create a very simple data grid on the page that you can even sort notice the sorting works you know ten to one versus one to ten and last names sorting all the rest so you can you can use this right away now addresses comes in a collection that's not really useful to just say collection but everything else seems to work pretty efficiently date of birth it has time in there too not the greatest but it least shows the date properly so let's look at some of the things that can do make us a little better and we'll do it incrementally over time until we have is really complex or more complex data grid the first thing I wanna do is I want to say that we have a alternating pattern on those roads it's they're all white and that's how hard to read sometimes reading across a row so let's say alternating row background now you can choose any color you want and here you can you can create custom color but let's just do something like grey alright well start it up again and there you go so now you got a striped data grid and now if you're reading along on this row it's very easy to see even though highlighting it which row you're on so I can see the Carlton Thomas page 57 over here is full name as Carleton Thomas it's easier to read across okay so that's that's a pretty simple now let's open it back up for that notice this let's say 11 Tim Cory and let's just start putting some values in here let's go with there we go just a date and yeah he's alive and let's give him a dollar 25 notice I've now add a record to my data set now the full names but not populated yet but all his information is here it's actually also in my list if we were actually look at our list right now we would see that the list has 11 records in now not 10 this allow us to add a new record that might not be what you want maybe you don't want to allow people just just to add a record using the data grid maybe you want to go through a form that does some validation and error checking in and all the other good stuff so how do you prevent that because notice I can also add number 12 now or I could say number 10 again and that be a problem too so we have the option here as well can user add rows let's just say false so now when I open this up notice that's the scroll bar is right up against this list and I can't get below this row I can't go to the blank row to add a new row so there you go there's we lock that down and read-only is not the right word because it's it's not read-only I can I can change for example Carlton to be Carl but I can't add new rows alright so there's some simple things you can do to you know pad tweak this and add just a little bit more function a little more lockdown to just what you want and a little more pretty with it with the alternating road colors I choose a little lighter than grey me a light gray however we can now move on to the columns now right now I am is allowing what's called auto-generated columns so let's turn that off so come down the next line is because I want to scroll off the page here let's say Auto generate columns equals false and what this means now is it's not gonna generate any columns that that I specify therefore that I have therefore it's cut no columns its collapses the data just kind of ugly so I had generate some or declare some columns so data grid this is inside of the degree itself so did a grid dot columns and here we can declare our columns let's start off simple and notice we if I open up my my less than sign or the the opening of the angle bracket we have a few options here okay these are the options you can use for your columns you got your text column checkbox column combo box column hyperlink column and template column and they are really pretty much what they say they are so these are your five options but really number five the template column is your anything else option so let's start with the text column and we're going to say you give it a header first and a head is that above all the records this is what we've specified so let's go to a header of we've hit full name and this is the user friendly header main and so what the user sees so we can use this the space so now we can do combined this to the full name property so say binding equals then in curly braces binding half equals full-name and we just do a slash and the closing angle bracket and there we go we have a text column so grid text column with a header called full name and it binds to the full name property if we run this there you go there is your all your names Bob Taylor through sue Davis and you can sort it if you'd like to as well so the first column it's a text column is pretty simple now let's do some other columns just to kind of show off the other options so we have that is a live property so did a grid checkbox column and we'll say that the header equals is alive and the binding equals path equals and I believe it is is alive we run this again and there you go there's your your checkbox column which it it automatically did for us when we were doing the auto binding just like that it did it the text column for for this one but now we can do some more things we can we can be more specific in how we create these things because not everything will bind properly like our address list so now let's do one more and let's do a drop down now for a combo box things get a little tricky and we have the address so if we look here in the person model we have addresses and that's a list of address model and they also have this primary address which is the selected one saying yes this is a primary address so let's just pretend we're going to be selecting which won the primary address is now thought would be that we'd do a data grid combo box column but that's supposed to bind a static list not dynamic list and I just haven't found that works real well when binding to a dynamic list and there are some ways you can get that to work if you can find a really easy one I love to hear about it but so far I haven't found one that really fits what I would term an easy setup so I'm gonna do something else instead may reuse our existing knowledge and use a template column so template column basically is anything else I mean that's pretty much what it is so let's give a header first and we'll say primary address and that's what we selecting because in the way I set up the the people and their addresses I don't select a primary address for them so we blank to begin with now in here right actually accept two different sections so we have the data grid template column dot and then it's cell template now before I fill that in gonna create another section just you can see the contrast here data grid template column dot cell editing template okay so here's a two different if you yell me that's okay there's two different sections here there's the cell template and then there's a cell editing template I wish is called cell view template or something similar because that's really what it is is it's what you you see when you're not adding that particular cell okay so in this case we need to have a inside here data template and into a template we can just do a simple text block and we'll say the the text equals and we'll do a binding and say the path equals the primary address dot full address and so what that is is we're going to dive into an object this primary address is a full address model object and inside there's a full address so that's what we'll read off and put into that text block so read this is what the the primary address is and that'll be it for what I've called the view template which is just or the view yeah the view template itself your template but it just called cell template just so you know so cell template is just for viewing what you read we see now let's get into what we actually will edit or work with so we need a data template then inside here we can you reuse our existing knowledge and use a combo box and we'll say that the items source equals a binding with a path that equals addresses there we go addresses and so that's the list of all the addresses that are attached that person's account and the selected item will be bound to the primary address let's just unpin this for now so there's our combo box declaration then inside here we could do a really complicated thing and I will do an item template just kind of laid out but where I could go very complicate at all so we'll say combobox dot item templates then inside here a data template and then inside here we're just gonna put a text block with the text that equals that binding path equals full address and that'll be it so we could get more complicated in this section as well we can actually create layout 2084 those like a stack panel and have maybe the street address and then below it the city state zip or you know something similar to that but for this where it's gonna have just a text block just to show that there and that's really it yes there's a lot of typing here but comes right down to it it's not that complicated this work on right here so we create first our view template which is just a text block then we create our our edit template which is a combo box once we done for and inside of it has just add a template for just a text block to show off the full address so let's run this make sure we got right so there's nothing in this primary address column right now let's choose John Smith here he only has one address so I'll select it notice the column widens out now if I click off it it still says 29 Main Avenue so let's select the other John Smith and he's got four different addresses let's go to seven Wallace way and let's do Daniel Wilson and there we go so doing this edit we've now changed three records and add a primary address for each and it's reflected in the fact that it's still selected afterwards now he could come in here and change that and that will work just fine so now you've got to this data template column showing us a combo box with what could be a very simple color box like this one is or it could be more complicated one where it has its own defined data template maybe in images or stuff like that all right so that's a complicated one but just in terms of typing a lot typing here but when it all comes down to it that's the primary address but let's look at another fun one and that's the date column you want to play a date we also want to have a date picker for that date as well again I want creates a data grid template column and where I give this header we'll call it the wheels day of birth let's just check real quick we've got a date of birth right here so let's use that date what's called birthday why not and then from there inside here we again have the view and the Edit template so the cell template and the cell editing template so did a grid template column dot cell template let's create the other one as well today grid template column dot cell editing template and so the first one let's do this let's do the data templates which actually think I'm here too so let's copy and paste so we have it there we go and inside the template we can just do a text block for now versus a this is a date so text equals we'll do a binding path equals date of birth and let's leave like that for now I'm gonna come back and modify it a little bit I'm going to tell you why but for right now I'm just gonna leave it as is now here in our editing template let's create a date picker and we let say a selected date equals we're going to do the binding on this to a path equals date of birth and that should be yet so now we have in our editing template have a date picker and if you don't use date Perry for you get to see it in use and when you're not editing it we just want to see the the text block with the date of birth if we run this well I think I'll know is right away is we still have those times in there now kind of ugly but let's leave it like that for now if I select this notice little icon over here I when I double click this cell and I can select it and now I have this drop-down which hopefully it's useful let's go to September 3rd let's go to October October 1st of 73 and there you go doctor where first 1973 is Santiago's new birthday but let's change this day of birth to be more user friendly so it's after the path equals the upper thread put a comma and then say string format where do a very simple string format just D D means just a date if you run this again notice the times are now chopped off and it's just the dates so sue Thomas was born on October 20th of 2012 that's not right it's actually March 6th of 2012 and there you go so now we have seen a text column a checkbox column and a couple different types of the template columns and how we can use these effectively in our data grid now there's a lot of things you can do to make this prettier to make it more functional to maybe have these dropdowns be more you know effective have those the the city state and zip and the second line those kind of things changing the colors here changing the sizing all this kind of stuff there's a lot of things you can do and I think the biggest benefit you have here is you have it the very simple ones where you can just do text column check column those are very very simple but when it comes to these more advanced cases you have some really great options as far as what you view versus what you edit in fact you could do the same thing for full name you can allow them to view the full name but it goes to edit it's actually two different text boxes one for first name one for last name so it's a lot of options you can do here just kind of playing with that template column versus the the text column or check column don't forget you can keep on the auto-generated columns and that will make your life a lot easier if it's very very simple you can just say do it and it does it and you want to think about the formatting and design of each specific column so if you wanna get just get started maybe just put a data grid with a name and then bind that to a list and that's all you have to do now if you're a little more complicated then you can get into the columns may just do a simple ones and then move on to the template columns template columns like most APF it allows you to really make it your own decide whatever you want inside of that specific you know the cell template which is where we view things versus the cell editing template where we desert where we edit things okay so hopefully that kind of sparked some curiosity sparks some ideas in your mind of how you want to use data grid I'd love to hear how you're using your data grid or how you've learned how to use data grid and they're going to use it okay let me know in the comments down below also any questions you have any any thoughts you have on the grid I'd love to hear it in the comments as well and I try to answer as many of those comments as possible usually get to all of them but I may miss one or two here there okay so that's it for data grid I hope you've enjoyed this video as always I am Tim quarry you [Music]

Channel: IAmTimCorey

Views: 113,881

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, datagrid, c# datagrid, wpf datagrid, datagrid in caliburn micro, caliburn micro datagrid, datepicker, wpf datapicker, wpf combobox, wpf dropdown

Id: zvyQNuuTqks

Length: 24min 58sec (1498 seconds)

Published: Mon Oct 01 2018