Silverlight：如何在StackPanel中拉伸剩余空间

Question

我有一个包含两个元素的垂直StackPanel：一个Button和一个ListBox。如何让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.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>

- Randy Voet

Answer 1

好的，你已经找到了解决方案 ;) 默认情况下，StackPanels不会填充任何剩余空间，因为它们的大小始终等于其子元素所需的组合大小。 Grid是一个很好的选择，因为它会在浏览器大小改变时动态调整大小。使用DockPanel也可以，Mark的答案效果也可以。另外一种方法是在父控件的大小更改时手动调整元素的大小。总的来说，最好使用Grid来布局外部布局，并使用StackPanels和其他控件填充它们，这样就可以完成了。

- James Cadd

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

- Mark Heath

---

谢谢您的答复。一个小“问题”是，DockPanel默认情况下不可用（还？），需要使用Silverlight Toolkit。虽然Grid确实提供了Height="*"（占用剩余空间/拉伸添加）功能，但简单的StackPanel却没有，我觉得这很奇怪。 - Randy Voet

我发现DockPanel是最好的解决方案，因为我在ScrollViewer中有2个DataGrids，这是唯一有效的方法。 - Rodney

Answer 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"时，水平方向的子元素尺寸才会出现问题。

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

- Slug

---

我目前也在这方面遇到了困难（不过我正在使用WPF）。在StackPanel上设置Orientation="Horizontal"会以某种方式防止它随着HorizontalAlignment="Stretch"进行拉伸。 - aks

我刚遇到这个问题...看起来更像是一个漏洞而不是其他什么东西。 - porges

Answer 4

使用UniformGrid的Columns="2"代替StackPanel。

- BSalita