如何在Xamarin Forms中扩展Grid内的StackLayout？

Question

我有Xamarin Forms应用。我的页面底部应如下所示：

目前它看起来像这样：

问题是StackLayout没有扩展以填充空间。这是我的xaml：

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
  <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>

    <StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
      <Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
    <StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
      <Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>

  </Grid>
</StackLayout>

如何在Grid中扩展StackLayout？我想在中间触摸蓝色和红色背景。

Answer 1

您将StackLayouts设置为CenterAndExpand，这意味着他们只会占用所需的空间。你应该FillAndExpand他们喜欢：

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
  <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
      <Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
      <Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
  </Grid>
</StackLayout>