Defining an order of clipping the rows of a Silverlight grid control

Question

I am using a Grid-control like this:

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

    <Rectangle Grid.Row="0" Fill="Red"></Rectangle>
    <Rectangle Grid.Row="1" Fill="Green"></Rectangle>
    <Rectangle Grid.Row="2" Fill="Yellow"></Rectangle>
    <Rectangle Grid.Row="3" Fill="Gray"></Rectangle>
</Grid>

Suppose the height of the grid is 50 pixels. Obviously, the heights of the rows will be 10, 10, 20 and 10 pixels.

Now suppose that the height of the grid is 29 pixels. The heights in this case will be 10, 10, 0 and 9 pixels, meaning that the last row gets clipped.

Is there a way to assign an order in which the rows will get clipped? For instance, I want the grid to start clipping the second row (the one with the green rectangle) instead of the last row, so that with the grid height of 29 pixels, the heights of the rows will be 10, 9, 0 and 10 pixels.

Answer 1

[Download the Toolkit here]

This is where DockPanel comes to the rescue (this is written in WPF but should work similarly in SL with the toolkit, just add the correct xmlns):

<DockPanel>
    <Rectangle DockPanel.Dock="Top"
               Height="10"
               Fill="Red" />
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <Rectangle DockPanel.Dock="Top"
               Height="10"
               Fill="Green" />
    <Rectangle Fill="Yellow" />
</DockPanel>

Some notes:

1. this will work with only one starred row/column, if you need more than one - in some cases another inner DockPanel might help but not always.
2. I've kept the visual order of those rectangles, but the placement in the code changed - DockPanel will first clip its last child, then second from last and so on till first child. Order of children is extremely important and not very intuitive, pay attention to the order of each child and it's DockPanel.Dock setting.
3. DockPanel is truely the unsung hero of the layout system. :)

Editing to answer first comment:

You mention only the red and green rectangles in your comment, so I guess that yellow still takes all available height (star row) but I'm not sure about the grey rectangle. Based on this here are two options that I found.

For clipping order of Yellow -> Red -> Green -> Grey:

<DockPanel>
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <DockPanel DockPanel.Dock="Top">
        <Rectangle DockPanel.Dock="Bottom"
                   Height="10"
                   Fill="Green" />
        <Rectangle DockPanel.Dock="Top"
                   Height="10"
                   Fill="Red" />
    </DockPanel>
    <Rectangle Fill="Yellow" />
</DockPanel>

For clipping order of Yellow -> Grey -> Red -> Green:

<DockPanel>
    <DockPanel DockPanel.Dock="Top">
        <Rectangle DockPanel.Dock="Bottom"
                   Height="10"
                   Fill="Green" />
        <Rectangle DockPanel.Dock="Top"
                   Height="10"
                   Fill="Red" />
    </DockPanel>
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <Rectangle Fill="Yellow" />
</DockPanel>

Clipping order of Yellow -> Red -> Grey -> Green, I don't have an answer now. It's much more challenging, tell me if you need it.