XamarinフォームでStackLayoutをGrid内に展開するには？

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に設定します。つまり、必要なだけのスペースを取ることになります。

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