How to expand StackLayout inside Grid in Xamarin Forms?

Question

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.

Answer 1

I know its an old thread - just stumbled on this as part of trying to solve the same problem. "FillAndExpand" isn't the magic bullet however. You can see in this code that every nested element including the Grid is set to FillAndExpand, yet there's not expanding taking place.

    <ScrollView
        x:Name="rightScroll"
        Grid.Row="0"
        Grid.RowSpan="2"
        Grid.Column="1"
        Margin="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        BackgroundColor="Yellow">
        <FlexLayout
            Margin="0"
            Padding="0"
            AlignContent="Start"
            AlignItems="Start"
            BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
            Direction="Column"
            HorizontalOptions="FillAndExpand"
            JustifyContent="SpaceBetween"
            VerticalOptions="FillAndExpand">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition x:Name="textColumn"/>
                        </Grid.ColumnDefinitions>
                        <Image
                            Grid.Column="0"
                            Aspect="Fill"
                            HeightRequest="{StaticResource IconSize}"
                            Source="{Binding Photo.Source}"
                            VerticalOptions="CenterAndExpand"
                            WidthRequest="{StaticResource IconSize}" />
                        <!--  The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around  -->
                        <Frame
                            Grid.Column="1"
                            Margin="0"
                            Padding="3"
                            BorderColor="Red"
                            HeightRequest="{StaticResource IconSize}"
                            HorizontalOptions="FillAndExpand">
                            <Frame.Triggers>
                                <DataTrigger
                                    Binding="{Binding HasValidDescription}"
                                    TargetType="Frame"
                                    Value="True">
                                    <Setter Property="BorderColor" Value="Transparent" />
                                </DataTrigger>
                            </Frame.Triggers>
                            <controls:CustomEditor
                                x:Name="descEditor"
                                Margin="0,4,0,4"
                                BackgroundColor="White"
                                HorizontalOptions="FillAndExpand"
                                Keyboard="Chat"
                                Placeholder="Enter description of photo"
                                PlaceholderColor="Gray"
                                Text="{Binding Description, Mode=TwoWay}"
                                TextColor="Black"
                                Unfocused="CustomEditor_Unfocused" />

                        </Frame>
                    </Grid>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </ScrollView>

Answer 2

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>