WPF Guide for Beginners - Panel Grids

what's up youtube in this video we're going to look at wpf's grids and the grid system is super useful when it comes to structuring your graphical user interface to change where items are positioned for example where the button is where the text is all of that and one of the most powerful tools for that is going to be the grid panel or the grid container how i like to call it because it's basically a container for different user items and you can have a container inside of a container and we're going to look at multiple different containers in the next couple of videos as well we're going to start with the grid however and i hope you will enjoy it if you like the video then please leave a like and also don't forget to subscribe it really helps out the channel and yeah let's get started with the video in this video we are going to cover grids and grids are a super important layout element in wpf because it's allowing us to display elements in a specific order which is what we want in many different cases okay so let's create a new project and here i'm going to select wpf well you can search for wpf here and then it will give you the net framework option which is the one that we are going to use in our case okay so let's give it a name i'm going to call this one grid demo and then let's create it once the project is loaded you will see that you have your main window which is empty but when you look at your example code you can see that the default element that you have inside of your window is in fact a grid okay this grid now allows us to decide whether we want to have two columns three columns just one column and so forth and we can define all of that by creating something called a grid dot column definition or a row definition okay so if we want to create column definitions we can now create individual column definitions in here and define how each column should look like for example we could start with two different columns here and therefore i'm going to define how much width such a column must have okay you can see that there are a couple of different properties here the width the minimum width a name if you want to access it later on and the maximum width which would be the most interesting properties i'd say you can see there are a couple of events as well and dependency properties so there's a lot going on drag enter what should happen when we drag and enter when we drop something into that but that will go too far for this video we're going to focus on how to lay out a ui okay so i'm going to use with here and then you have multiple different options what you enter here okay so you could for example use a width of one okay now let's create another column and by the way you can also close this tag like this then you don't need to have an opening and a closing tag okay now if you want to have a second column you can just go ahead and say okay column definition with another one that will have a width of one now these both columns will now have a width of one pixel so there's barely any space in there so maybe we use something like let's say 200 pixels okay so this one will have 200 pixels and this one will also have 200 pixels so we can see that we have those two columns and they well leave out a lot of space here we're going to see how to use percentages later on and how to autofill as well but now before we look into that let's actually add some elements in here and i'm just going to keep it super simple because i'm just going to use buttons here because i think they are very easy to visualize and understand okay so here you can see now we have this button and i'm going to give it a text of button zero zero okay button zero zero which will be in the zeroth column as well as the zeroth row okay we don't have defined rows yet so it's going to be one row by default but we will later on see how to define rows as well now this button as you see is by default in our first column so in the column 0 so to speak we never defined that it should be there but it just is there by default now if we create another button you can see we don't see that second button because it's on top of it so let's say we would like to change the position of that buttons where we want to position it in the second column then we can set the grid column property see that one here we can set it to a value so for example we can set it to one one being the second column because computers or programming languages except for r i believe they usually start counting at zero okay so this language c sharp that we're using here an example as well they count zero and then one okay so this is our zeroth column and this is our first column or number one column so to speak index one column okay so if you want to be specific with your first button then you should also state in which column it should be because otherwise this can lead to confusion okay i really recommend to always define the column and not just leave the default so this one will be button 0 1 so button row 0 and column 1 okay that will be the text of it so you can see we have two columns and they don't take the whole space now let's play around with the space a little bit so i'm going to use something where i have a percentage so i will use 2 star for example i could have used 1 star as well in this case it doesn't matter because we only have a width of 200 and this one will take the rest of the available space so this button zero zero now takes all of the available space and it takes a percentage so to speak if you have multiple columns so let's say we have this column here also with one star like that and now both of the buttons have the same width so they're both having the same weight so to speak so this one has a width weight of one this one also has a width weight of one now if i make this second button so this button zero one if i make it with the two star now it will be twice as wide as this first button okay so this is how you can play around with the values here and you can of course also use something where you use percentages okay so this one will for example will be 33 and this one will be something like 76 so this one will be one third and this one will be two thirds so that's also something that you can play around with so you can define a specific width so a pixel width in pixels this will be 200 pixels for example or let's say 500 pixels wide now and this other column will take all of the rest of the available space no matter what stands here or what we have here except we had another column okay so if we have another column in here now you can see the rest of the space that is made available will be split among the two because they have the same value here the same weight so to speak okay now of course i could change that to let's say something like 200 and this one would be one star so it would take whatever is available to it this one will be 200 pixels wide this other column that we created so the third column and so forth quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video okay and then there is another keyword which is called auto now auto will take automatically the space that it requires for its children its children are all of the elements that are inside of this column okay so let's create another button for this particular case where i'm going to now call this one well position this one in column two and call this one zero two so button zero two and now you can see it will only take the width that its text which means its child so to speak here requires so this button has this amount of space that it needs and auto will automatically take that space now if i define manually how wide this button should be so if this button has a width of let's say 100 pixels now you can see that the button will automatically take 100 pixels and the auto will now be 100 pixels so basically it just says okay however wide the elements that are my children are however much width they require that's how much width i'm going to give them okay so let's say this one was 500 then you can see now we're suddenly out of the screen so this is something that you should avoid which is why it's tricky to play around with values at different levels okay so it's always good to have percentages and basically build your ui so that it's flexible and will look good on different sizes so to speak which is why i prefer to use a percentage here let's say button 0 0 will have something like 33 percent for it the second one and this should be a star so don't forget the star if you want to make sure that it will also be taking 33 percent okay without the start we'll take the pixel value with the star it takes the percentage so now in this case you can see this right button still takes the auto width so still only takes as much width as it requires but the columns well even though they should just use 33 this is still weighted okay so they're still waiting against each other how much weight do i need in comparison to the other elements that also are weighted because they should just take all of the available space that is left okay now if we change this auto to also something like 0 3 3 star now they will all take the same width of space even though the button still stays at 100 pixel width and in order to explain this a little better i think using percentages might be a little complicated so let's use whole numbers instead okay so what i'm going to do here is i'm going to get rid of this with for a second and now i have a width for all of my columns of one star so how this works is it will take one of the total of widths so to speak so it will take one of three so now one column or each of our columns is going to be taking one third of the entire width that is available for our grid okay and now if i would use something like two for the first two columns to start and the last one will take one star then this here would be two plus two plus one is five so this one takes two fifths of the width this one takes two fifths of the width and this one takes one fifth of the width so if you're using percentages i would recommend is you use something close to one so something like zero three three for each of them is going to be fine even though it would make sense to potentially make one just a little wider using 0 3 4 if you're using percentages which you would usually in this case i would really recommend to use the weights so if you want them to all be the same you will just use the same number here so even if you use two for example for all of them it's the same as if you would use one for all of them because now it's 2 6 2 6 and 2 6 so each of them is basically a third okay so that's another little side note that you have to take into consideration here okay now let's look at rows because we have columns now but what about rows well we can also use something like grid row definitions in order to define our row definitions in here so here if i create a new row definition here the main property will be height the most important one and here we can also use pixels once again for example so now i have a row of height 100 you can see all three buttons are just at this top part now okay so they're by default in row zero if we define it manually here read row and then we say this one will be in grid row 0 and this one for example will be in grid row 1 then this button 0 1 would go down here if we have another row definition so you can see we don't have this row definition so it stays where it would be by default because it doesn't understand what grid row one is as there is no row one now let's do the same thing with our second part so this one will get a row and in this case i'm going to position it at grid row one now this will push it just down a row so it will put it down here once we have another row but because we only have one row definition this means we only have one row in our ui so you need to create a second row for this to take any effect because otherwise it will take the default which is grid row equals zero okay so let's create another row and now you see that this button suddenly moves down a row and now it's in the second row and now let's actually make them percentage-wise so this one will take a height of one star and this one will also be a one star so they will all both be of same height so to speak they will both just take a certain height well in this case the same height 50 for each of them now this of course will not be what button 0 1 but now it will be actually 1 1 because it's in row 1 and column 1. okay so column this one here and row this one here 1 1. okay now let's create a couple more buttons so this is actually what i would like you to pause the video now and try for yourself so now position buttons in all of the empty fields okay so i hope you tried that i hope you paused the video so in the first column i needed a button at the position zero so this one will be button zero one then i need another button in the column zero in row 1 and this one will be 1 0 and then i finally need another one in column 2 and this one will be the 2 1 button now i want to change this bottom button here i want to get rid of this width and give it a row as well grid row of zero all right and this button here by the way should be one two and not two one okay because it's in the first row second column okay and this is generally how you can use grids you can of course have grids inside of grids you could have text inside of here you could have an image here at the top and then a button somewhere else and all of that you can handle all of that using grids and they're super powerful whenever you want to structure something like this okay and we're going to check out a couple more different layouts in the next few videos but for now i believe it's a good point to make a break and see you in the next video welcome back in this video i would like to talk about spanning and i don't mean spamming but spending so what we want to do is we want to spend items over more different rows or columns for example so let's say we have this structure here with four columns and three rows now what i would like to do is i would like to put an element here at the top which takes multiple columns as well as multiple rows in order to achieve that i can use something called spanning okay so i can add a span to my properties let's say i have a couple of buttons here okay so this button will be in the column of zero as well as in the row of zero and now i'm going to create a couple more buttons here okay so there we are i have all of my buttons in here and they have the right position as well as the name that fits to its row as well as column so this is row two column zero that's why i called this button button two zero or i added the text to it okay so now what i can do is i can make sure that a button for example takes multiple columns so let me get rid of this button here now we have an empty space here and i want to make sure that this button 0 0 will take a bigger span so it will span over 2 columns so i'm going to use the column span for that so there is this property grid column span and here i can for example define that this element should span over two columns now if i wanted to make sure that this button is going to span over two different rows as well i can add a row span here as well let's say a row span of two now it will be overwritten by the other button so let's get rid of those as well so that we can actually see this bigger button now so this button zero zero will now in fact take a bigger portion of the screen in order to make this a little more visible i'm going to change the color of this button so let's change the color to something like aqua okay now you can actually see the difference between this button and the others quite easily alright now a little challenge for you please change the background color of button one two and then change its span for the column to 2 and afterwards to span for the row to 2 as well and at the same time get rid of the buttons that are in the way quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about your shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video okay so i hope you pause the video so the buttons that are in the way are going to be 22 and 23 as well as 13. and now i'm going to change the background color of my button one two and here i'm going to use a blue violet for example and at the same time i'm going to change the column span first and i'm going to set that to two okay so now we'll take two column span of space and i'm going to do the same thing with the row so here the row span will be set to two and there we are now you see how you can use spanning in order to span ui elements over multiple different rows and columns and this of course does not only work with buttons it works with any other type of view that you have in there okay so also here of course what's going to be taken into consideration are going to be the widths of the individual columns okay so this is not a way to make a column wider if you wanted to make a column wider so let's say the last column should be twice as wide what we would need to take into consideration is that now it's 1 4 and what we wanted to have would be two times as big which means that it will take half of the screen okay that would be basically twice as big if you want it to be twice as big as the rest well you would need to make this three okay so the total it now will be six widths okay and the three will be three sixths which is one half that's how you would for example change the width of a column but you can also see that our button one two is now basically significantly wider it's still spanning over the two columns okay so that's really something that you can play around with and build any type of ui using grids that's why they are so flexible and useful to use alright so that's it for this video and let's have a look at some other controls in the next few videos thanks for watching another part of our wpf series i hope you enjoyed this video if you did then please leave a like and if you loved it then leave us up and also check out the next video in the series you can always refer back to the playlist to find the next video that will help you out with wpf and also if you want to become a real pro in wpf then check out the link in the description to get the full course

Channel: tutorialsEU

Views: 1,312

Keywords: Tutorials, Tutorial, Programming, Course, Learn, Step by step, guide, development, programmer, video course, video tutorial, learn how to, WPF grids, wpf grids structure, app structure with grids, clean app structure, wpf grid rows and columns, wpf grid panel, wpf panel grid tutorial, Position your items and buttons with grids, Create desktop application using WPF, How to create an app with WPF grids, set up grids in wpf, wpf, xaml, windows presentation foundation, panel, wpf tutorial

Id: jQrtG3xKrDc

Length: 23min 37sec (1417 seconds)

Published: Fri Apr 02 2021