首页 文章

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

提问于
浏览
0

我有Xamarin Forms应用程序 . 我的页面底部应如下所示:

enter image description here

目前它看起来像这样:

enter image description here

问题是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?我希望蓝色和红色背景在中间触摸 .

1 回答

  • 3

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

相关问题