Question

我有一堆“膨胀剂”在彼此的顶部，可以独立打开/关闭。

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

我使用Grid，每个网格有一个扩展器，拉伸扩展器的行Height设置为*，Auto为<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>其他人。

除了一种情况外，这种方法很好：如果有弹性的膨胀器折叠，并且其他膨胀器的组合高度小于可用高度，则拉伸膨胀器无论如何都会填充剩余的空间，只是它的内容崩溃了所以我得到了一大堆背景色。

我还尝试了StackPanel或嵌套网格，但没有设法解决这个问题而没有创建其他网格。

有什么想法吗？

（将其粘贴到窗口中）

db.runCommand( { geoNear: "distances",
             near: [ 83.307974, 17.716456],
             spherical: true
           }  );

Answer 1

Expander默认采用所有可用空间。它通过将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>

ValueConverter：

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(); } }

使用扩展器将网格调整为可用高度

1 个答案: