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

Question

我只想在左边流动文本,在右边有一个帮助框.

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

如果您取出下面的外部StackPanel,它的效果很好.

但由于布局的原因(我正在动态插入UserControl),我需要包装StackPanel.

如何让GroupBox扩展到StackPanel的底部,你可以看到我已经尝试过:

• VerticalAlignment = "弹力"
• VerticalContentAlignment = "弹力"
• 身高="自动"

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>

回答:

谢谢Mark,使用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

听起来你想要一个StackPanel最终元素占用所有剩余空间的地方.但为什么不使用DockPanel？装修中的其他元素DockPanel与DockPanel.Dock="Top",然后你的帮助控制可以填补剩余空间.

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>

Answer 2

发生这种情况的原因是因为堆栈面板测量具有正无穷大的每个子元素作为其堆叠元素的轴的约束.子控件必须返回它们想要的大小(正无穷大不是来自任一轴的MeasureOverride的有效返回),因此它们返回一切适合的最小尺寸.他们无法知道他们真正需要填充多少空间.

如果您的视图不需要具有滚动功能,并且上面的答案不符合您的需求,我建议您实施自己的面板.您可以直接从StackPanel派生,然后您需要做的就是更改ArrangeOverride方法,以便将其子元素之间的剩余空间分开(为每个元素提供相同数量的额外空间).如果给予的元素比他们想要的更多,则元素应该渲染得很好,但是如果你给它们更少,你就会开始看到毛刺.

如果你想能够滚动整个事情,那么我担心事情将会变得更加困难,因为ScrollViewer为你提供了无限的空间,这将使你处于与子元素相同的位置.本来.在这种情况下,您可能希望在新面板上创建一个新属性,以便指定视口大小,您应该能够将其绑定到ScrollViewer的大小.理想情况下,您将实现IScrollInfo,但如果您要正确实现所有这些,则开始变得复杂.

Answer 3

另一种方法是使用具有一列和n行的Grid .将所有行高度设置为Auto,最下面的行高度设置为1*.

我更喜欢这种方法,因为我发现Grids比DockPanels,StackPanels和WrapPanels具有更好的布局性能.但除非你在ItemTemplate中使用它们(对大量项目执行布局),否则你可能永远不会注意到.

Answer 4

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

我还建议你看一下wpf-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>