In Part 2: Using Layout Management of my previous Silverlight tutorial series I talked about the layout management system within Silverlight and WPF, and how we can use layout panels to easily control application layout and flow.  Expression Blend makes defining layout rules easy, and includes built-in tool support for using these layout panels.

Remember that our goal in building our chat application is to have UI that looks like this:

Figure 13

To do this we'll start by defining a three row <grid> layout on our page.  We'll do this by hovering the mouse over the left margin of the design-surface and then click where we want to establish a new row definition (below I've already setup a top row definition - the cursor location circled in red indicates where I'll click to add a second row definition):

Figure 14

Clicking on the top-left corner of the design surface (circled in red below) allows us to toggle whether the design surface is in Canvas layout mode or Grid layout mode.

Figure 15

When in Grid layout mode Blend will show us whether a particular row or column has a fixed width, or whether it is proportional to the size of the control.  Above the "empty locks" indicates that the three rows are currently proportional to each other (meaning they will all increase proportionally if we resize the browser to get bigger):

If we click the top and bottom locks we can set those rows to have a fixed height instead, and leave the middle row to fill the remaining height.

Figure 16

One last step we can take is to click on the top margin and define a right-hand column as well - which we'll set to have a fixed width (and leave the left column to dynamically resize):

Figure 17

Once we do the steps above, our XAML file with have a Grid defined like so:

Figure 18

Useful Tip: Above we have a fixed width and height set for our Silverlight application (notice the Width and Height attributes on the root <UserControl> element).  We can cause the application to instead have a dynamic size and automatically flow and size to fit the containing HTML element or browser window size by removing the Width and Height attributes completely (I talk about this at the end of my layout tutorial here).  If we want to set a design-time width and height on our application, we can do that by setting a d:DesignWidth="640" and d:DesignHeight="476" attribute on the root UserControl element.  This will cause the designer to default to that size dimension when using the designer on the application.