Silverlight: stretching to remaining space in StackPanel

silverlightstackpanel

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>

Best Answer

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.

Related Solutions

R – Silverlight StackPanel Overflow Detection

Something you could try would be wiring up an event in your Silverlight code to the browser's resize event:

void Page_Loaded(object sender, RoutedEventArgs e)
{
  System.Windows.Browser.HtmlPage.Window.AttachEvent("resize", BrowserResized);
}

void BrowserResized(object sender, System.Windows.Browser.HtmlEventArgs e)
{
  //TODO: things
}

I found this link (here) that talks about getting the actual browser size from within Silverlight 2.

There maybe a simpler way, but at first pass, this seems like it could work.

Wpf – How to space out the child elements of a StackPanel

Use Margin or Padding, applied to the scope within the container:

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0,10,0,0"/>
        </Style>
    </StackPanel.Resources> 
    <TextBox Text="Apple"/>
    <TextBox Text="Banana"/>
    <TextBox Text="Cherry"/>
</StackPanel>

EDIT: In case you would want to re-use the margin between two containers, you can convert the margin value to a resource in an outer scope, f.e.

<Window.Resources>
    <Thickness x:Key="tbMargin">0,10,0,0</Thickness>
</Window.Resources>

and then refer to this value in the inner scope

<StackPanel.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
    </Style>
</StackPanel.Resources>

Best Answer

Related Solutions

R – Silverlight StackPanel Overflow Detection

Wpf – How to space out the child elements of a StackPanel

Related Topic