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

我只是想在左边stream动文字,右边是帮助框。

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

如果你拿出下面的外面的StackPanel它很好。

但由于布局的原因(我插入UserControlsdynamic),我需要包装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> 

回答:

感谢马克,使用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> 

这听起来像你想要一个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),则可以使用网格创build相同的效果。 以上是使用网格完成的示例:

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

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

如果您的视图不需要滚动function,并且上面的答案不适合您的需求,我会build议实施您自己的面板。 你可能直接从StackPanel派生出来,然后你需要做的就是改变ArrangeOverride方法,以便在子元素之间分配剩余的空间(给它们每个相同的额外空间)。 元素如果给予的空间比他们想要的要多,那么就应该罚款,但是如果你给他们less一些,你就会开始看到小毛病。

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

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

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

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

第一个button将被填充。

你可以通过Nuget安装它:

 Install-Package SpicyTaco.AutoGrid 

我也build议看看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> 

你可以做几件事:

1:将Orientation设置为垂直

 <StackPanel Orientation="Vertical"></StackPanel> 
  1. 设置StackPanelHeight与窗口的Height相同:

当然,你可以结合这些属性

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

你不需要做大量额外的工作来安装NuGets和…