Silverlight: stretching to remaining space in StackPanel

Question

I have a vertical StackPanel with two elements: a Button and a ListBox. How can I have the ListBox stretch to the remaining page height?

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

Note that I got this to work using a Grid container:

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

Answer 1

You can use a DockPanel. Set the first item to dock top and the second to dock fill, or use the LastChildFill property:

<DockPanel LastChildFill="True">    
    <Button DockPanel.Dock="Top" Height="30" Width="100" 
     Content="Get Content" x:Name="GetContent"/>
    <ListBox Background="Azure" />
</DockPanel>

Answer 2

Well, you already found the solution ;) StackPanels won't fill any remaining space by default because their size is always equal to the combined required size of their child elements. Grid is a great way to go because it will dynamically resize when the browser size changes. Mark's answer of using a DockPanel works fine too. The only other method would be to manually size the elements when the parent control's size changes. In general through, stick with Grids for the outer layout and they fill them up with StackPanels and other controls and you should be set.

Answer 3

I agree with James' observation that "StackPanels won't fill any remaining space by default because their size is always equal to the combined required size of their child elements." That is exactly what happens, but this isn't the expected result.

I can see why this instruction would compress the contents into the smallest necessary space.

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

However... StackPanel accepts a HorizontalAlignment argument - which if selected should cause the stack panel to fill the contents of its parent container. This is exactly what happens when you set Orientation="Vertical". Observe that in this case the StackPanel will determine how much horizontal space is available and allocated it to the child controls.

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

Its only when Orientation="Horizontal" that the Horizontal child sizing breaks down.

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