Comment obtenir les enfants de StackPanel pour remplir un maximum d'espace vers le bas?

Question

Je veux simplement le texte qui coule à gauche, et une boîte d'aide à droite.

La fenêtre d'aide devrait s'étendre jusqu'au fond.

Si vous prenez la StackPanel externe en dessous fonctionne très bien.

Mais pour des raisons de mise en page (j'insérer dynamiquement UserControls) je dois avoir le StackPanel d'emballage.

Comment puis-je obtenir GroupBox pour étendre au fond du StackPanel, comme vous pouvez le voir, je l'ai essayé:

• VerticalAlignment = "Stretch"
• VerticalContentAlignment = "Stretch"
• Taille = "auto"

XAML:

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600">
    <StackPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                Background="Beige" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" />
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </StackPanel>
</Window>

Réponse:

Merci Mark, à l'aide DockPanel au lieu de StackPanel effacé vers le haut. En général, je me trouve en utilisant DockPanel de plus en plus maintenant pour WPF layouting, voici le XAML fixe:

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600" MinWidth="500" MinHeight="200">
    <DockPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            MinWidth="400"
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <Border CornerRadius="3" Background="Beige">
                    <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" 

                Padding="5"/>
                </Border>
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </DockPanel>
</Window>

Answer 1

On dirait que vous voulez un StackPanel où l'élément final utilise tout l'espace restant. Mais pourquoi ne pas utiliser un DockPanel? Décorez les autres éléments du DockPanel avec DockPanel.Dock="Top", puis le contrôle de votre aide peut remplir l'espace restant.

XAML:

<DockPanel Width="200" Height="200" Background="PowderBlue">
    <TextBlock DockPanel.Dock="Top">Something</TextBlock>
    <TextBlock DockPanel.Dock="Top">Something else</TextBlock>
    <DockPanel
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Height="Auto" 
        Margin="10">

      <GroupBox 
        DockPanel.Dock="Right" 
        Header="Help" 
        Width="100" 
        Background="Beige" 
        VerticalAlignment="Stretch" 
        VerticalContentAlignment="Stretch" 
        Height="Auto">
        <TextBlock Text="This is the help that is available on the news screen." 
                   TextWrapping="Wrap" />
     </GroupBox>

      <StackPanel DockPanel.Dock="Left" Margin="10" 
           Width="Auto" HorizontalAlignment="Stretch">
          <TextBlock Text="Here is the news that should wrap around." 
                     TextWrapping="Wrap"/>
      </StackPanel>
    </DockPanel>
</DockPanel>

Si vous êtes sur une plate-forme sans DockPanel disponible (par exemple Windows Store), vous pouvez créer le même effet avec une grille. Voici l'exemple ci-dessus réalisée en utilisant des grilles à la place:

<Grid Width="200" Height="200" Background="PowderBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <TextBlock>Something</TextBlock>
        <TextBlock>Something else</TextBlock>
    </StackPanel>
    <Grid Height="Auto" Grid.Row="1" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <GroupBox
            Width="100"
            Height="Auto"
            Grid.Column="1"
            Background="Beige"
            Header="Help">
            <TextBlock Text="This is the help that is available on the news screen." 
              TextWrapping="Wrap"/>
        </GroupBox>
        <StackPanel Width="Auto" Margin="10" DockPanel.Dock="Left">
            <TextBlock Text="Here is the news that should wrap around." 
              TextWrapping="Wrap"/>
        </StackPanel>
    </Grid>
</Grid>

Answer 2

La raison pour laquelle cela se produit parce que les mesures du panneau de pile chaque élément enfant avec l'infini comme la contrainte de l'axe qu'il empile des éléments le long. Les contrôles enfants doivent retourner la taille qu'ils veulent être (l'infini positif n'est pas un retour valide de la IScrollInfo , mais qui commence à se compliquer si vous allez mettre en œuvre toutes correctement.

Answer 3

Une autre méthode consiste à utiliser une grille avec une colonne et n lignes. Régler toutes les lignes hauteurs à Auto, et la partie la plus basse hauteur de la ligne à 1*.

Je préfère cette méthode parce que je l'ai trouvé Grids ont de meilleures performances de mise en page que DockPanels, StackPanels et WrapPanels. Mais à moins que vous les utilisez dans un ItemTemplate (où la mise en page est en cours d'exécution pour un grand nombre d'articles), vous remarquerez sans doute jamais.

Answer 4

Vous pouvez utiliser rel="noreferrer"> version modifiée de StackPanel:

<st:StackPanel Orientation="Horizontal" MarginBetweenChildren="10" Margin="10">
   <Button Content="Info" HorizontalAlignment="Left" st:StackPanel.Fill="Fill"/>
   <Button Content="Cancel"/>
   <Button Content="Save"/>
</st:StackPanel>

touche d'abord sera remplir.

Vous pouvez l'installer via Nuget:

Install-Package SpicyTaco.AutoGrid

Je recommande également jeter un oeil à WPF-autogrid . Il est très utile pour les formes en WPF au lieu de DockPanel, StackPanel et Grid et résoudre le problème avec des étirements très facile et avec élégance. Il suffit de regarder readme sur GitHub.

<st:AutoGrid Columns="160,*" ChildMargin="3">
    <Label Content="Name:"/>
    <TextBox/>

    <Label Content="E-Mail:"/>
    <TextBox/>

    <Label Content="Comment:"/>
    <TextBox/>
</st:AutoGrid>

Answer 5

Couple de choses que vous pouvez faire:

1: Réglez le Orientation vertical :

<StackPanel Orientation="Vertical"></StackPanel>

2. Régler la Height du StackPanel à la même que celle de la fenêtre:

Et, bien sûr, vous pouvez combiner les Propriétés :

<StackPanel Orientation="Vertical" Height="600"></StackPanel>

Vous n'avez pas besoin de faire tout un tas de travail supplémentaire avec l'installation nugets et tout le reste ....

EDIT

Vous pouvez également placer le StackPanel à l'intérieur d'un ScrollViewer. Cela vous permettra de contrôler la hauteur du GroupBox sans sacrifier la visibilité du contenu.

<GroupBox>
    <ScrollViewer>
        <StackPanel Orientation="Vertical>
              <!-- Place Children Objects here-->
        <StackPanel>
    <ScrollViewer>
<GroupBox>