Question

I simply want flowing text on the left, and a help box on the right.

The help box should extend all the way to the bottom.

If you take out the outer StackPanel below it works great.

But for reasons of layout (I’m inserting UserControls dynamically) I need to have the wrapping StackPanel.

How do I get the GroupBox to extend down to the bottom of the StackPanel, as you can see I’ve tried:

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

Answer:

Thanks Mark, using DockPanel instead of StackPanel cleared it up. In general, I find myself using DockPanel more and more now for WPF layouting, here’s the fixed 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

It sounds like you want a StackPanel where the final element uses up all the remaining space. But why not use a DockPanel? Decorate the other elements in the DockPanel with DockPanel.Dock='Top', and then your help control can fill the remaining space.

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> 

If you are on a platform without DockPanel available (e.g. WindowsStore), you can create the same effect with a grid. Here’s the above example accomplished using grids instead:

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