Silverlight : étirement vers l'espace restant dans StackPanel

Question

J'ai un StackPanel vertical avec deux éléments : un bouton et une ListBox. Comment puis-je faire en sorte que la ListBox s'étire à la hauteur restante de la page ?

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

Notez que j'ai obtenu ce résultat en utilisant un conteneur Grid :

<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

Eh bien, vous avez déjà trouvé la solution ;) Les StackPanels ne rempliront pas l'espace restant par défaut car leur taille est toujours égale à la taille requise combinée de leurs éléments enfants. La grille est une excellente solution car elle se redimensionne dynamiquement lorsque la taille du navigateur change. La réponse de Mark, qui consiste à utiliser un DockPanel, fonctionne également très bien. La seule autre méthode serait de redimensionner manuellement les éléments lorsque la taille du contrôle parent change. D'une manière générale, utilisez des grilles pour la mise en page extérieure et remplissez-les avec des StackPanels et d'autres contrôles.

Answer 2

Vous pouvez utiliser un DockPanel . Définissez le premier élément pour qu'il soit placé en haut et le second pour qu'il soit placé en bas, ou utilisez la fonction LastChildFill propriété :

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

Answer 3

Je suis d'accord avec l'observation de James selon laquelle "les StackPanels ne rempliront pas l'espace restant par défaut, car leur taille est toujours égale à la taille requise combinée de leurs éléments enfants." C'est exactement ce qui se passe, mais ce n'est pas le résultat attendu.

Je peux voir pourquoi cette instruction comprimerait le contenu dans le plus petit espace nécessaire.

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

Cependant... StackPanel accepte un argument HorizontalAlignment - qui, s'il est sélectionné, devrait amener le panneau de la pile à remplir le contenu de son conteneur parent. C'est exactement ce qui se passe lorsque vous définissez Orientation="Vertical". Remarquez que dans ce cas, le StackPanel détermine l'espace horizontal disponible et l'alloue aux contrôles enfants.

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

Ce n'est que lorsque l'Orientation="Horizontal" que le dimensionnement de l'enfant Horizontal ne fonctionne plus.

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

Answer 4

Utilisez UniformGrid Columns="2" au lieu de StackPanel.