How to make a WPF window resizable if a Grid row contains a collapsed element

Question

I have a problem with the design of a resizable WPF window. The result shall be that the window elements are resized automatically while changing the width and height of the window by dragging with the mouse.

The base panel is a Dockpanel on which the first element is a ToolBar which is positioned at the top. Then comes a Grid with two rows. In each of the rows is a DockPanel with inner elements. Some of these elements can be hidden by Visibilty.Collapsed (which would be made by properties in the final version). For testing purposes i have two DockPanels after ToolBar and i have set the visibility of the first in the XAML file to Collapsed. When i start the application the window seems to be correct.

But as i click the bottom of the window for changing the height by dragging, the second Dockpanel gets smaller and the place where the collapsed Dockpanel would have been gets visible.

What have i done wrong?

Here is my XAML:

<Window x:Class="WPFResizable.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFResizable"
        mc:Ignorable="d"
        Title="MainWindow"
        SizeToContent="Height"
        Width="525">

    <DockPanel VerticalAlignment="Stretch" Background="AliceBlue">
        <Button DockPanel.Dock="Top" Height="40" Content="ToolBar"/>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <DockPanel Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" Visibility="Collapsed">
                <GroupBox Margin="5"
                          Header="Group 1">
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <TextBox Text="Test 1"
                                 MinWidth="400"
                                 MinHeight="100"
                                 Margin="5"/>
                    </ScrollViewer>
                </GroupBox>
            </DockPanel>

            <DockPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
                <GroupBox Margin="5"
                          Header="Group 2">
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <TextBox Text="Test 2"
                                 MinWidth="400"
                                 MinHeight="100"
                                 Margin="5"/>
                    </ScrollViewer>
                </GroupBox>
            </DockPanel>
        </Grid>
    </DockPanel>
</Window>

Answer 1

I think this will do what you want, if I correctly understand what you're trying to do.

1. VerticalAlignment="Stretch" is redundant on a Grid child, and if there's only one column, you don't need to specify Grid.Column on the children.

2. Your first grid row had Height="*", which resulted in it taking up half the height of the grid whether or not its content was visible. I've written a Style with a Trigger that changes that row's height to Auto when its content is not visible. This depends on there being exactly one element in the row, but since you've got a DockPanel there, you seem to be thinking along those lines already.

   <Grid DockPanel.Dock="Bottom">
       <Grid.RowDefinitions>
           <RowDefinition>
               <RowDefinition.Style>
                   <Style TargetType="RowDefinition">
                       <!-- 
                       Must set the default in a Setter instead of an attribute, or 
                       dependency property precedence will override the trigger
                       below. 
                       -->
                       <Setter Property="Height" Value="*" />
                       <Style.Triggers>
                           <DataTrigger 
                               Binding="{Binding Visibility, ElementName=TopChildPanel}"
                               Value="Collapsed"
                               >
                               <Setter Property="Height" Value="Auto" />
                           </DataTrigger>
                       </Style.Triggers>
                   </Style>
               </RowDefinition.Style>
           </RowDefinition>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
   
       <DockPanel x:Name="TopChildPanel" Grid.Row="0" Visibility="Visible">
           <GroupBox Margin="5"
                     Header="Group 1">
               <ScrollViewer 
                   HorizontalScrollBarVisibility="Auto" 
                   VerticalScrollBarVisibility="Auto">
                   <TextBox Text="Test 1"
                            MinWidth="400"
                            MinHeight="100"
                            Margin="5"/>
               </ScrollViewer>
           </GroupBox>
       </DockPanel>
   
       <DockPanel Grid.Row="1">
           <GroupBox 
               Margin="5"
               Header="Group 2">
               <ScrollViewer 
                   HorizontalScrollBarVisibility="Auto" 
                   VerticalScrollBarVisibility="Auto"
                   >
                   <TextBox 
                       Text="Test 2"
                       MinWidth="400"
                       MinHeight="100"
                       Margin="5"/>
               </ScrollViewer>
           </GroupBox>
       </DockPanel>
   </Grid>