How to collapse a RowDefinition?

Question

I need to remove the space occupied by a Grid.Row. I am able to collapse (remove) the control I have placed in Grid.Row, but since RowDefinition has fixed size (height) even after removing the child control I still get to see a blank row.

Is there a way to Collapse a RowDefinition/Grid.Row?

Thanks for your interest.

Answer 1

You could have set RowDefinition.Height="Auto" and could have assigned fixed height to the actual visual in that row. This way when the visual is visibly collpased, the row does not occupy the fixed width that was assigned to the row defintion.

Answer 2

Setting RowDefinition.Height ="Auto" is not suitable for all cases, as often we want * sizing of our rows.

Rather than dynamically/programatically adding and removing rows from the list, it is easier and safer to stretch the first rows contents over the next row/s.

This can be done by using a DataTrigger to set Grid.RowSpan on the first item on the grid. Below is a complete example - just paste it into a new WPF window to see it in action.

  <Grid>
        <Grid.Resources>

            <BooleanToVisibilityConverter x:Key="visConverter"></BooleanToVisibilityConverter>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="Orange">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=toggle1, Path=IsChecked}" Value="False">
                            <Setter Property="Grid.RowSpan" Value="3"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
        </Grid>
        <GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" Height="3" 
                      Visibility="{Binding ElementName=toggle1, Path=IsChecked, Converter={StaticResource visConverter}}"></GridSplitter>
        <Grid Name="bottomGrid" Grid.Row="2" Background="LightBlue" 
              Visibility="{Binding ElementName=toggle1, Path=IsChecked, Converter={StaticResource visConverter}}">
        </Grid>
        <ToggleButton Name="toggle1" VerticalAlignment="Top">Hide/Show</ToggleButton>
</Grid>