Use the Visual Studio Designer to change row and column sizes. Learn how to set the three sizing options: auto, fixed (pixel size), and proportional (star size).
- [Instructor] In this video, I'll look at how to use the Visual Studio Designer, to change, or modify, the size of a column definition, or a row definition. For this example, I'll be working with column definitions, but, everything I show you, also applies to row definitions. For this example, I have two grids, I have an inner grid, and an outer grid. The inner grid has a margin set of 20. And, then, I have three columns defined, in there. And, inside the grid, are three LetterBoxes, one in each column. Currently, the sizes are set to one star, three star, and two star.
You can see those, here, in the XAML, and you also can see them, in the Visual Studio Designer. If you look at the top of the grid, you'll see there is a one star, three star, and two star up here, on the dotted line. This is called the grid rail, this dotted line, and, this is one way to look at it, in the Visual Designer, and to know what the sizes are. I can also change the values, by going up to the grid rail. Here's what I mean, when I move my mouse up to the grid rail, you'll see a pop up appear, on the screen, that says three star, or one star, or two star.
And, that pop up stays here, as long as I'm on the grid rail, within that column. As soon as I move off the grid rail, it disappears. That pop up exists, so that I can modify the value, like this. I'll go up here, click on this number value, in the pop up, and type in a new value. I'll type in four, and then press Enter. So, several things happened. This value got updated, here, on the top of this column. You'll see it also got updated, over here, in the column definition, in the XAML.
And, you'll also notice that the sizes of the other columns changed. That's because I'm using proportional sizing. All three of these columns share the same size, and, they're taking a proportion of it. This is one units worth, this is four units worth, and this is two units worth. You also can think of it as proportional percentage size, is another way of thinking about it. Now, I can also go up here and change whether I'm working with star size, or, one of the other ones. So, let's review what we know about this. You can have star size, which is also known as proportional sizing, you can have absolute size, which is also called pixel size, and, you can have an auto size, which means it sizes to the content, whatever the largest item is, that's in that column.
Now, I can change those values, by clicking on this second part of the pop up. Where it says star size, I'll click on this icon. And, it swaps out, that says the old value of four stars, is also equivalent to 230 pixels, in width. It uses that new value, and, it also shows me this padlock, and the tool tip, that says its pixel size. I click on it a third time, it switches over to this new icon, the crossed arrows. It says auto size, and, you'll see now, that this sizes to the largest item, that's in that column.
Since I only have one LetterBox, and, the default width of the LetterBox is 80 pixels, I now have an 80 pixel sized column. But, you notice it puts parentheses around it? That tells you it is 80 pixels wide, but, it's 80 pixels wide because of the items that are in that column, it's not hard coded to 80. Now, I'll go back up here, and, I'll click on this item, again, and, you'll see, it switches back to star size, and, it switches back to pixel size. And, now, I can type in a value, here.
120, press Enter, and I get back to a 120 pixel sized column. At the moment I have some mixed sizes, I have star size, pixel size, and star size, again. And, I can switch back over here, I'll switch over to star size. And, now, these show their relative sizes, next to each other, between these three columns. Another way of changing them, is to drag this selector, here. Now, let's review what we know about the grid rail.
If I move my mouse over the grid rail, not only do I get the pop up, but, I also get this orange triangle, which represents adding a new column definition. If I want to modify the existing column definition, I go to the blue triangle, my mouse changes to a two headed arrow, and, now, I can drag this along. So, this is a way of changing it, with your mouse. And, you'll see, that the values on either side change. So, as I make this column wider, the third column gets narrower, that makes sense. If I change this size, the first column gets wider, the middle column gets narrower.
Now, you can modify this behavior, by holding down the shift key. Holding down the shift key, on my keyboard, now, when I move this selector, you see that it's making the first column smaller, but, it's not touching the size of the second column. And, because I'm not touching the size of the column, and I'm making the first column narrower, it's also changing the size of the grid. And, you'll see that there's a new value that's been added, here, or, there's a margin that's been added, to the grid. So, this is now adding some padding, or, what's called margin, it's actually not called padding, the technical term is margin.
And, when I release the shift key, and, go back here, now it's using the relative position, between these two columns. There's also a control key, that can be used to manipulate this, but, I'll hold off on talking about that, until we get around to talking about the sizes of the actual items that are inside the columns, and rows, and we'll talk about their margins, and how they work, how the sizes work when they're inside a column. So, let's look at what we've seen.
You can use the Designer, inside Visual Studio, to read the values of the size, change the type of sizing, from auto, to pixel, to the proportional sizing, and, you can also type in new values, there, to modify the value, and, you can also use the drag icon, to change the size of the columns.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels