wpf - Two groupboxes in dockpanel, how to set resizing (strech & fixed) correctly?

Question

I have a very basic layout, but still not able to get the behaviour I want. Stupid me...

My grid has two columns, dynamic sized column left and fixed sized column right. This is working. Inside the right column I have stackpanel containing two buttons, they follow the window resizing correctly.

Inside the left column I have dockpanel containing two groupboxes, the lower has fixed height and is docked to the bottom. This groupbox follows the window resizing correctly, just like I want.

But I'm not able to get the upper groupbox to fill the upper section of the dockpanel. I can only set its height as fixed or when setting it "Auto" it gets strange height of 23...? I want it to fill the area and follow window resizing. I tried using stackpanel also in this column, but no success.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="220"/>
    </Grid.ColumnDefinitions>        
    
    <DockPanel x:Name="GroupPanel"  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <GroupBox x:Name="AlarmGroup" Header="Alarms" Margin="10"  DockPanel.Dock="Top" />
        <GroupBox x:Name="LogGroup" Header="Log" Height="188" Margin="10" VerticalAlignment="Bottom" />
    </DockPanel>
    
    <StackPanel x:Name="ButtonPanel" Width="190" Grid.Column="1">
        <Button x:Name="StartButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,20,10,0">Start</Button>
        <Button x:Name="StopButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,10,10,0">Stop</Button>
    </StackPanel>
    
</Grid>

question from:https://stackoverflow.com/questions/65837093/two-groupboxes-in-dockpanel-how-to-set-resizing-strech-fixed-correctly

Answer 1

By default, DockPanel fills its remaining space with its last child.

You've set the AlarmGroup GroupBox as the first child, so it takes up only the space it needs; it's default. The second child has a fixed height, so it does not take up the remainder of the space.

To achieve the layout you are looking for, move LogGroup to be the first child of GroupPanel and set its DockPanel.Dock property to Bottom.

Example

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="220"/>
    </Grid.ColumnDefinitions>

     <DockPanel x:Name="GroupPanel">
        <GroupBox x:Name="LogGroup" Header="Log"
                  DockPanel.Dock="Bottom"
                  Height="188" Margin="10"/>                
        <GroupBox x:Name="AlarmGroup" Header="Alarms" 
                  DockPanel.Dock="Top"
                  Margin="10"/>
    </DockPanel>

    <StackPanel x:Name="ButtonPanel" 
                Width="190" 
                Grid.Column="1">    
        <Button x:Name="StartButton" 
                Width="150" Height="40" 
                VerticalAlignment="Top"
                Margin="0,20,10,0">Start</Button>
        <Button x:Name="StopButton" 
                Width="150" Height="40" 
                VerticalAlignment="Top" 
                Margin="0,10,10,0">Stop</Button>    
    </StackPanel>
</Grid>

Result