Question

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

我的网格有两列，左边是动态大小的列，右边是固定大小的列。这是有效的。在右列中，我有包含两个按钮的堆栈面板，它们会正确调整窗口大小。

在左栏中，我有包含两个分组框的停靠面板，下部具有固定高度并停靠在底部。这个 groupbox 正确地跟随窗口调整大小，就像我想要的一样。

但我无法让上组框填充停靠面板的上半部分。我只能将其高度设置为固定或将其设置为“自动”时，它的高度为 23 的奇怪...？我希望它填充该区域并跟随窗口大小调整。我也在本专栏中尝试使用 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

默认情况下，DockPanel 用它的最后一个孩子填充它的剩余空间。

您已将 AlarmGroup GroupBox 设置为第一个孩子，因此它仅占用所需的空间；它是default。第二个孩子有固定的高度，所以它不占用剩余的空间。

要实现您正在寻找的布局，请将 LogGroup 移动为 GroupPanel 的第一个子项并将其 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 2

这对你有用吗？

<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，这意味着您放置的最后一个 coltrol 将占用所有空间。我还将 VerticalAligment="Bottom" 更改为 DockPanel.Dock="Bottom"

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>

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

3 个答案: