在运行时更改网格布局

Question

我有一个包含以下行定义的网格...

  <Grid.RowDefinitions>
    <RowDefinition Height="5*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
  </Grid.RowDefinitions>

当用户按下按钮时，如何删除底部的两行并将顶部的一行（包括其中的视图）拉伸到网格的底部？

我保留了所有行并这样做了......

mainGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);
mainGrid.ForceLayout();

我想制作高度变化的动画。

Answer 1

试试这样的：

网格

<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>

背后的代码

// 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();
}

我不确定它是否能满足您的需要，但请尝试一下。