如何让 StackPanel 的子级向下填充最大空间？

Question

我只想在左侧显示流畅的文本，在右侧显示帮助框。

帮助框应该一直延伸到底部。

如果您取出下面的外部 StackPanel ，效果会很好。

但出于布局的原因（我动态插入 UserControls），我需要包装 StackPanel。

如何让 GroupBox 向下延伸到 StackPanel 的底部，如您所见，我已经尝试过了：

• VerticalAlignment="Stretch"
• VerticalContentAlignment="Stretch"
• Height="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>

答案：

谢谢马克，使用 DockPanel 而不是 StackPanel > 清除它。 一般来说，我发现自己现在越来越多地使用 DockPanel 进行 WPF 布局，这是固定的 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" 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

发生这种情况的原因是因为堆栈面板以正无穷大测量每个子元素，作为其堆叠元素所沿轴的约束。 子控件必须返回它们想要的大小（正无穷大不是从 MeasureOverride 在任一轴上），因此它们返回所有内容都适合的最小尺寸。 他们无法知道自己到底需要填充多少空间。

如果您的视图不需要滚动功能并且上面的答案不适合您的需求，我建议您实现自己的面板。 您可能可以直接从 StackPanel 派生，然后您需要做的就是更改 ArrangeOverride 方法，以便在其子元素之间划分剩余空间（为每个子元素提供相同数量的额外空间）。 如果给元素的空间比想要的多，元素应该渲染得很好，但如果给的空间少，你就会开始看到故障。

如果您希望能够滚动整个内容，那么恐怕事情会变得更加困难，因为 ScrollViewer 为您提供了无限量的工作空间，这将使您处于与子元素相同的位置起初。 在这种情况下，您可能希望在新面板上创建一个新属性，让您指定视口大小，您应该能够将其绑定到 ScrollViewer 的大小。 理想情况下，您可以实现 IScrollInfo，但是如果你要正确地实现所有这些，事情就会变得复杂。

Answer 2

另一种方法是使用具有一列和n 行的网格。 将所有行高设置为自动，并将最底部的行高设置为1*。

我更喜欢这种方法，因为我发现网格比 DockPanel、StackPanel 和 WrapPanel 具有更好的布局性能。 但除非您在 ItemTemplate 中使用它们（其中对大量项目执行布局），否则您可能永远不会注意到。

Answer 3

您可以使用 SpicyTaco.AutoGrid - 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>

首先按钮将被填充。

您可以通过 NuGet 安装它：

Install-Package SpicyTaco.AutoGrid

我建议查看 SpicyTaco.AutoGrid。 它对于 WPF 中的表单非常有用，而不是 DockPanel、StackPanel 和 Grid，并且可以非常轻松、优雅地解决拉伸问题。 只需查看 GitHub 上的自述文件即可。

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

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

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

Answer 4

听起来您想要一个 StackPanel，其中最终元素用尽所有剩余空间。 但为什么不使用DockPanel呢？ 用 DockPanel.Dock="Top" 装饰 DockPanel 中的其他元素，然后您的帮助控件就可以填充剩余空间。

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>

如果您所在的平台没有可用的DockPanel（例如WindowsStore），您可以使用网格创建相同的效果。 这是使用网格完成的上述示例：

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