CODEWITHSUNDEEP
wpfgroupboxdockpanel
MikkoR
MikkoR

Reputation: 41

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

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>

Upvotes: 0

Views: 278

Answers (3)

Ozgur Saklanmaz
Ozgur Saklanmaz

Reputation: 564

Depending on the screen size, Log and Alarm screens get smaller equally. I tried to do it by dividing it into partitions in a Grid. Is it enough for you ?

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

Upvotes: 0

D M
D M

Reputation: 7179

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

Wpf application

Upvotes: 1

Pierre Michel
Pierre Michel

Reputation: 407

Is this working for you ?

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

In a DockPanel there is a property LastChildFill set to true by default which means that the last coltrol you put will take all the space. I also changed VerticalAligment="Bottom" to DockPanel.Dock="Bottom"

Upvotes: 0

Related Questions