wpf - 具有最小约束的 GridSplitter

Question

我想要一个带有两行和它们之间的分隔符的网格布局。行的最小高度应为 80 像素。

这段代码效果很好:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" MinHeight="80" />
        <RowDefinition Height="5" />
        <RowDefinition Height="*" MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <TextBlock Grid.Row="2" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
</Grid>

但我希望顶行有一个自动高度，直到用户使用拆分器手动更改它。所以我把代码改成这样:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="80" />
        <RowDefinition Height="5" />
        <RowDefinition Height="*" MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <TextBlock Grid.Row="2" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
</Grid>

而且有问题。拆分器仍然满足行约束，但如果我将拆分器拖得太低，它会开始无限增加顶行的高度。这导致底行完全低于窗口的底部边框。

我在 GridSplitter 代码上做了一些 Reflector，如果行具有 Auto 或 Star 高度，它会使用不同的逻辑。

任何建议我如何“修复”它？

Answer 1

我自己也遇到过几次这个问题。似乎 GridSplitter 不能很好地与 Auto 配合使用。也就是说，我找到了一个潜在的解决方法。

您可以使用“星形系数”指定 GridLength 对象的值。这充当所讨论长度的乘数。

在您的示例中，如果您将要保留的行作为星号，并将星号系数设置为一个非常大的数字，则该行将占用所有可用空间(强制另一行成为其最小高度)。虽然这与“自动”的行为不同(第一行的高度不由其内容高度决定)，但它可能会让您更接近。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" MinHeight="80" />
        <RowDefinition Height="5" />
        <RowDefinition Height="10000*" MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <TextBlock Grid.Row="2" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
</Grid>