How to expand StackLayout inside Grid in Xamarin Forms?

Issue

I have Xamarin Forms app. My page bottom should look like this:

Currently it looks like this:

Problem is that StackLayout doesn't expand to fill space. Here is my 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>

How can I expand StackLayout inside Grid? I would like that blue and red backgrounds touch in the middle.

Solution

You set the StackLayouts to CenterAndExpand, which means they will only take up as much room as they need. You should FillAndExpand them like:

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

Answered By - Steven Thewissen