Change grid layout at runtime - xamarin.forms

Question

I have a grid with the following row definitions...
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
When the user presses a button, how do I remove the bottom two rows and have the top row (including the view within it) stretch to the bottom of the grid?
I kept all the rows and did this...
mainGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);
mainGrid.ForceLayout();
I would like to animate the change in height.

Answer 1

Try something like this:
The grid
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkOne"
BackgroundColor="Red"/>
<StackLayout Grid.Row="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkTwo"
BackgroundColor="Green"/>
<StackLayout Grid.Row="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="stkThree"
BackgroundColor="Blue"/>
<Button Text="Expand One"
HorizontalOptions="EndAndExpand"
Command="ExpandCommand"/>
</Grid>
The code behind
// Create the command and set it up to execute this method:
void ExecuteExpand()
{
stkTwo.IsVisible=false;
stkThree.IsVisible=false;
Grid.SetRowSpan(stkOne, 3);
grid.ForceLayout();
}
I'm not sure if it will work as you need, but make a try.