Xamarin: Sizing Issues when dynamically adding rows to a Grid

Issue

I am new to Xamarin and I'm trying to figure out some of the basic functionality.

I have a simple content page containing a ScrollView with a nested StackLayout, then other nested controls within the StackLayout:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TestApp.Views.ScrollGrow">

  <ScrollView x:Name="myScrollView" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
    <StackLayout x:Name="MainStack" BackgroundColor="YellowGreen" VerticalOptions="FillAndExpand">
        <Label Text="Start of StackLayout"></Label>
        <Button Text="Populate Grid" Clicked="Button_Clicked" x:Name="btnFill" BackgroundColor="Black" TextColor="White"></Button>
        <Grid x:Name="myGrid" BackgroundColor="Yellow" VerticalOptions="FillAndExpand"></Grid>
        <Label Text="Bottom of StackLayout"></Label>
    </StackLayout>
  </ScrollView>
</ContentPage>

I am attempting to dynamically add rows to the Grid on a button click:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ScrollGrow : ContentPage
{

    public ScrollGrow()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            for (int i = 0; i <= 35; i++)
            {
                FillMyGrid(i);
            }               
        });
    }

    private void FillMyGrid(int theCounter)
    {
        myGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto, });
        var testLabel = new Label();
        testLabel.Text = "Test row number: " + theCounter;
        testLabel.TextColor = Color.Black;
        Grid.SetRow(testLabel, theCounter);
        Grid.SetColumn(testLabel, 0);
        myGrid.Children.Add(testLabel);
    }

  }
}

Unfortunately, the size of the StackLayout doesn't appear grow when the Grid grows.

Before	After

What am I missing here? Can someone explain to me why this isn't working and what the correct way to do this would be?

Solution

Using StackLayout outside of ScrollView may achieve the effect you want.

Here is the xaml code:

<StackLayout>
    <ScrollView x:Name="myScrollView" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="MainStack" BackgroundColor="YellowGreen" VerticalOptions="FillAndExpand">
            <Label Text="Start of StackLayout"></Label>
            <Button Text="Populate Grid" Clicked="btnFill_Clicked"  x:Name="btnFill" BackgroundColor="Black" TextColor="White"></Button>
            <Grid x:Name="myGrid" BackgroundColor="Yellow" VerticalOptions="FillAndExpand"></Grid>
            <Label Text="Bottom of StackLayout"></Label>
        </StackLayout>
    </ScrollView>
</StackLayout>

Here is the screenshot:

Answered By - Wen xu Li - MSFT