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.

If the parent view is larger than the combined size of all its children, i.e. additional space is available, then the space is proportioned amongst child views with that suffix. Those children will "occupy" their space, but do not necessarily "fill" it.https://stackoverflow.com/questions/25338533/what-is-the-difference-between-xamarin-forms-layoutoptions-especially-fill-and — Anand, Apr 22 '19 at 05:43
@AndroDevil Wow, that was unexpected. I actually read that question before I posted here, but it did not make sense to me. Because if the space is given to an element, and the element default layout option is fill, it should fill that available space. But no, StackLayout is more like FlexLayout's space between. It just distribute the space between elements without giving it to them. Amazing. — Ghasan غسان, Apr 22 '19 at 23:58

Ghasan غسان · Accepted Answer · 2019-04-23T00:34:27.237

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.

score 4 · Answer 2 · answered Apr 22 '19 at 06:14

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>

Thanks Lucas for your answer, but it does not seem to only concern Label, but other views as well. Expand asks for more space to be given, but will not use it unless it has also `Fill`, otherwise it will just anchor itself inside the available space when using `Start`, `Center`, or `End`. — Ghasan غسان, Apr 23 '19 at 00:32

Element not expanding in Xamarin.Forms

2 Answers2