CODEWITHSUNDEEP
xamarin.forms
Ian Warburton
Ian Warburton

Reputation: 15676

Change grid layout at runtime

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.

Upvotes: 1

Views: 1683

Answers (1)

Diego Rafael Souza
Diego Rafael Souza

Reputation: 5313

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.

Upvotes: 3

Related Questions