Silverlight: stretching to remaining space in StackPanel

Randy Voet picture Randy Voet · Jul 7, 2009 · Viewed 43.8k times · Source

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

James Cadd picture James Cadd · Jul 7, 2009

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.