C# WPF Tutorial - Grid Panel

in this video we will be talking about the grid control grids are used to maintain flexible but structured layouts in the view of your application we will begin with an overview and then apply what we learned in visual studio also in slides I will have some code examples as we do in this one which shows us how we define our grid in our zamel what is a grid a grid is a layout that organizes a collection of rows and columns a structure that maintains a flexible design and a control that helps us position other elements what is a grid used for placing child elements at specific row column locations making sure child elements maintain proportional sizes allow elements to automatically resize and overall having a dynamic view for the user I have very small gift example at the bottom of a application I made to show how dynamic a grid makes the controls within it so rows and columns by default the grid will have one row in one column if we wish to add more we do so by using row definition and column definition collections in these collections we define the amount of items we wish to have so in our code example we have our opening and closing grid tag and then inside we have grid row definitions and then that our row definition items and then we have a grid column definitions and then that we have column definition items so in this case we have 2 rows and 2 columns defined and it would display the grid we see on the right so now let's jump into visual studio real quick and actually type all this out ok so now we're in our visual studio and we have a grid setup for the content of our window and also we're gonna do right here is open up a row and column definitions collection and define some rows and columns so here we'll open it up by saying grid row definitions will have opening closing tags for that and then we're going to say a row definition and then because we want to we're going to call another row definition and now we're going to call a grid dot column definitions collection and inside you guessed column definition items so our designer will quickly show us that now we have two rows two columns creating a 2x2 grid so now we're going to go back real quick and explain exactly how now we are going to assign controls to this grid adding controls so in order to add controls to our grid we declare the row and column inside the controls opening tag like we do for properties so in this code example I have a button and inside the button I defined a grid Row 1 a grid dot column zero marginal five is kind of irrelevant but it's essentially a button that just says I'm a button in a grid and we assigned it to will actually code examples wrong according to the picture in the picture it would actually be row 0 column 1 the values of defining rows and columns starts at 0 so when I say row 0 it actually means the first row when I say column 0 it means the first column which is why this image in the bottom right corner is unfortunately inaccurate according to the example grids spinning just like defining row and column positions we can also define if the control spans across multiple cells so in this example I actually moved it into a top left position of grid row zero and grid column zero but then I also set a grid row span and grid column span to two which spans the button from its assigned position zero zero and allows it to move into two cells of rows and columns creating this four by four button I also take note I added in a margin of five because I wanted to be able to show you the background of the button which is the colored cells to show exactly how its spanning and where it's positioned so again we're going to jump right over to visual studio and apply this okay so now we've learned to set up a row definition collection a column definition collection and now we have the idea of how we're going to actually assign controls within this grip so we want to make sure we stay within our grid tags but we're going to create a button similar to in our example we're going to say button I'm going to say grid dot Rho 0 grid dot column 0 close this and say so here's our button and again since I don't have a margin you'll notice it completely fills the entire grid which they're rather the cell we put it in if we wanted some spacing we're it off do a margin of I'll say 5 as you see it'll space it a little but we also covered spanning which will do and we will call a grid rowspan to to a grid column span - - and here we have exactly what we heard in our example it's a button that starts at 0 0 the margin of 5 and it'll span across two columns and two rows so in this example we have every row and column is the same height with size we can define certain rows to be certain sizes as in heights certain columns to be certain widths some to fill some to automatically adjust and some to be a fixed value so we're going to jump back to our slides and talk about that so the first value we can set for a row or column is the auto value this value will tell the definition to take the exact amount of space it needs but nothing more so in this code example I set the row definition the first one its height to auto and the first column definitions with to auto so we'll see in row 0 column 0 it'll only have the height and width that it requires and nothing more in our row 0 column 1 the yellow we will see that our row has a it'll only take the amount of height it needs but its width will fill and then Row 1 column 0 our blue will do the opposite it'll have an expanding height but a fixed width and then in our Row 1 column 1 it'll fill the remaining space fixed value this will tell the definition to take the numerical value provided so in our row 1 and our column 1 we set the height and width to 50 so our red over here in row 0 column 0 will be a 50 by 50 cell our row 0 column 1 yellow will be a 50 height and then filling in that's with rosier Row 1 column 0 it'll be the opposite it'll be a filling height but I defined width of 50 and then our row 1 column 1 again we'll just simply fill the remaining space star value this will tell the definition to take as much space that is available after Auto are fixed values have been applied so in our row definition our first one we set it to the star value and set our second row to a height of 100 and similar with our column but with width so unlike our other examples we see that our row 1 column 1 has been just filling throughout our examples but in this case we have our row 1 column 1 set to 100 by 100 and then like in our other examples our row 0 column 1 is going to be a width of 100 but a height that fills and then the opposite for our blue and then our row 0 column 0 which is a fill height and fill width will just fill the remaining space after green yellow and blue take what they were defined to take to star value this will tell the definition to take twice the amount of space it would normally fill this could also be 3 times 4 times or five times so when our row definitions our first row is going to take twice the amount of space it would normally take so if I actually put 0 values in the definitions and just left them empty like in our first example our first road definition is going to be twice that size so if I added in another row definition and kept our first row with the two-star height it would actually get smaller it's not based on the other rows heights it's based on what it would normally be based on if the row definitions were equally distributed and in our read in our example over here we see the read is twice the size of the blue so we'll jump over to our visual studio real quick and play around with at least some of these so here we are back to our old example I did remove the column span row span and the margin for our button because we're going to move on to other examples but first I want to cover at least some of the values we talked about that you can provide to definitions so in our first row I'll just give you an example of if we wanted to set the height to auto notice now it's only going to take the amount of space that the button requires or the content within it requires I could just as easily creates let's say we covered a stackpanel could create a stackpanel let's take this button out of the grid will actually add the stack panel to our grid row zero and our column to zero and within this going to put our button but actually going to have to our designer is acting a little buggy there we go so now that we assigned our stackpanel to it this is what is defined to row 0 column 0 and what what it will fit accordingly to so as we get the content in our stack panel to get bigger our row our cell here row 0 column 0 will actually get bigger and it will adjust accordingly could also run the application and notice that as we resize the application it's not going to well it will according to width because we didn't define that as Auto so as we expand it our row 0 column 0 will also expand its width but its height will stay unchanged so could also set our width here to auto notice it'll get smaller because it's only going to take the amount it actually requires and again we'll run and now no matter what we do even if we go past it'll just cut it off it's not going to change at all can also remove the remove and I do want to show you by default again it's going to just equally distribute everything if nothing is defined but will say hey what if I wanted our first columns width to be twice the size it requires twice the room everything else does well here we have that as we run it see as we expand it it will always have the same amount of space in the context of our window this is good for if you want an application capable of if it went to fullscreen or if it was really small it'll always have so if I always wanted like let's say a image to the side of these buttons or a text block to the side of the buttons and actually instead of just saying that how about we actually do that so we'll create another stack panel normally you don't want to at least I don't assign individual controls to cells I usually create a panel or some type of container for controls and then assign that container to these cells so here we're going to say grid row 0 grid column 1 so this will be our other stack panel and we'll say hey I want AIT's X block here okay and well actually even so we can see a little better give it a background yellow there we go so now when we run our application as we resize this we see that it's always going to take the same amount of space so no matter how bigger the buttons get or how much smaller the buttons get I will always have that label next to the buttons okay and I personally believe the best way to really understand the grid because they did take me a second to fully understand is to just mess around with it just do things with it and quickly you'll start to learn what works what doesn't work and may even discover something new so I would just suggest create a bunch of controls too to help you get you stack panels and dock panels and just place them throughout grid add more rows and columns so just add more of these then you can add other controls and see how they react to when you resize windows and I actually think you could learn quite a lot of just messing around with it then necessarily listening or watching how they work so just want to say thank you for watching and I'm sick of saying this at the end of every video so this will be the last time I say it but I am just experimenting around with how I produce videos how I structure them how I explain things if you think I'm over explaining under explaining if you think I need to move at a slower pace or a faster pace or whatever you might think just leave a comment yeah even if you're inclined to dislike the video just leave me a comment and tell me why I'm looking to improve on things and I'm choosing to do the experimentation in the control portion of the videos I will be making cuz I think not that they aren't important but I think you're still able to absorb what I'm saying even if I'm using a not so good method of saying it so thank you for watching and subscribe like or leave a comment

Channel: ToskersCorner

Views: 28,612

Keywords: WPF Tutorial - Grid Panel, WPF Grid, Grid panel, xaml grid, how to use grid, how to, wpf tutorial, tutorial, wpf, wpf tutoriasl, c#, programming, coding, how to code, how to program, programming tutorial, learn to program, leartn to program, programming for beginners, wpf for beginner, wpf controls, wpf 2016, voice tutorial, computer programming, computers, Tosker

Id: qiEHTgqo4yE

Length: 18min 52sec (1132 seconds)

Published: Fri Nov 11 2016