Silverlight star-sized grid row (mis)behaves like auto-sized row

Question

I have the following grid as the LayoutRoot control in my Silverlight page:

    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>

The entire contents of the second row is a datagrid populated via data binding, and the total height of the grid is large, maybe 3000 pixels. My understanding is that by doing the row definitions in this way, the first and third rows should have the same height and always remain visible (like header and footer rows) while the second row should be sized to the total height minus 60 for the other rows. But what actually happens is that the second row is taking up the full 3000 pixels, not showing a vertical scroll bar, and pushing the footer row past the bottom of the control. This is what Height="Auto" should do, I think, NOT what Height="*" should do.

What am I missing here? Thanks!

Update: The problem turned out to be that my grid was in a navigation page which was embedded in a main page, because I accepted the default Silverlight project template. This main page was laid out to allow expanding to content, by putting everything in a StackPanel. It doesn't appear that you actually need to set the Horiontal and Vertical alignment properties to Stretch. When I replaced the StackPanel with a grid, and set the inner grid row height to *, it worked as intended.

Answer 1

It all depends on the container that hosts the grid. If the container places no restrictions, the grid will size to take up the maximum available space. Someone must set a restriction, usually the top-most grid (LayoutRoot). You just need to be careful not to break that on one of the levels.

Answer 2

The default behaviour of a topmost grid is to resize to fit content, unless forced to do otherwise.

You need to add VerticalAlignment="Stretch" HorizontalAlignment="Stretch" to your grid itself. That will make it stretch to fit the Silverlight Component dimensions (e.g. 100% of browser).

The basic calculation of rows and columns goes like this:

1. Subtract any fixed size rows/columns
2. Work out and subtract any autosize rows/columns based on content.
3. Divide the remainder proportionally*

*Note: If the grid itself is not constrained the height and width expand to fit the content (like auto).

The way nested containers operate is one of the most confusing things to get right in Silverlight, but once you get all the gotchas it will make perfect sense.