使用扩展器使网格适应可用高度

Question

我有一个“一堆”扩展器，它们可以独立打开/关闭。

除了一个之外，所有的都有一个固定的高度（展开时）。另一个有MinHeight，但我希望它能够拉伸以填充剩余的可用高度。如果扩展器的组合高度大于可用高度，则会出现滚动条。

我已经使用Grid 做到了这一点，每个网格有一个扩展器，Height 行设置为* 用于拉伸扩展器，Auto 用于其他扩展器。

这工作正常，除了在一种情况下：如果可伸缩扩展器折叠，并且其他扩展器的组合高度小于可用高度，那么拉伸扩展器无论如何都会填充剩余空间，只是它的内容被折叠了，所以我得到了一大块背景颜色。

我也尝试过 StackPanel 或嵌套网格，但在不创建其他问题的情况下无法解决该问题。

有什么想法吗？

（将其粘贴到窗口中）

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" MinHeight="23"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Expander IsExpanded="False" Grid.Row="0" Header="Fixed">
            <Border Background="Red" Height="200" />
        </Expander>
        <Expander IsExpanded="False" Grid.Row="1" Header="Stretchy">
            <Border Background="Blue" />
        </Expander>
        <Expander IsExpanded="False" Grid.Row="2" Header="Fixed">
            <Border Background="Green" Height="300" />
        </Expander>
    </Grid>
</ScrollViewer>

Answer 1

默认情况下，扩展器占用所有可用空间。它通过将VerticalAlignment 和HorizontalAlignment 设置为Stretch 来实现这一点。

要解决您的问题，请将VerticalAlignment 设置为Top。然后扩展器只占用它需要的空间。

XAML 如下所示：

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

    <Expander Grid.Row="0" Background="Green">
        <Button Height="50">test</Button>
    </Expander>
    <Expander Grid.Row="1" Background="Red">
        <Button Height="50">test</Button>
    </Expander>
    <Expander Grid.Row="2" Background="Blue" VerticalAlignment="Top">
        <Button Height="50">test</Button>
    </Expander>
</Grid>

编辑：

您应该将第二行的Height 绑定到弹性扩展器的IsExpanded。如果展开，则设置为*，否则设置为auto。您可以使用ValueConverter 来执行此操作。

编辑 2：

正如所承诺的解决您问题的标记和值转换器：

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="{Binding ElementName=Stretchy, Path=IsExpanded, Converter={StaticResource converter}}" MinHeight="23" />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Expander IsExpanded="False" Grid.Row="0" Header="Fixed">
            <Border Background="Red" Height="200" />
        </Expander>
        <Expander x:Name="Stretchy" IsExpanded="False" Grid.Row="1" Header="Stretchy" VerticalAlignment="Stretch" MinHeight="100">
            <Border Background="Blue" />
        </Expander>
        <Expander IsExpanded="False" Grid.Row="2" Header="Fixed">
            <Border Background="Green" Height="300" />
        </Expander>
    </Grid>
</ScrollViewer>

值转换器：

public class BoolToHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        bool? v = value as bool?;
        if (v == false)
            return new GridLength(1, GridUnitType.Auto);
        else
            return new GridLength(1, GridUnitType.Star);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}