WPF Controls | 27-Datagrid | CSV Data | Part-1

hello everyone um in this tutorial we are going to dig into data grid control in wp app okay that being said we're going to create a new project and that's going to be wpf.net framework i'm going to click next and here we are going to give it a name so i'm going to call this wpf underscore data grid and hit create okay visual studio 2019 is prepping our project let's get a minute and here we are all right first thing first i like to flip my pants and increase the xaml area to start with okay so with as we've seen in most controls it's just a matter of in xaml to create a data grid it's just a matter of adding the tags open close tags and you're good to go your data grid is added right now it's taking the whole window that's because we didn't specify anything else right let's just put this aside for a second we are going to go to our mainwindow.saml.cs file and we are going to bring in some data to work with i'm going to get rid of some of this stuff here and let's clean up this unused using statements unnecessary user statements and keep it clean for now okay so data wise we are going to be using a csv file that contains bunch of songs basically this file here and you go into the folder so we have a bunch of songs in the csv file and we are going to use this as our data source before actually um before i copy the path we're going to create a class that's going to map against this data so in this file we have an id we have a song name or title we have the artist now we have the genre artist and whether it's a it's a soundtrack or not okay so let's go ahead and create some a couple of classes so first class is going to be you may actually increase the font size here a little bit so we can see comfortably so public let's go with 130 public class it's called a song let's add a couple properties so prop first one is going to be id it's going to be integer second one is going to be string type let's call this title um the next one is going to be let's see hardest oops my bad string artist so we'll stop at this point we'll add the rest later um there is a reason for that so we'll see that later on okay so we add three properties and that's this is going to map to some of our data in our csv file so let's create another class that's going to supply us the data so public class let's call it songs plural and we're going to create a static method in here it's public static um it's going to return a list of whoopsie i think yeah so we cleaned up all the user statements that's why we gained that error so we have to add back in system collections generic namespace okay that's edit so it's going to be a list of song and let's call this get songs okay and some of this stuff you'll remember from our csv demo tutorial that we did a while ago so if you're not familiar working with csv files please go check that out regardless let's continue all right so we create our method so let's read our csv file start reading it actually let me copy the folder the path copy and we'll paste in here bar file equals double quotes and paste okay and let's get rid of the errors by adding an add symbol up front and then we'll add the file name to the end of the uh string so the filename is songs.csv okay all right next we're going to create a new variable that's going to read the lines so var lines we're going to call on to the file class we don't have system.io i believe hit ctrl dot and add system.io to the namespaces now our file class will work i will say read all lines and pass in our file that's going to read all the lines in that file some csv file and we'll return an array of strings okay next we're going to for fold and create a for loop and that's going to continue up to lines dot length okay so it's going to read all the lines and within our within our for loop we're going to map data to our song class so um actually first we had to grab the line so var line equals lines i so we're going to grab the current line and then create an instance of our sun class so far song equals new song and oops and open close curly braces inside here we'll say id equals line first value and title equals line the second value zero based index okay and we've got an error here let's see cannot be returned chart to string okay all right we have to split our forgot to split the string so we'll split split all this the string the line that comes in by the comma character and then we'll get the values so now we have an error here that's because the id is an integer and this one is a string so we have to parse this into parse okay so title is in the second spot it's the artist in the third fourth spot so it's going to be hardest equals to line index of three i believe okay all right so we mapped r string array to our song object okay next i'm going to create a new list here a new so um let's use var var list equals new list of songs okay let's open close our brackets and then right at the end of this object creation we'll add the object to the list so list that add the song okay all right once once we did all went through the loop and added all the sounds in the list we'll simply say return list okay all right so we got our data now we could go up here and say let's actually give it a name to our data grid first so we can reference it let's call this dg for short all right so dg dot item source equals songs dot get songs okay and at this point if we run this let's actually first build first and then run it okay build succeeds let's run it all right beautiful so we got our grid working as expected you may wonder why we have our data listed in this order with id as the first title as the second and uh artist as the third column but it turns out data grid is smart enough to look at our collection our data and our song class and see the order the properties listed if you change the order of these properties let's do this real quick and if i put the idea the third property and run this again the id will show in our third column okay so data grid it's really a powerful tool i mean control okay let's put it back and run this again make sure we didn't break anything okay we're back to our original layout so for quick demos data binding to a data grid grid this way is okay but that's not what we are going to do in this demo we are going to go into more details so i'm going to comment this out and going to create a property right here it's going to get return a uh list of song objects okay list of songs let's call this song list okay i'm going to set this to this method right here so get songs okay so instead of directly setting the item source here i'm getting i'm set declaring a property and set it into this method that returns a list of songs okay now i'm going to go to my example by design by the way i increased the zoom level of our data grid um okay so let's create a window data context and in our data context we'll declare local and we have our songs class right here so that's what we are looking for so that's our data context and i'm going to come down here into inside our data grid and i'm going to set the item source to binding sun list we should have that and we do yep okay now we have design thumb data that we can visualize a lot better than um not seeing the data and um kind of hoping you are doing it right well actually it wasn't that complex so i mean there's nothing complex at this point when we did this setting the item source that was quite simple but you know what i'm talking about so okay once we have that live data design time data let's talk about some of the properties and uh the first one i'm going to talk about is um horizontal grid lines brush so this defines the color of our horizontal as soon as we declare it our horizontal gridlines are gone all is left is vertical gridlines so here we can set the color um for instance thread okay you can do the same thing with particular grid lines the reason i do this because um it's not that obvious it says horizontal grid lines brush you know versus same color so it may be you know some people may have a hard time finding it so i'm just you know touch paint touching on it so well everybody knows where to find it okay so that's the horizontal gridlines brush the other property i want to touch on is um visibility grid lines great lines let's see grid lines visibility that's where you set whether you want the grid lines to be visible or not so our option all all means all visible and other options are horizontal only that's you can only have higher sample grade lines the other option is vertical and none so we can have none no grid lines or we can have just so the choice is yours okay just want to get that out of the way um next property is let's actually bring that bring the gridlines back in header visibility so head of visibility the options are all column known row so we have only header column headers um i think the default is all but if i say column only it's fine see the little space that was to the left of the grid it's gone if i say row a little space you know we don't have any row headers but um a little space shows up giving us uh you know reminding us we have a row head there or we can say none then we don't have any headers columns gone too or if i say rows only i think real yeah that's froze only removes the column header as well so that's header visibility let's change this back to all okay so um the next couple of properties i'm going to run this and show you that way so by default when we click on the column header it will automatically sort ascending or descending so if the current state is ascending it will descend if it's descending it will ascend so by clicking you'll see that arrow here it kind of gives you a hint which way you are sorting the information the data same thing with other columns you can sort by title ascending or descending or by artist or any other prophet that we have okay so that's sorting with data grid but if you don't want the user to be able to do that there's a property that's called can user reorder sort columns and if you change this to false in this case the user won't be able to sort any of the columns okay all right so that's can user sort the columns let's run this again actually let's talk about the next one so by default you can rearrange the columns you can change but this doesn't make any change in the underlying data just visually you can reorder this columns but again if you don't want the user to be able to do that there's a property called can user reorder columns and if we set this to false by default is true then the user you of your application won't be able to do that so now i can't move the columns around okay so that's that let's what else do we have can user address okay let me [Music] run this first i think it's pretty self-explanatory but uh let's say i want to add a row here say number 30 and type in i don't know try to remember say um trying to think of a sound um let's say yesterday beetles now if i hit enter i added a row and then i got a blank row here that i can another one i mean right now it's not doing anything again it's not changing or underlying data but at the ui level we can do that so if we don't want the user to be able to do that we'll set this to false from default of true now the user won't be able to do it and if you can see it's gone that empty row that was here two minutes ago it's gone so that means we are not allowed to add any rows to the um grids similarly there is another property close to this but uh that's actually but at this point we can't add row but we can still edit if you double click on a cell you can still edit here okay so if you if you change if um read only property to true then we can't even do that so if your data grid is just for create only purposes that's the property you're looking for now we can't we can select the show but if you double click it won't allow you to edit or change anything okay so we got those out of the way we covered quite a few properties let's see uh um there are still a lot to cover data grid is really a huge topic by itself um i'll be right back okay so let's continue so the next property i want to talk about is can user resize columns by default it's true let's actually set this true first that's the default if i run this again now at this point we can resize our columns the way we want it but if you don't want the user to be able to do that we'll just set it to false in which case we are not allowed to change the column widths now we can do the same thing with row widths so now i can't even select the column and change the uh see now i still can do the rows but it doesn't give me the um indicator that i can do anything on the column widths all right so we can change we can do the same thing with the rows as well if you want to and that's the property called can a resize rows same thing here we can set this to false and then we can change the height of the rows okay now we can't do anything with the height or width of the columns or the rows okay um [Music] selection unit that's the next property we're going to cover so selection units okay the options are sell cell or row header full row so default is full row i believe which means we can select when it's once we selected record selects the whole row but if you change this to a cell and then we can only select one cell at a time i think is that a row is like a cell let's try the other one sell our rover there so let's run this so cell is working as it's supposed to but when you click on the row header you can select the whole row okay so that's select cell or row header okay um let's change this back to full row so in which case doesn't matter what part of the row we click we're selecting the whole row okay so that's that um selection mode let's see how that works so we got single or extended single as the default or we can select a single row or a single cell depending on our selection unit extended means we can select more than one so now i can select i think i have to hold the shift if i hold the shift then i can select more than or control okay so with shift if i use mouse click here and then hold the shift down click anywhere else it will select all the rows in between as well if you want to do like different rows select different rows that's not adjacent or next to each other then you hit hold the control key down and then select the rows you like to select okay so that's selection mode let's change this back to single i think my visual studio is going to crash nope didn't okay that was a little scary did i turn on some hot keys or something let me go back this way it's not going to be extended circuit chain just a single jeez hello i must have turned on some hotkeys by accident all right so i'm going to get through this for now okay so the next property um i'd like to talk about is let's see if we covered resize sword pretty much covered all these all right um the next one i want to cover actually let me zoom this out a little bit as wet normally i don't cover with but in case of grid that accurate it's makes a huge difference so i'm going to cover that so with i can set to a certain value okay that actually decrease my grade to i'm setting the width of the grid that's not what i wanted to all right so i'm talking about column widths alright so column width so i can set to a certain value which didn't work really the way i want it let's run this see what happens actually it worked so i was able to set each column i guess i should have rebuilt it for it to take effect so i set the width of each column to an equal 200 value 200 pixels value okay i could also do default i think it's auto so if auto let me actually rebuild this for some reason it's not taking effect immediately so auto it will adjust based on the longest column i mean the um widest column so in our case this one is i think this one is the widest or longest string so the whole column will resize to this column right we can again do a fixed value or we can tell a star if i go star type in star there let's rebuild this it will split the grid whole grid into equal columns and get rid of the space at the end of the last column so let's take this let's roll this back to auto and worry about this now you'll see is a long empty space here so the fourth column here is long and it's taking the rest of space but again with the star when you say star we are saying split into equal columns and get rid of the extra space and utilize all available space okay so that's what star does when you set at the grid level when we get into custom grid custom custom layout we'll see we'll probably cover this one one more time but that's what star does let me actually go back going properties and see if there's another option let's see should be under columns layout auto i'm not sure if it's going to give us a drop down here no probably not well anyway i think we covered the most important ones so we have fixed value we have auto and we have the star okay oh actually got two more um size two head there okay so what this self-explanatory it basically sizes resizes the column width based on the column header so if i build this again it's going to ignore the data the size of the data inside the columns it's going to arrange the width based on the column header width okay and similarly there is another one size two cells this one actually does the similar to auto so this one resizes that's the default i think it resizes to the size of the largest cell okay i think we pretty much covered the important ones um [Music] if you want me cover more please drop in the comment section but as far as properties i think that should do it for now um but it's not the end of this tutorial there's still a lot more to cover about data grid so we're going to continue all right for now take it easy

Channel: tips'n tricks

Views: 5,575

Keywords: WPF, C#, VS2019, VS2017, Vsual Studio, .CSV files, XAML, Datagrid, How To add datagrid, properties, best wpf tutorial, best datagrid tutorial, datagrid columns, rows, checkbox, combobox, datepicker, cell editing, how to display/show checkbox or combobox in datagrid, column header, row header, gridlines, header style, cell style, wpf tutorial

Id: yUMEGOo2GR4

Length: 39min 8sec (2348 seconds)

Published: Mon Feb 15 2021