Hi again.


The grid object in Silverlight is designed to allow a page that can dynamically resize to the client's window size. These days every browser is on a different resolution, from 800x600 up to 1600x1200 or more! People may expect your application to scale to their resolution.

This can be achieved using grids and using their column and row features. This posting should explain step by step how to create and use columns and rows of a grid.

Follow my previous posting http://www.zerogravitychimp.com/post/Basics-of-Grid-Layout-Setting-the-Design-size.aspx to get the application screenshotted below:

As stated previously, your application will have a grid at its root level. Select this grid in the "Objects and Timeline" panel. You will see a light blue area on the top and left sides of the grid, floating a little away from the edge. If you hover your mouse pointer over these areas, you will see an orange row or column indicator.



as shown above, create a column roughly where you want your divide to occur by simply clicking. This has automatically created 2 "ColumnDefinitions" for you. If you change to split view you will be able to view them in the XAML.



A great trick I want to share with you is that if you want to change any details of the ColumnDefinition or RowDefinition in the design view. Move your mouse pointer between the 'lock' (or other) icon until your cursor changes to a white pointer with a little table icon next to it. If you click now it will select the column, and it will look as follows:



When you have done so you can easily edit or view the Type and value (Width or Height) of a Column or Row Definition using the Properties area as shown. Please note that using design view you cannot edit the following properties, which are editable in the XAML directly:
(B) MinWidth, MaxWidth for columns
(B) MinHeight, MaxHeight for Rows.

Build and Run the project now by pressing F5 from Expression Blend - see how this compares to the version before columns were added:



Now this may seem like a small difference, but noticing the change is really important! The Rectangles on the left and the big blue one on the right are now sizing *Proportionately* to the total width. The proportion is based on the value you can see in the previous screenshot.

To edit the way your columns are spaced, you can click and drag the small blue triangle at the top of your ColumnDefinition in the design view. Go into the split view and have a look at how the values change in the XAML when you resize the columns:



In the screenshot above, I selected the column using the trick I described earlier in this post, and I can see that the values also change in the properties panel for that ColumnDefinition.

Please note that all of these operations are also possible for the RowDefinition type, they work in the same fashion, and are created by clicking down the left of the grid.

So far I haven't addressed the different types of columns and rows. These can be changed by clicking on the "Padlock" (or other) icon. Here's a quick run down of the types: Star, Pixel, and Auto:

a) Star, which allows for Proportionate size, is the default. The values of each Star column or row are a fraction in the double format. Each of these together usually add up to 1, which represents the total size of the grid when it is rendered.

b) Pixel sizes are literal, such as 300 pixels, and they will not stretch or resize based on the screen size or contents size.

c) Auto sizes will try to shrink to the minimum size based on the contents, and grow if the contents of that column or row also grow.

It can be very hard to understand when and how to use the different column and row types, and how to use them all in conjunction to get your desired effect. I will be going into this in detail in my upcoming posts.

Feel free to provide me with your questions and I will answer them as best I can. Any other input is very welcome in the comments section below.

Stay Tuned!

Zero Gravity Chimp