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.

Possible duplicate of [Hide grid row in WPF](http://stackoverflow.com/questions/2502178/hide-grid-row-in-wpf) — Palec, Oct 17 '16 at 16:36

score 10 · Answer 1 · edited Jul 20 '22 at 15:41

10

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.

edited Jul 20 '22 at 15:41

StayOnTarget

11,743
10
52
81

answered Oct 13 '11 at 05:57

WPF-it

19,625
8
55
71

score 7 · Answer 2 · answered Jun 29 '18 at 10:14

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>

score 7 · Answer 3 · answered Feb 05 '12 at 00:44

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>

score 2 · Accepted Answer · answered Oct 13 '11 at 03:47

2

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.

answered Oct 13 '11 at 03:47

moonlightdock

1,358
13
14

Just for completion, I used grid.Rowdefinitions.RemoveAt(index). I agree that placing a StackPanel could be a better option for this scenario. – Manish Basantani Oct 13 '11 at 08:33

score 1 · Answer 5 · edited Nov 15 '16 at 09:41

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

That's a very un-MVVM way to do this, just for the record. – Dan Jun 29 '18 at 09:49 — Dan, Jun 29 '18 at 09:49

score 0 · Answer 6 · answered Jul 10 '19 at 11:20

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.

How to collapse a RowDefinition?

6 Answers6