The grid is a truly versatile control and it enables you to build very flexible and sometimes complex layouts.

A really important concept includes the possibility of dividing the grid into rows and columns, so that you get even more flexibility for your layouts. With grid control selected, position your mouse pointer over its border. You will notice that the mouse pointer will change its appearance and look like the following screenshot. You can click to add gridlines and define columns and rows in that way.

Now it is important to understand that the grid supports three ways of defining sizes for columns and rows fixed, star, and auto.

Fixed sizing uses exact pixel values to define row or column dimensions and means that they will not resize. Star sizing is using relative dimensions. In fact, it just indicates that width should be relative to the other star-sized columns (or rows, for that matter).

Consider the following examples:

<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1000*"/>
<ColumnDefinition Width="1000*"/>

These three definitions will have the same column width. They will be identical with each column occupying the same amount of space.

Now, consider this sample:

<ColumnDefinition Width="1000*"/>
<ColumnDefinition Width="2000*"/>

Here, the second column will be exactly two times bigger than the first one a ratio of 2:1.

Auto sizing means that the elements contained in a grid will also resize when the parent element resizes. It also means that the size of that column or row will depend on the size of the object that is located in that specific column or row.

In XAML code, those definitions can look like this:

<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69"/>
<ColumnDefinition Width="0.52*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="69"/>
</Grid.ColumnDefinitions>
</Grid>

If you omit the width definition, Blend will automatically use star sizing.

More detailed information about Grid and Canvas panel controls can be found in the Microsoft Expression Blend User Guide. Just hit F1 to access it within your application.

As you might have guessed already, there is no definite suggestion as to whether you should use only one of those layout types. Most likely, you will be using both of them. For example, message boxes or some dialogs will not benefit from resizing, but general application workspaces and web pages might want to look into using the most or all the space available to them in a meaningful manner. Also, if you need to preserve some fixed positions, you will use a fixed layout system.

However, there are some proven practices outlining the usage of fixed and fluid layouts.

Fixed layout works well for message boxes displaying information or errors to end users. They will not benefit significantly by adding the ability to resize them. Same goes for dialog boxes presenting users with progress on operations such as file copying or deleting. Keep their sizes fixed. Of course, you will ensure that they look good at different screen resolutions by testing them. You can even try to optimize content positioning, depending on the current screen resolution, but you should not allow users to resize those types of windows. If you consider web environments (you can apply the same principles here), all those modal windows, pop-up dialogs, and message boxes should be of a fixed size.

When it comes to fluid layouts, the situation is more complex and it is more challenging to give design guidelines. But generally, you should use liquid layout type in cases where your application and dialog boxes can benefit from more space available to them. If you are building a file browser, you should implement the "liquid layout" system and use all available space to show as many files and folders as possible, so that your users can select them without scrolling too much. The same goes for web pages in general, you would want to use as much space as possible for your content. But you should be aware that there are limits. You can put your textual content on the web page in liquid layout and enable it to resize together with your web browser and use the extra space available to them. But from the usability point of view, lines of text that are too long will decrease readability dramatically. Today, screen sizes are often over 20 inches and the trend of increasing sizes will continue into the future for some time does that mean that you should enable your text or controls to scale accordingly? Absolutely not! The general rule is that your line of text should not be longer than about 66 characters. The reason for that is the fact that the human eye struggles with reading lines longer than that. I recall seeing that suggestion in The Elements of Typographic Style written by Canadian typographer, Robert Bringhurst. If you apply some good fonts and think about the overall appearance, you can go up to 75 characters, but don't go over that.

What I like to do is define three sizes for my UI elements: preferred (which is basically default or optimal) size, minimum size, and maximum size. Preferred size is the size that the specific UI element will have on a given screen resolution. Minimum size is the size that will be the smallest size each element can scale to. For example, you can choose to set the minimum size of your window to 800 by 600 pixels and optimize all controls within it to fit into that. Also, by setting maximum size you can ensure that your form and controls will not stretch too much (as I suggested a moment ago when talking about text length). The great thing is that WPF and Silverlight also support these sizes and you can set them for each control you add to your UI.

Other suggestions for dealing with controls in liquid layouts include keeping navigation elements (in web pages) anchored to top and left margins. Controls such as text boxes, tables, grids, and list views should increase their lengths and possibly even widths but again, recall what I have said in the previous paragraph about too long text lines same applies to all controls. If you are using background colors, patterns, or similar elements, they should fill the new space completely and that is the only case where you should use all space available.

It is also important to think about what will happen if your window or web page gets too small for its content. As I said earlier, set the minimum size for each and every control including container controls such as windows or pages. Optimize the layout for that case. If you don't do that, your controls might become inaccessible during run-time, aesthetic dimension will be also destroyed, and your application will become practically useless or extremely hard to use.

Most WPF and Silverlight controls will adjust nicely by adding scrollbars to help adapt to these changes, so that will spare you from implementing all that logic by yourself.

Don't be afraid to put some constraints on liquid layouts, sometimes too much flexibility will harm your user's experience though your intentions were quite the opposite. I am a firm believer that by limiting certain aspects of UI flexibility we are actually helping our users and building better experiences.