Element not expanding in Xamarin.Forms

Question

Using StartAndExpand or EndAndExpand does not seem to actually expand the elements inside StackLayout. Even though there is more space available as seen in the blue area. Only FillAndExpand works.

Here is the code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             xmlns:local="clr-namespace:App6"
             x:Class="App6.MainPage"
             ios:Page.UseSafeArea="True">

    <StackLayout BackgroundColor="Blue"
                 HeightRequest="100"
                 Orientation="Horizontal"
                 Spacing="0"
                 VerticalOptions="Start">
        <Label BackgroundColor="Red"
               HorizontalOptions="Start"
               Text="Hi" />
        <StackLayout BackgroundColor="Salmon"
                     HorizontalOptions="EndAndExpand"
                     Orientation="Vertical">
            <BoxView BackgroundColor="Red"
                     HeightRequest="30"
                     HorizontalOptions="End"
                     VerticalOptions="Center"
                     WidthRequest="30" />
        </StackLayout>
    </StackLayout>
</ContentPage>

And here is what I get:

Top result is when using FillAndExpand for the child StackLayout, followed by EndAndExpand which does not expand, and lastly StartAndExpand, which also does not expand.

Isn't expand supposed to expand the element if the parent element has more space? If yes, why then StartAndExpand and EndAndExpand does not work?

Note: This is tested on Android only with Xamarin.Forms version 3.4.0.1008975.

Answer 1

Referring to @AndroDevil comment, the space is actually distributed between StackLayout's child elements, but they cannot fill it, unless their layout option contains Fill. It works more or less like FlexLayout's space between option.

I just added another element to the StackLayout, and it is clearer now what is going on.

Here is the code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             xmlns:local="clr-namespace:App6"
             x:Class="App6.MainPage"
             ios:Page.UseSafeArea="True">

    <StackLayout BackgroundColor="Blue"
                 HeightRequest="100"
                 Orientation="Horizontal"
                 Spacing="0"
                 VerticalOptions="Start">
        <Label BackgroundColor="Red"
               HorizontalOptions="Start"
               Text="Hi" />

        <Label BackgroundColor="Red"
               HorizontalOptions="EndAndExpand"
               Text="Bye" />

        <StackLayout BackgroundColor="Salmon"
                     HorizontalOptions="EndAndExpand"
                     Orientation="Vertical">
            <BoxView BackgroundColor="Red"
                     HeightRequest="30"
                     HorizontalOptions="End"
                     VerticalOptions="Center"
                     WidthRequest="30" />
        </StackLayout>
    </StackLayout>
</ContentPage>

And here what I get:

So Expand mean the following:

• StartAndExpand: Give me more space, but put me to the left.
• CenterAndExpand: Give me more space, but put me in the center.
• EndAndExpand: Give me more space, but put me to the right.
• FillAndExpand: Give me more space, I am gonna fill it.

Answer 2

Cause: When you add labels in stackLayout ,stackLayout will not make the subviews fit the size.

Solution:

Put the labels in a Grid. Refer the following code.

For example: If you want to set the label "Hi" as half of width of screen

<Grid BackgroundColor="Blue" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label  HeightRequest="100" Grid.Row="0" Grid.Column="0"  Text="Hi" BackgroundColor="Red" />
    <BoxView  Grid.Row="0" Grid.Column="1" BackgroundColor="Red"
                 HeightRequest="30"
                 HorizontalOptions="End"
                 VerticalOptions="Center"
                 WidthRequest="30"/>

</Grid>