Join Walt Ritscher for an in-depth discussion in this video Exploring sophisticated layout with the grid, part of Building Windows Store Apps Essential Training.
The Grid panel is most powerful layout panel in WinRT. It is the default layout panel when you create a new XAML document in Visual Studio or Expression Blend, you automatically get a grid as the main element. When you add a grid, it contains one row and one column. It is up to you to add the additional rows, or columns. When you have the grid structure the way you want, you assign each child element a location in a suitable row and column within the grid. In Visual Studio, I'm in a project called UsingGrid.
Here's the main UI of the app. It contains five buttons along the side that I want to use for the different demos. We'll start by looking at the AddRows example. On this page, I have a grid with a gray background, and I've defined three rows already. If I select the grid, you'll be able to see those in the designer. With the blue lines, you make this a little bit smaller. I'll hold down the Ctrl key and use my mouse wheel to make it a little bit smaller.
Then I'll hold down the spacebar and use the mouse button to move up so it's a little bit more visible. Now I'll select that grid again. The blue lines represent the rows. There are no columns yet. If you're the kind of person that likes XAML, you can add them easily by coming down here and picking the GridColumnDefinition like so, and now I have one column, which is the default. I'd prefer my XAML to look like this. I will erase that last element. And then I'm going to copy this twice, and now I have two column blue lines.
This button is not specifying a row or column, so it goes in row 0, column 0, numbering starts with a 0. I can change that by coming down here and typing in Grid. What I'm doing is setting a property on the button, but it's the grid that's interested in the information; so Grid.Row="1". That moves the button down to the second row. And now, I'll say Grid.Column="1" and now it's moved into the center area.
Now I'll run the application by pressing Ctrl+F5. And then clicking on this Add Rows button, that button, the child element there is in the center cell, but you can't tell where it is because none of the lines are visible when you're running the application. Alt+F4 to close the app and I'll switch back to Visual Studio. I can add columns to this grid in another fashion. If I move my cursor up to the top area of Visual Studio, you'll see that I get a yellow triangle. Now when I click, I'm adding another column, and I'm adding another row.
Let me zoom in a little bit so we can see what we're going to do with this button, and make sure that we can see the XAML on the bottom of the page. Now watch what happens when I pick up this button and move it to a new location. If you keep your eye on the XAML, you'll see that it updates the Grid.Row and Grid.Column based on my movements. If I drop the button between the two cells then you'll see that it adds this property called ColumnSpan. Same thing happens if I move it, so it spans to rows.
So it's smart about this. The way that ColumnSpan works is you're telling the element to go in one column, but you're telling it that it needs to go across the boundary of another column, spanning two columns. Next, let's look at this Placing panel in Grid. Here's my grid definition, and inside my grid definition is the Stackpanel. Sophisticated layout in the framework is accomplished with nested panels. A grid is usually filled with a dense layer of child panels.
This is a simple example to show what I mean. The stack panel is living inside the grid. It's the Stackpanel specifying Grid.Column="1". And then the buttons live inside the Stackpanel. I can control the sizes of my columns or my rows. There is a Width and Height property available in the row definition and column definition elements. I'll open up this file ControllingSizes. And again, I'll maneuver and then I'll size the UI.
Here I can see the grid, and we'll scroll down here so we can see that row and column definitions. I already have some width set for the columns. I can hardcode a width by specifying a pixel number here. Let's put in 40. Now I have a 40 pixel wide column, the buttons in that column have been compressed in width to fit. I can also specify what's called an Auto Size. What Auto Size means is that the column is sized to whatever the widest element is.
All of these buttons fit nicely in that first column. There is also a star sizing, which is what I had originally; three-star, two-star. The way this works is you're specifying a group of sizes, three plus one plus one. That's the sizes that we're using to determine the width of the unit. So this last column is one unit in width. The next and the last column is one unit in width. And the first column is three units in width. It's a way of doing proportional sizing. You can also change these sizes with the Visual Studio designer.
Let's move up to the top of the grid with your mouse. Let me scroll up so it's a little bit easier to see. You can see this got three-star, one star, and one star. If I hover my mouse over these little white areas, I'll get a size pop up. Now I can come up here and choose to switch this to pixel size or to switch it to auto size, or just switch it back to star size. See how it's changing the values down here in my XAML, and I can also set some other items in here. Select Columns, Move Columns around in the screen.
I'll show you auto size on another page. We'll go to Auto Sizing. Here are several rectangles inside this column, and some of these rectangles are too big to fit because I've set the column to be 100 pixels wide. We'll go up here, we'll change this to Auto and now the column size is the largest item, this blue rectangle. It's common to allow users to size the column or rows in a grid. Silverlight has the grid splitter control, but that control is missing in WinRT.
The solution is to create an extra column, and add an event listener that responds whenever the user drags the sizing column. I've got a demo of that here, DynamicallySizingAtRunTime. I have a number of columns at the top, and this narrow column here, this 30 pixel wide column is going to be my sizing column. Let's see what's in there. Inside that column, I put a rectangle in there with a lavender backfill. I told it to stretch vertical and horizontal so it fills up that column. I told it to span the five rows that I have.
I placed it in the second column as you can see here. And then, I'm using two manipulation items here. I'm going to use the ManipulationDelta event and setting the Manipulationmode property. I'll cover these awesome touch events in more detail later in the course. Let's look at the code; press F7. Here's the splitter ManipulationDelta event. What I'm doing is through this ManipulationDeltaRoutedEventArgs, I'm getting the current translation, how far you've moved to the left or right.
I am finding out the actual width of the column to the left of this cell. Now this is a name that I created. If I switch to my XAML, here's my grid, and in my ColumnDefinitions, this is my 30-pixel wide column that contains the splitter, but I named the column before it and after it, column left, and column right. So I switch back to my code. I'm checking the actual width of the column left and starting in here. And then I'm making some changes. I'm setting the width base on this delta value that I got and then I'm assigning a new width to that column.
So when you run the application, Ctrl+F5, I'll be able to go in here, grab the splitter, and the first column, I'm changing the size of the column, which is also changing the size of the items in there. I'm not changing the size of the right column yet. I'll leave that up to you. The grid is an essential layout control. I use it on nearly every project I create.
- Understanding the Windows 8 ecosystem
- Setting up Visual Studio 2012
- Creating a new project
- Using app templates to jump-start your project
- Working with the device simulator
- Debugging your app
- Creating layout containers
- Controlling the view states
- Working with input controls like check boxes, sliders, and progress bars
- Understanding the application life cycle
- Sending notifications with the Toast API
- Creating Live Tiles
- Using data binding
- Working with sensors and devices