停靠面板中的两个组框，如何正确设置调整大小（拉伸和固定）？

Question

我有一个非常基本的布局，但仍然无法获得我想要的行为。愚蠢的我...

我的网格有两列，左边是动态大小的列，右边是固定大小的列。这是工作。在右栏中，我有包含两个按钮的堆栈面板，它们遵循 window 正确调整大小。

在左栏中，我有包含两个组框的停靠面板，下部具有固定高度并停靠在底部。这个组框遵循 window 正确调整大小，就像我想要的那样。

但我无法让上方的组框填充停靠面板的上方部分。我只能将它的高度设置为固定的，或者当它设置为“自动”时，它会得到奇怪的 23 高度......？我希望它填充该区域并按照 window 调整大小。我也尝试在本专栏中使用 stackpanel，但没有成功。

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

Answer 1

这适合你吗？

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

    <DockPanel x:Name="GroupPanel"  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        
        <GroupBox x:Name="LogGroup" Header="Log" Height="188" Margin="10" DockPanel.Dock="Bottom"/>
        <GroupBox x:Name="AlarmGroup" Header="Alarms" Margin="10"  DockPanel.Dock="Top" />
    </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>

在 DockPanel 中有一个属性 LastChildFill 默认设置为 true，这意味着您放置的最后一个控件将占用所有 space。我还将 VerticalAligment="Bottom" 更改为 DockPanel.Dock="Bottom"

Answer 2

默认情况下，DockPanel 用最后一个 child 填充剩余的 space。

您已将 AlarmGroup GroupBox 设置为第一个 child，因此它只占用所需的 space；是 default。第二个 child 的高度是固定的，所以它不会占用 space.

的剩余部分

要实现您正在寻找的布局，请将 LogGroup 移动到 GroupPanel 的第一个 child 并将其 DockPanel.Dock 属性设置为 Bottom.

例子

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

结果

Answer 3

根据屏幕大小，日志和警报屏幕同样变小。我试图通过将它分成网格中的分区来做到这一点。够你吃吗？

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

        <Grid x:Name="GroupPanel" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="10"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <GroupBox x:Name="LogGroup" Header="Log" Grid.Column="0" Grid.Row="0" Margin="10"/>
            <GroupBox x:Name="AlarmGroup" Header="Alarms" Grid.Column="0" Grid.Row="2" Margin="10"/>
        </Grid>

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

停靠面板中的两个组框，如何正确设置调整大小（拉伸和固定）？

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

wpf

groupbox

dockpanel