定义剪切Silverlight网格控件的行的顺序

Question

我正在使用这样的Grid控件:

<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>

假设网格的高度为50像素.显然,行的高度将是10,10,20和10像素.

现在假设网格的高度是29像素.在这种情况下,高度将是10,10,0和9像素,这意味着最后一行被剪裁.

有没有办法分配行将被剪裁的订单？举例来说,我想网格开始裁剪第二排(带有绿色矩形),而不是最后一排,使之具备29个像素格高度,行的高度将是10,9,0和10个像素.

Answer 1

[在此处下载工具包]

这就是DockPanel救援的地方（这是用 WPF 编写的，但在 SL 中应该与工具包类似地工作，只需添加正确的 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>

一些注意事项：

1. 如果您需要多个星号行/列，这将仅适用于一个星号行/列 - 在某些情况下，另一个内部DockPanel可能会有所帮助，但并非总是如此。
2. 我保留了这些矩形的视觉顺序，但代码中的位置发生了变化 -DockPanel将首先剪辑其最后一个子项，然后是倒数第二个，依此类推，直到第一个子项。孩子的顺序非常重要，但不是很直观，要注意每个孩子的顺序及其DockPanel.Dock设置。
3. DockPanel确实是布局系统的无名英雄。:)

编辑回答第一条评论：

您在评论中只提到了红色和绿色矩形，所以我猜黄色仍然占据所有可用高度（星行），但我不确定灰色矩形。基于此，我发现了两个选项。

对于黄色 -> 红色 -> 绿色 -> 灰色的剪切顺序：

<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>

对于黄色 -> 灰色 -> 红色 -> 绿色的剪切顺序：

<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>

裁剪顺序是黄色->红色->灰色->绿色，我现在没有答案。这更具挑战性，如果你需要的话请告诉我。