How to collapse a RowDefinition?

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 sin开发者_StackOverflowce 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.

---

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 collapsed, the row does not occupy the fixed height that was assigned to the row definition.

---

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>

---

It's absolutely okay to apply a style with triggers to your RowDefinition for the row you want to collapse. This can help when you have star values for your heights.

The following might be useful if you wanted to hide a results section before results existed (i.e. a zero-count ObservableCollection), for example.

<RowDefinition>
    <RowDefinition.Style>
        <Style>
            <Setter Property="RowDefinition.Height" Value="2*"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Results.Count}" Value="0">
                    <Setter Property="RowDefinition.Height" Value="0"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </RowDefinition.Style>
</RowDefinition>

---

You can see here an example of manipulating Rows and Columns in a Grid. Even though the documentation is for .Net (WPF) it is still relevant for WP7/Silverlight.

I personally would think twice before using a Grid in this manner. May be, whatever you are trying can be achieved using a stackpanel or any other out of the box container controls.

---

Set Name for your grid first. Initially, set the row heights via XAML attribute:

<Grid Name="GridSize">
     <Grid.RowDefinitions>
        <RowDefinition Height="3*"></RowDefinition>
        <RowDefinition Height="1*"></RowDefinition>
        <RowDefinition Height="2*"></RowDefinition>
     </Grid.RowDefinitions>
     <Grid Name="A" Grid.Row="0""></Grid>
     <Grid Name="B" Grid.Row="1""></Grid>
     <Grid Name="C" Grid.Row="2""></Grid>
</Grid>

When you want to collapse a RowDefinition:

A.Visibility = Visibility.Collapsed;
GridSize.RowDefinitions[0].Height = new GridLength(0);

When you want to make it visible again:

A.Visibility = Visibility.Visible;
GridSize.RowDefinitions[0].Height = new GridLength(3, GridUnitType.Star);

---

A simple solution (use the height that you know your controls will expand to):

<RowDefinition MaxHeight="30"/>

Then make sure all the controls inside that Row will use Visibilitty="Collapsed"

This worked for me, as I only needed to set the flag to Collapse / Visible once only, not sure how this will work if you would like to toggle visibility at run time.