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>

score 39 · Accepted Answer · answered Jul 07 '09 at 12:19

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.

score 20 · Answer 2 · edited Apr 17 '14 at 12:02

20

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

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

edited Apr 17 '14 at 12:02

George Birbilis

13
2

answered Jul 07 '09 at 10:38

Mark Heath

48,273
29
137
194

Thanks for the answer. A slight 'problem' is that the DockPanel isn't available (yet?) by default and that you need the Silverlight Toolkit. I find it strange though that although the Grid does provide a Height="*" (take remaining space / add stretched) functionality a simple StackPanel doesn't. – Randy Voet Jul 07 '09 at 12:16
I found the DockPanel the best solution here as I had 2 datagrids inside a Scrollviewer and this is the only thing that worked. – Rodney Jul 17 '10 at 23:16

score 15 · Answer 3 · answered Apr 09 '10 at 00:16

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>

I'm also struggling with this at the moment (I'm using WPF though). Setting Orientation="Horizontal" on StackPanel somehow prevents it from stretching with HorizontalAlignment="Stretch". — aks, Apr 09 '10 at 11:44
I just ran into this... it seems like a bug more than anything. — porges, May 25 '10 at 03:51

score 2 · Answer 4 · answered Jan 18 '12 at 13:34

2

Use UniformGrid Columns="2" instead of StackPanel.

answered Jan 18 '12 at 13:34

BSalita

8,420
10
51
68

Silverlight: stretching to remaining space in StackPanel

4 Answers4

Linked