Xamarin Forms Horizontal / Vertical options don' seem to be working

Question

I have the following XAML in my Xamarin Forms project

    <StackLayout x:Name="slFullPage" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Margin="0,0,0,0" BackgroundColor="AliceBlue">
        <localapp:PageHeader x:Name="pgHeader" VerticalOptions="Start" HorizontalOptions="Fill" />
        <combobox:SfComboBox x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro" 
                             TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
                             Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250" HeightRequest="30"
                             DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start"
                             DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
        </combobox:SfComboBox>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="Aqua">
            <buttons:SfButton x:Name="btnCancel" Text="{localapp:Translate Cancel}" HorizontalOptions="Start" VerticalOptions="End" Margin="8,0,4,0"/>
            <buttons:SfButton x:Name="btnDone" Text="{localapp:Translate Done}" HorizontalOptions="End" VerticalOptions="End" Margin="4,0,8,0"/>
        </StackLayout>
        <localapp:AppFooter x:Name="pgFooter" VerticalOptions="End" HorizontalOptions="Fill" />
    </StackLayout>

Based on my understanding of the horizontal options that can be specified on an object, I would expect the Cancel button to be at the start of my horizontal stack layout and my Done button to be at the end of the same stack layout.

Additionally, based on the vertical options that can be used, I would expect the stacklayout with the buttons in it as well as my appfoot to appear at the bottom of my slFullPage stack layout. However, neither of those things are happening.

Instead what I get can be seen below:

You can see that the entire page stacklayout is going all the way to the bottom of the screen but my buttons and footer are not at the bottom.

Additinally, you can see the horizontal stack layout (aqua) goes all the way across the screen but the buttons are not positioned based on their horizontal options.

Any ideas?? FYI - I am running the project as a UWP app.

Answer 1

You don't want to use a StackLayout (well 2 StackLayout), but a Grid:

It's more convenient for your layout, and it is way more performant.

<Grid ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinition>
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="80" />
    </Grid.ColumnDefinition>

    <localapp:PageHeader Grid.Row="0" x:Name="pgHeader" />

    <combobox:SfComboBox Grid.Row="1" x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro" 
                         TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
                         Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250"
                         DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center"
                         DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
    </combobox:SfComboBox>

    <buttons:SfButton Grid.Row="2" Grid.Column="0" 
                      x:Name="btnCancel" Text="{localapp:Translate Cancel}"  Margin="8,0,4,0"/>
    <buttons:SfButton Grid.Row="2" Grid.Column="2" 
                      x:Name="btnDone" Text="{localapp:Translate Done}" Margin="4,0,8,0"/>
</Grid>

Answer 2

Based on my understanding of the horizontal options that can be specified on an object, I would expect the Cancel button to be at the start of my horizontal stack layout and my Done button to be at the end of the same stack layout.

You could use a AbsoluteLayout to make the buttons positioned anywhere within a view.

<AbsoluteLayout BackgroundColor="LightBlue" HeightRequest="60" VerticalOptions="EndAndExpand">
        <Button Text="Cancel" Margin="10,10" BackgroundColor="DarkBlue" TextColor="White"/>
        <Button Text="Done" Margin="10,10" AbsoluteLayout.LayoutBounds="1, 0, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="DarkBlue" TextColor="White"/>
</AbsoluteLayout>

And use the VerticalOptions="EndAndExpand" to make it appears at the end of its parent and expands.

Updated:

I do not know what it was before, but for now, it doesn’t actually fill up the space in the StackLayout. It’s only when the fill option is used, that it will expand to that space.

When you expect the Cancel button to be at the start and the Done button to be at the end of the same stack layout, fill option and expend need to be setted. I use simple example to display.

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Aqua">
            <Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
            <Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
</StackLayout>

And if you do not want space between last two lines in the end, you need a nested stacklayout to do that without space.

Simple code:

 <StackLayout BackgroundColor="LightGray">
    <StackLayout>
        <Entry  x:Name="pgHeader" Text="pgHeader"  HorizontalOptions="FillAndExpand" />
        <Entry x:Name="cmbLanguage" Text="cmbLanguage" WidthRequest="250" HeightRequest="30"
                          BackgroundColor="Red" HorizontalOptions="CenterAndExpand" ></Entry>

    </StackLayout>

    <StackLayout  HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
        <StackLayout Orientation="Horizontal"  BackgroundColor="Aqua">
            <Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
            <Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
        </StackLayout>
        <Entry x:Name="pgFooter" Text="pgFooter"/>
    </StackLayout>
</StackLayout>