The grid arranges child elements in columns and rows. Each row and column supports various sizing constraints. Child element use the grid-attached properties to specify the row and column location and whether to span multiple rows and columns.
- [Instructor] The Grid is one of the most powerful layout panels that we have in WPF. It's very flexible, and it can be complex. You'll find that it's the default element that you find when you create a new window or a new page in WPF. And, it's typically the root of all the other elements that you use. So you might start with a Grid, and create three columns and two rows, and then in one of those columns you might put a StackPanel, and in another one of the columns you might put a DockPanel, so you use it as the basis of of your general UI.
It is important to note that this is a, not a data grid, but it's a layout grid. You indicate how many rows and columns you want, and then you specify the size of those rows and columns. Once you have your layout defined, then each UI element that's inside the Grid should specify what row and column to be placed. And then it also specifies whether or not to span over multiple rows or multiple columns. This is the first layout panel that we've looked at in this chapter that allows its children to overlap.
So each cell can contain many children, and then children can overlap inside that cell, and they can also overlap across cells. Here's my Grid. You see I have a number of LetterBoxes in there, and you'll see that E is the only one that we can see. If I comment out these four lines, Control + K, Control + C, you'll see that the LetterBox A shows up. So the first LetterBox was placed in there, and since there's only one row and one column at the moment, it's put in at full size, it stretches to fill the space inside the Grid.
Then LetterBox B was placed at exactly the same location, and the same size, but it's one higher in what's called the ZIndex, or Z-Order, some people call it. And so it's closer to the user, and so it obscured LetterBox A. Here's how you define some rows. Go to the Grid. Here's the syntax, Grid.RowDefinitions, using the period there. This is called a property element. And then inside the Grid.Definitions, I define something called a row definition, and then I'll copy this and paste it in so that I have four rows.
Now, I haven't specified sizes yet. I'll talk about that in the next video, how sizes work, so that means that all these rows are the same height as the other rows. Next, I'll define some columns. And I'm done. So I have four rows and three columns. Currently, I've only got the one LetterBox in there, so let's un-comment these LetterBoxes, Control + K, Control + U, and then I'll start moving them.
By default, LetterBox A, and all of these are actually, are in the first cell. They're in row zero, column zero. So if you wanted to specify that exactly, you use an attached property. This time it's a property of the Grid class, so it's Grid.Row, so A is no moved down to this position. And I'll move B over here, so that would be over, it would be down one and over two.
Make this a little bit wider so you can see that. So that's a way I like to think of it, count down from cell zero, down one, over two. So if you wanted to go here, it'd be down three, over two. Well, let's take and put LetterBox C here in this cell, so that would be down four, over one. And then I'm going to use the Column Span property. I want the D LetterBox to start in this cell, but I want it to occupy all the room in this cell, plus the cell next to it.
Use the ColumnSpan property for that. And the number here is the number of columns that you want to span. And then finally, I'll put this item, LetterBox E, I'll put it here next to B, so it's down one, over one. I'm using a trick of Visual Studio here. Instead of typing Grid.RowSpan, I just typed the word RowSpan, or part of it, RowSp, and the intellisense engine, the auto-complete engine, found RowSpan as one of my choices, even though I didn't start typing Grid.
And then I can press the Tab key now, or double-click on this with my mouse. I'll press Tab. I specified RowSpan equal to three, and here you can see the overlap happening. It started here, went down two, and you notice how it's covering up LetterBox, what is that, LetterBox D down there? This is the higher in the ZIndex, remember the, this is the one drawn closest to the bottom, because it's the first one in the Grid, and this is the one closest to the user.
So if I wanted D to up here above E, they still overlap, but up here above it, then I would need to change the order here in the Grid, so I would copy D, or cut D, I should say, and move it down here. And now it appears to be layered over top of the E LetterBox. In the next video, I'll take a look at how to specify the sizes for these columns and the rows. Right now, they're all uniform size, so really this is not that much different than the UniformGrid, except that I can overlap elements and I can move them around and position them in different cells, and overlap.
Now I can use the RowSpan and the ColumnSpan. The other thing I can do with the Grid is I can start specifying how these columns or sizes, right now they're proportional size. Well, let's see how to do fixed size and some other sizes.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels