C# WPF Tutorial #5 - Grid Control for Basic Responsive Layouts

welcome back everyone today we're going to look at the basics of using grids to start making our UI layouts we are starting with another blank WPF project like before but this time we are going to focus only on the UI layout portion and more importantly the grid control now of course as you can see there are a lot of controls and I'm not going to be able to go in depth with all of them but the grid is such an important control that I want to give it a little bit extra Focus especially up front so you can start building better uis quicker so the first thing I want to mention is that the grid is the default control that is set to the windows content so if we remove this grid we could add a text block and we could say text below and end our text block and you can see that hello shows up there but if we put a second hex block under it you'll notice that it's a squiggly line and it says the property content is set more than once and that's because the window can only have one thing set as its content and that's why a grid is created for you by default and all of your other elements can go inside of the grid now that doesn't mean you have to have grid set to the windows content you could have any number of other containers controls or even a custom control but for now we're going to go with grid because it's simple and Powerful so next let's talk about the grids layout definitions but before we do that I need to show you another way to access a controls properties so the first thing that we did was we set a hello world text block and we had it in a single tag and the property lived within that tag but another way that we could use to access this text property would be to create a text Block open the tag and then close it in another tag so in here which is inside the text block we could add access the text block text property by saying the object dot text just like we would in code and then within that tag we would set the value so this is just the same as doing this so when we access the Grid's layout definitions we're going to access the properties of that Grid in this way so let's do that now so a grid has two main layout definitions row and column so if we said grid dot row definitions and then within the row definitions we could add a new row definition so this element represents a row in our grid so right now you can see this blue outline represents our whole grid but this also represents our single row so if we added a second row definition you can see now our UI is split into a two row grid and we could keep adding them and it would keep adding rows to our grid just like row we can also access the Grid's column definitions and add new column definition so right now we have a single column we add another one we will have two columns and four rows in our layout now doing this is not putting anything in the Grid it's just setting the grid up itself so once we have these definitions defined we can do things like adding things to our grid so I'm going to create a rectangle just for the purposes of setting a fill color so I'm going to just make a red rectangle and it's going to automatically place it in row 0 column 0 which is the first element in each just like an array now say I wanted to create a blue rectangle what's going to happen is it's also going to place it in row 0 column 0 because that is the default so you can see that the first one I defined is actually going to be behind the second one I defined so what I would need to do is actually Define a row and a column that I would want it in so just to be clear this one is actually in Grid dot row equals zero in Grid dot column equals zero you just don't have to Define these properties because they are the defaults so if I put these properties in this one and say change the row to row one that's going to move blue down to row position one and if I change it to column one it will move it over to column one so Row one column one then if I create a third and say make it green it will be in one one but I could move it to say 2 0 and it would put it there now by default a grid is automatically a responsive design because we haven't defined any sort of height or width everything is going to stretch to fit so if we run this our rectangles will not just be the size of our designer but they will stretch depending on how the user resizes the window which can be very useful but sometimes it's not what you want it to do so sometimes you actually have to define static properties for some of your grid elements to give an example let's take away our column definitions which we don't need these properties anymore so now we have rows for red blue green let's take away this fourth row so now we have a three row layout so let's use Visual Studio as our example and let's take a look at its layout so at the core of its layout it has a statically sized menu bar and then it has a second row for all of this content and then it has a very small statically sized footer that says things like ready and add to Source control and if we resize the window the main menu bar and the footer don't resize only the content does so to do that we would need to set specific Heights on our first and our third rows or our rows as position 0 and 2. so looking at Visual Studio let's say that this menu bar is 70 pixels tall so we'll set our first rows height to 70. now this row will always be 70 pixels you can see it's locked then this next two rows are one star the star meaning it is going to stretch into its available space and the one being its proportions so both of them being one means they're going to stretch equally so then the bottom we need it to be static as well this thing is small we'll say it's 20. so let's set its height 20. now it's 20 and locked so when we run this we only have one column that is now no height which means it's star so it is going to stretch all the other two rows do not so now we have the basic layout to match something like Visual Studio we could put all of our run and stop and debug buttons up here and our footer information down here and then this Blue Area would be our content pane so now I'm going to add a few quick xaml comments which you do with an open tag exclamation Dash Dash and then to close it is a dash dash close and I'm going to say this is going to be our menu bar and then I'm going to copy and paste and click PMP based I'm going to separate these out this is going to be our content Pane and this is going to be our footer so now we can see exactly what our grid elements look like so now let's focus on our content pane looking back at Visual Studio this content pane is also split into a lot of different elements so what we can do is instead of having this rectangle at grid Row 1 we're going to add another grid so our grid is going to live in the containing grids Row one so this grid.row is the property of this grid so this grid is actually living at this grids Row one which is here so now the main idea of this grid is a three column layout the toolbox the editor slash designer window and the solution Explorer so what we can do here is we can say grid.column definitions and we can add three columns so if we look back at this Row in visual studio and it's three columns if we resize it you'll see that the first and the third columns do not resize when it's stretched only the middle one does but so I can give you some different examples we're going to say that we want them to be this size but when we resize it we want them all to stretch in proportion to one another so if we look at our column definitions we do not want to set static widths like we had Heights on our rows we want them to be proportional so what you can do is you can say something star in the width and the number that you add before the star is the proportion of that column or row now by default it is one star and you can add any number you want so if I say 22 33 and 44 it's automatically going to do the math and proportion them accordingly but this is hard to tell actually how big your spaces are going to be so I recommend that you do something that adds up to either one or one hundred so if you like to think of 20 being 0.2 and 60 being 0.6 and another 20 percent being 0.2 then we have a full one being a hundred percent or you could say I want this to be twenty percent and this would be sixty percent and this to be twenty percent so now we have a better idea just looking at our numbers What proportion of the screen they're actually going to take up I will clarify one thing if we add another column here you can see it automatically redid the math for us but if I change this to say 100 so now this is 100 pixels well you can see that this is no longer going to be like I said 100 percent this being 20 60 and 20 but really now this equates to 100 of the remaining available space because this column is always going to be 100. so this is the space we have left so this will now take up 20 percent of that remaining available space to fill so let's go ahead and remove this column so now that we have a grid inside of a grid we can add things to this grid we could add another rectangle with a fill of say light gray and it will be in column 0 by default so if we add two more we could say grid dot column one and then grid dot column two and we could change these to say gray and dark gray and now we have our three columns here and if we run this you'll be able to see them resize in proportion to one another so if I stretch it this way the menu bar and the footer do not stretch but if I stretch it this way you'll see that all three panes stretch in proportion to the proportions that we set so that's how you can get a layout to be responsive to exactly what you need it to look like the last thing I want to do is sprinkle just a little bit of reality on this because we only have 35 lines of xaml code this is very manageable but we would never actually use filled rectangles to populate entire areas each one of these areas if you just look at Visual Studio as our example are incredibly complex controls they have controls within them and those controls probably have controls within them so for something like the content pane we'd need to be able to swap it out based on if we're in a xaml file or if we're in a code file so things like that need to be structured well so we would want this to be in its own file maybe called a Content pane custom control that we can create multiples of swap them in and out and only reference them in the main window and if you do that if you make your UI modular then it becomes a lot easier to just pop into a control and modify it rather than trying to dig through thousands and thousands of lines of xaml code trying to find what you need so next up we are going to learn how to create custom user controls and use them in our uis so thanks for watching everybody I do appreciate you hopefully this is helpful please feel free to ask any questions that you might have happy coding and as always until next time take care

Channel: Kampa Plays

Views: 22,588

Keywords: C#, WPF, Grid, Row Definition, Column Definition, Nesting, Responsive Design

Id: KUJCyjT9TX4

Length: 13min 3sec (783 seconds)

Published: Thu Dec 01 2022