Collapse Labels and ListViews in Xamarin Forms

Question

I've got a relatively simple view which looks something like this:

{Label1}
{Label2}
{ListView1}
{Label3}
{ListView2}

The Label2 and ListView1's IsVisible properties are binded to a bool property. When false, they don't appear however, they take up space on the UI meaning there's a considerable gap between Label1 and Label3 like this:

{Label1}


{Label3}
{ListView2}

How can I make them appear like this instead:

{Label1}
{Label3}
{ListView2}

My XAML code looks like this:

<AbsoluteLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">

    <Grid
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        AbsoluteLayout.LayoutFlags="All"
        AbsoluteLayout.LayoutBounds="0,0,1,1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label 
            Text="Title" 
            HorizontalOptions="Center"
            VerticalOptions="Center"
            TextColor="White"
            FontSize="Large"
            FontAttributes="Bold"
            Margin="5"
            BindingContext="{x:Reference DashboardPageView}"
            IsVisible="{Binding DisplayFloatingTitle}"
            Grid.Row="0" />

        <Label 
            Text="Notifications" 
            HorizontalOptions="Start"
            VerticalOptions="Center"
            TextColor="White"
            FontSize="Medium"
            FontAttributes="Bold"
            Margin="3"
            IsVisible="{Binding HasNotifications}"
            Grid.Row="1" />

        <ListView Grid.Row="2" 
                  ItemsSource="{Binding Notifications}" 
                  HasUnevenRows="True" 
                  VerticalOptions="Start"
                  IsVisible="{Binding HasNotifications}"
                  SeparatorVisibility="None" Margin="1,0"
                  x:Name="NotificationsList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        ........
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Label 
            Text="Activities" 
            HorizontalOptions="Start"
            VerticalOptions="Start"
            TextColor="White"
            FontSize="Medium"
            FontAttributes="Bold"
            Margin="3"
            IsVisible="{Binding HasActivities}"
            Grid.Row="3" />

        <ListView Grid.Row="4" 
                  ItemsSource="{Binding Activities}" 
                  HasUnevenRows="True" 
                  VerticalOptions="Start"
                  SeparatorVisibility="None" Margin="4,0"
                  x:Name="ActivitiesList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        ....
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</AbsoluteLayout>

Answer 1

The problem is this line in your XAML:

<RowDefinition Height="*" />

It's set to *, which means it will take up all remaining space that it can get. If you want the content of this row to size automatically to it's content's size, you should use Auto:

<RowDefinition Height="Auto" />