Removing space from grid when stackpanel is collapsed

Question

I have an app where I display rows of stack panels in a grid. The user can hide rows of stackpanels to "clean up" the grid, and only view/edit what they would like, the idea is to collapse the stackpanels between seperators and the space between closes up.

When I set the stackpanel to Visibility.Collapsed, the stackpanel disappears but the space they occupied is still present.

How do I make the gap go away? (I added the updatelayout, but this doesn't appear to do anything)

What it looks like before: Before

What it looks like after: After

My XAML:

    <ScrollViewer Name="scroll" PanningMode="Both" Grid.Column="0" Grid.Row="1">
        <ScrollViewer.Resources>
            <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">50</sys:Double>
            <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">50</sys:Double>
        </ScrollViewer.Resources>
        <Grid x:Name="RecipeEditorCtrl" VerticalAlignment="Top">                
        </Grid>
    </ScrollViewer>

My C#:

        ...
        int rowIndex = Grid.GetRow(CNtmp);

        rowIndex++;
        tmpCN = (CollectionNode)RecipeEditorCtrl.Children[rowIndex];
        while (tmpCN.dataType.Text != "SEPERATOR")
        {
            tmpCN.Visibility = Visibility.Collapsed;
            rowIndex++;
            tmpCN = (CollectionNode)RecipeEditorCtrl.Children[rowIndex];
        }
        RecipeEditorCtrl.UpdateLayout();
    }

Answer 1

您可以使用RowsDefinitions并将每个RowDefinition Height属性设置为Auto然后将StackPanel添加到这些行