Silverlight：拉伸到 StackPanel 中的剩余空间答案

【问题标题】：Silverlight: stretching to remaining space in StackPanelSilverlight：拉伸到 StackPanel 中的剩余空间
【发布时间】：2009-07-07 08:55:05
【问题描述】：

我有一个带有两个元素的垂直 StackPanel：一个按钮和一个列表框。如何让 ListBox 拉伸到剩余的页面高度？

<StackPanel Height="Auto" Width="Auto">
    <Button Height="30" Width="100" Content="Get Content" x:Name="GetContent"/>
    <ListBox Height="Auto" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</StackPanel>

请注意，我使用 Grid 容器来实现这一点：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="30" Content="Get Content" Click="OnGetContent" Grid.Row="0" Grid.Column="0"/>
    <data:DataGrid x:Name="MyContent" Margin="0,5" Grid.Row="1" Grid.Column="0"/>
</Grid>

【问题讨论】：

标签： silverlight stackpanel

【解决方案1】：

好吧，您已经找到了解决方案；）默认情况下，StackPanel 不会填充任何剩余空间，因为它们的大小始终等于其子元素的组合所需大小。 Grid 是一种很好的方式，因为它会在浏览器大小发生变化时动态调整大小。马克使用 DockPanel 的答案也很好用。唯一的其他方法是在父控件的大小更改时手动调整元素的大小。一般来说，坚持使用 Grids 进行外部布局，然后用 StackPanels 和其他控件填充它们，您应该已经设置好了。

【讨论】：

【解决方案2】：

您可以使用DockPanel。将第一项设置为停靠顶部，将第二项设置为停靠填充，或使用LastChildFill 属性：

<toolkit:DockPanel LastChildFill="True"
 xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">    
    <Button DockPanel.Dock="Top" Height="30" Width="100" 
     Content="Get Content" x:Name="GetContent"/>
    <ListBox Background="Azure" />
</toolkit:DockPanel>

【讨论】：

感谢您的回答。一个轻微的“问题”是默认情况下 DockPanel 不可用（还没有？），您需要 Silverlight Toolkit。我觉得奇怪的是，虽然 Grid 确实提供了 Height="*"（占用剩余空间/添加拉伸）功能，但简单的 StackPanel 却没有。
我发现 DockPanel 是这里最好的解决方案，因为我在 Scrollviewer 中有 2 个数据网格，这是唯一有效的方法。

【解决方案3】：

我同意 James 的观察，即“默认情况下，StackPanel 不会填充任何剩余空间，因为它们的大小始终等于其子元素的组合所需大小。”这正是发生的事情，但这不是预期的结果。

我明白为什么这条指令会将内容压缩到最小的必要空间中。

<StackPanel Height="Auto" Width="Auto">

但是... StackPanel 接受一个 HorizontalAlignment 参数 - 如果选择该参数，应该会导致堆栈面板填充其父容器的内容。这正是设置 Orientation="Vertical" 时发生的情况。请注意，在这种情况下，StackPanel 将确定有多少水平空间可用并将其分配给子控件。

<StackPanel Height="30" Orientation="Vertical" HorizontalAlignment="Stretch" > 
   <TextBox /> <!--TextBox fills entire space-->
</StackPanel>

只有当 Orientation="Horizontal" 时，Horizontal child sizing 才会失效。

<StackPanel Height="30" Orientation="Horizontal" HorizontalAlignment="Stretch" > 
   <TextBox /> <!--TextBox fills smallest space available-->
</StackPanel>

【讨论】：

我现在也在为此苦苦挣扎（不过我正在使用 WPF）。在 StackPanel 上设置 Orientation="Horizontal" 以某种方式阻止它使用 HorizontalAlignment="Stretch" 进行拉伸。
我刚遇到这个......这似乎比什么都重要。

【解决方案4】：

使用 UniformGrid Columns="2" 而不是 StackPanel。

【讨论】：