Два групповых ящика в док-панели, как правильно настроить изменение размера (растянутое и фиксированное)?

У меня очень простой макет, но я все еще не могу добиться желаемого поведения. Глупый я...

Моя сетка имеет два столбца: столбец динамического размера слева и столбец фиксированного размера справа. Это работает. Внутри правого столбца у меня есть панель стека, содержащая две кнопки, они правильно изменяют размер окна.

Внутри левого столбца у меня есть док-панель, содержащая два групповых ящика, нижняя имеет фиксированную высоту и пристыкована к нижней части. Этот групповой блок правильно изменяет размер окна, как я и хочу.

Но я не могу заставить верхний групповой ящик заполнить верхнюю часть док-панели. Я могу только установить его высоту как фиксированную или при настройке Auto он получает странную высоту 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>

groupbox wpf dockpanel
person MikkoR    schedule 21.01.2021    source источник

Ответы (3)


arrow_upward
1
arrow_downward

По умолчанию DockPanel заполняет оставшееся пространство своим последним дочерним элементом.

Вы установили AlarmGroup GroupBox в качестве первого потомка, поэтому он занимает только то пространство, которое ему нужно; это по умолчанию. Второй дочерний элемент имеет фиксированную высоту, поэтому он не занимает оставшуюся часть пространства.

Чтобы добиться желаемого макета, переместите 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>

Результат

Приложение Wpf

person D M    schedule 22.01.2021

arrow_upward
0
arrow_downward

Это работает для вас?

<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

person Pierre Michel    schedule 22.01.2021

arrow_upward
0
arrow_downward

В зависимости от размера экрана экраны журналов и аварийных сигналов уменьшаются в равной степени. Я попытался сделать это, разделив его на разделы в сетке. Вам достаточно?

<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>
person saklanmaz    schedule 22.01.2021