Blend Bits 4: Get Your Grids Sorted

Let’s say that I want to create a UI using a Grid with 3 rows in it and I want the bottom row to be sized to its content and the other 2 rows to be sized in a 1:2 ratio.

Firstly, I’d say that I tend to leave Grids in Grid layout mode in Blend. You can switch to Canvas mode using the little widget in the top left but I almost never use it.

image

so leaving that as it is I can quickly add 3 grid lines to mark out the rows that I want by clicking in the left margin of the grid;

image

and I’ve quickly got 3 rows;

image

but they’re not sized the way I want them to be. The open padlock on the left of each row suggests that these are proportionally sized and I tend to find that drawing rows like this will tend to lead to “unusual” numbers for the row sizes.

To see the row size, move the mouse to one of the padlocks and then just slightly up or down until the cursor changes and then click to select that row which will then highlight;

image

and the properties window will then display the property information for the row and you can see here that my row has ended up as being 0.229* sized which is a number no human would come up with.

So, I can easily change this number to be 1 and change the next row to be set to 2 and then if I add some content into the bottom row ( like this Button );

image

then my only remaining job is to tell that row to size to content which I can do by clicking on the padlock itself for that row until it changes into the “auto” sized icon;

image

but, interestingly, that row is not sizing to content. Hmmm – what’s happened? Blend has set a minimum height on the row so back in the property window I need to fix that;

image

and resetting that ( using the little control to the right of the vaue ) sorts out my layout;

image

The other thing to note is that if I actually select one of the little row markers itself ( i.e. the litle blue line with the white arrow head that lives in the left margin ) then the properties window shows the details for the row below ( or to the right in the case of a column ) the selected line.

Why would I select that line? So I can hit the delete key and get rid of the row Smile

Grids are about the most flexible layout that there is in Silverlight so it’s worth getting comfortable with creating and manipulating them inside of Blend.